What are props in React Native ?

14 Jul, 2021
Props are used to provide properties to the components using which they can be modified and customized. These properties are passed to the components when the component is created. Props are used in both user-defined and default components to extend their functionality. These props are immutable and cannot be changed after the creation of the component.
<View>
    // Remaining application code

<Component prop1 = {some value} 
    prop2 = {some value} ... propn = {some value} />

     // Remaining application code
</View>
The value of the props of the component is enclosed in braces to embed the expression in JSX.
Example 1: Props in Default Component: In this, we will see the usage of props inside a component that is available to us by default.
 
Creating React Native Application:
Step 1: Create the React Native application using the following command:expo init PropsDefaultDemo
Step 1: Create the React Native application using the following command:
expo init PropsDefaultDemo
Step 2: After creating your project folder i.e. PropsDefaultDemo, move to it using the following command:cd PropsDefaultDemo
Step 2: After creating your project folder i.e. PropsDefaultDemo, move to it using the following command:
cd PropsDefaultDemo
Project Structure: It will look like this.
Implementation: Write down the following code in App.js to show the functionality of Props. Here we will display several views where each will be having different properties.
App.js
import { StatusBar } from 'expo-status-bar';import React from 'react';import { StyleSheet, Text, View } from 'react-native';  // Exporting default componentexport default function App() {  return (    <View style={styles.container}>      <View style = {styles.style1} />      <View style = {styles.style2}/>      <View style = {styles.style3}/>      <View style = {styles.style4}/>    </View>  );}  // Creating stylesconst styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },  style1:{    backgroundColor: "red",    height: 100,    width: 200  },  style2:{    backgroundColor: "green",    height: 50,    width: 50  },  style3:{    backgroundColor: "blue",    height: 100,    width: 100  }});
 
Step to run the application: Run the server by using the following command.
npm start
Output:
Example 2: Props in User Component In this section, we will see the usage of props inside a component that is user-defined.
Creating React Native Application:
Step 1: Create the React Native application using the following command:expo init PropsUserDemo
Step 1: Create the React Native application using the following command:
expo init PropsUserDemo
Step 2: After creating your project folder i.e. PropsUserDemo, move to it using the following command:cd PropsUserDemo
Step 2: After creating your project folder i.e. PropsUserDemo, move to it using the following command:
cd PropsUserDemo
Project Structure: It will look like this.
Implementation: Create a new component file called ImageFill.js that will display an image specified as a prop a specified number of times in a prop called count.
ImageFill.js
import { View, Image, StyleSheet, ScrollView } from 'react-native';import React from 'react';  function ImageFill(props) {    return (        <View style={styles.contStyle}>            {[...Array(props.count)].map(        () => (          <Image source={props.image} style = {{height: 100,width: 100,           flex:1, flexWrap:'wrap'}}/>        )      )}        </View>    );}  // Creating stylesconst styles = StyleSheet.create({    contStyle:{        flex:1,        alignItems: 'center',        justifyContent: 'center',        width: "100%"      }});  // Exporting ImageFill Componentexport default ImageFill;
App.js
import { StatusBar } from 'expo-status-bar';import React from 'react';import { StyleSheet, Text, View, ScrollView } from 'react-native';import ImageFill from './ImageFill';  // Exporting default componentexport default function App() {  return (    <ScrollView style={styles.container}>      <ImageFill image = {require('./assets/gfglogo.png')}       count = {4}/>    </ScrollView>  );}  // Creating stylesconst styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    flexDirection: 'column',    flexWrap: 'wrap',  },});
Step to run the application: Run the server by using the following command.
npm start
Output: 
Picked
React-Native
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.