android-logo

React Native Props Example


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
react-native-props

previous-button
next-button

facebook-logo
twitter-logo
instagram-logo

2020 © All rights reserved.