What are props in react native?

Props are properties that help to modify the react component. The component created can be used with different parameters using props concept. With props you can pass the information from one component to another and at the same time re-use the component as per your requirement.

You will be familiar with props if you are well versed with ReactJS, the same concepts follow in React Native.

Let us take a look at an example that explains what props are.

Example 1: Props inside React Native Built-in Components

Consider the Image component −

<Image
   style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097   /gNLINY67_400x400.png'}}
/>

The style and source are properties i.e props for the image component. The style props is used to add styling i.e., width, height, etc., and the source props is used to assign url to the image to display to the user. The source and style and the build-in props of the Image component.

You can also use a variable that stores the url and use it for the source props as shown below −

let imgURI = {
   uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
   <View style={styles.container}>
      <Image style={styles.stretch} source={imgURI} />
   </View>
);

The example below shows the display of a simple image using the built-in props −

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

const MyImage = () => {
   let imgURI = {
      uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
   };
   return (
      <View style={styles.container}>
         <Image style={styles.stretch} source={imgURI} />
      </View>
   );
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: 'stretch',
   }
});
export default MyImage;

Example 2: Props inside Custom Component

You can make use of props to send information from one component to another. In the example below there are two custom components created, Student and Subject.

The Subject component is as follows −

const Subject = (props) => {
   return (
      <View>
      <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
      </View>
   );
}

The component takes the parameters props. It is used inside the Text component to display the name as props.name. Let us see how to pass props to the Subject component from the Student Component.

The Student component is as follows −

const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
      </View>
   );
}

In the Student component the Subject component is used with name props. The values passed are Maths, Physics and Chemistry. The Subject can be re-used by passing different values to the name props.

Here is a working example with Student and Subject component along with the output.

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

const Subject = (props) => {
   return (
      <View>
         <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!      </Text>
      </View>
   );
}
const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
         </View>
   );
}
export default Student;

Output