Written By:
yashpal
5 minute read
ReactNativeReactNative PropsMobile Application

What is The Props in React Native?

Posted in Programming     MARCH 25, 2021

In react native, when we create a component, we can customize it using the parameters, and these parameters are called props. every component has its own props but we can also define and use our own props. and all these props that we defined can available to all components.

The props in React Native?

A prop is an immutable thing that cannot be changed after declaring the component. We can't change it in the future.

For example, to load an image in react native, we need to define a source that is a built-in property or props for the image component. Apart from that, we can also set up our own props on an image like we define an image component in a separate function and whenever we call that file, we can pass an image URL that can use by image source props.

Let's understand the props using examples.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const New = (props) => {
  return (
    <View>
      <Text style={styles.text}>Hello, I am {props.name}!</Text>
    </View>
  );
}
const App = () => {
  return (
    <View style={styles.container}>
      <New name="React Native" />
    </View>
  );
}
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

Output

props in react native

Code Explanation

Here in the above code, we define two components New and App. By default, we export the App component. Nowhere in the New component, we pass the props by default as a parameter and then we return a View component in which we have a Text component that using the value of the name. here name is a prop. so whenever we call this New component we need to pass a value as a name prop that can be used by New component. if we can't send any prop when we calling the New component then it will just print the Null value.

In the App component, we define a View and inside it, we called our New component using the value name="React Native". so it just prints the Hello, I am React Native!


In react native using props, we can also call one component using different values and reuse the component that as many times as we want. It saves our lot of effort and can minimize our code complexity and size of our app.

Here, we define a new file App.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import New from './New';
const App = () => {
  return (
    <View style={styles.container}>
      <New name="React Native" />
      <New name="React JS" />
      <New name="Javascript" />
    </View>
  );
}
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
});

And here, we defined another file New.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const New = (props) => {
  return (
    <View>
      <Text style={styles.text}>Hello, I am {props.name}!</Text>
    </View>
  );
}

export default New;

const styles = StyleSheet.create({
    text: {
      fontSize: 30,
    },
});

Output

props in react native

Code Explanation

In the above code, we define two files one is App.js that is the default file and the second is New.js in which we declare a New component that returns a View containing the Text component that uses the value of a property called name. So, whenever we call this New component from the New.js file, we need to pass property.


In the App.js file, we first import the New.js file using the import statement. Here, we don't need to include the .js extension when we importing the New.js file. react-native by default uses the .js file. in the App component, we call the New component three-time using different values of name prop.


Note: This feature of calling a component with different props is so powerful. Like, think about a scenario where you have an application and in which you have a feature to download the images. So you don't need to make a different component for downloading each file, just make a separate component accept an image source, and download that image.

Also Read: How to create a component in React Native?


   IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS