Props react native

React props is a function used in React JS. It stands for Properties and it is used to pass data from parent component to child component. A props consists of key value pair. React props is a component that allows an object to be passed through each component as a function of some initial value. This will make it easy to transfer props through multiple screens by having a parent pass it down to its children. To explain the case of React props in our example, we will write a simple React component using props.

Example

// App.js
import React, {Component} from 'react';  
import { StyleSheet, Text, View } from 'react-native';
import Display from './Display'

export default class App extends Component {  
  state = {  
    myState: 'Hello from Props State'  
  }

    render() {    
        return (
        <View style={styles.container}>
            <Display newState = {this.state.myState}/>
        </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F2F2F2',
    alignItems: 'center',
    justifyContent: 'center'
  },
});

Lets create another component

// Display.js 
import React, { Component } from 'react'
import { Text, View } from 'react-native'

const Display = (props) => {
   return (
      <View>
         <Text>
            {props.newState}
         </Text>
      </View>
   )
}
export default Display

Output