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 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 component export 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 styles const 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 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 styles const styles = StyleSheet.create({ contStyle:{ flex:1, alignItems: 'center', justifyContent: 'center', width: "100%" } }); // Exporting ImageFill Component export 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 component export default function App() { return ( <ScrollView style={styles.container}> <ImageFill image = {require('./assets/gfglogo.png')} count = {4}/> </ScrollView> ); } // Creating styles const 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:
