What are props in React Native?

Props are properties that help modify React components. The created components can be used with different parameters using the props concept. Using props, you can pass information from one component to another while reusing the component as per your requirements.

If you are proficient in ReactJS, you will be familiar with props, the same concepts followed in React Native.

Let’s look at an example to explain what props are.

Example 1: Props in React Native built-in components

Consider image component-

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

Stylesand Source is the attribute, which is the prop of the image component. The style props are used to add styles i.e. width, height, etc. while the source props are used to assign the url to the image to be displayed to the user. Source and styles and built-in properties for the Image component.

You can also use a variable that stores the url and use it for the source attribute 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 displaying 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: &#39;stretch&#39;,
   }
});
export default MyImage;

Example 2: Props within a custom component

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

Theme components are as follows -

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

This component takes parameter props. It is used inside the Text component to display the name as props.name. Let's see how to pass properties from student component to subject 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 the name attribute. The values ​​passed are Mathematics, Physics, and Chemistry. Themes can be reused by passing different values ​​to the name attribute.

This is a working example with Student and Topic components and 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

The above is the detailed content of What are props in React Native?. For more information, please follow other related articles on the PHP Chinese website!