What are props in react native?

Props are properties that help to modify the React Native component. The component created can be used with different parameters using props concept. With props you can pass 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, as the same concepts follow in React Native. Props are read-only and help make components dynamic and reusable.

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 (props) for the Image component. The style prop is used to add styling like width, height, etc., and the source prop is used to assign a URL to the image to display to the user.

You can also use a variable that stores the URL and use it for the source prop 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>
);

Here's a complete example showing the display of a simple image using 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 in Custom Components

You can use props to send information from one component to another. In this example, we have two custom components: Student and Subject.

The Subject component receives props and displays them:

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

The component takes the parameter props and uses props.name to display dynamic content. Here's how to pass props to the Subject component from the Student component:

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

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

Here's the complete working example:

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;

Key Benefits of Props

• Reusability: Components can be reused with different data
• Dynamic Content: Props make components flexible and dynamic
• Data Flow: Enable parent-to-child component communication
• Immutable: Props are read-only, ensuring data integrity

Output

Conclusion

Props are essential for creating dynamic and reusable React Native components. They enable data flow from parent to child components and make your code more modular and maintainable.