React Native – Props

Although the word “props” stands for “properties”, it looks more like attributes in HTML tags and works like arguments for functions in native languages for mobile development.

Using props, you can pass data from the parent view down to the child view. Let’s take a look at the sample code for class components again.

Props are Unchangeable — Immutable

Components receive props from their parent. These props should not be modified inside the component. In React and React Native the data flows in one direction -> From the parent to the child.

You can write your own components that use props. The idea behind props is that you can make a single component that is used in many different places in your app. The parent that is calling the component can set the properties, which could be different in each place.

<Image source={url} style={{width: 100, height: 100}}/>

Here, ‘source’ is a props. We can pass different url and it will show different images. Note that we are using the same component ‘Image’ but the props ‘url’ is different.

Props essentially help you write reusable code.

Passing the Data between Components using Props

We can pass data between different components using props.
React is a JavaScript library created by Facebook. Data handling in React could be a bit tricky, but not as complicated as it might seem. I have currently compiled three methods of Data Handling in React :-

• From Parent to Child using Props
• Child to Parent using Callbacks
• From parent to child – Simply, use this.props.dataFromParent (just a variable used for sending props) to access the data sent from Parent to Child.
• From Child to Parent Using Callbacks

1. Define a callback function that takes in a parameter which we consider having accessed from the child in the Parent.js
2. Also, send the defined callback function as a props to the Child1.js
3. In Child1.js send the data using this.props.callback(dataToParent).

Exapmle of Props:

import React, { Component } from 'react';  
import { StyleSheet, Text, View } from 'react-native';  
  
class ChildClass extends Component {  
  render() {  
    return (  
        <View style={{alignItems: 'center'}}>  
          <Text style={styles.welcome}>Hello {this.props.name}!</Text>  
        </View>  
    );  
  }  
}  
  
export default class ParentsClass extends Component {  
  render() {  
    return (  
        <View style={{alignItems: 'center'}}>  
          <ChildClass name='Satish' />  
          <ChildClass name='Ramesh' />  
          <ChildClass name='Chintu' />  
        </View>  
    );  
  }  
}  
const styles = StyleSheet.create({  
   welcome: {  
    fontSize: 30,  
  }  
});