props is nothing but  properties of  components, we simply calles  as props. In React Native, most of the components can be customized at the time of their creation with different parameters. These parameters are known as props. These props are immutable, and cannot be changed.

Example  source property for Image component which controls the image is displayed over the device screen.

React Native Default custom Props

 

import React from 'react';

import {StyleSheet, Text, View, Image} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

 

export default class App extends React.Component {

render() {

    return (

      <View>

        <Text>Image Props</Text>

        <Image

          source={{

            uri:

              'https://upload.wikimedia.org/wikipedia/commons/f/f0/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006_edit_1.jpg',

          }}

          style={{

            alignSelf: 'center',

            width: 250,

            height: 250,

            backgroundColor: '#FFCCFF',

          }}

        />

      </View>

    );

  }

}

 

Output

React Native Props

 

Using props in Custom Component

A single component can be used in many different scenarios in the app by making slightly different properties in each place. To implement the props in this component, this.props is applied followed by the property

 

import React from 'react';

import {Stylesheet, Text, View, Image} from 'react-native';

 

export default class ControlComponent extends React.Component {

  render() {

    return (

      <View style={{alignItems: 'center', margin: 30}}>

        <PresentorComponent id="1" />

        <PresentorComponent id="2" />

      </View>

    );

  }

}

 

class PresentorComponent extends React.Component {

  render() {

    return <Text>This is from Props {this.props.id}</Text>;

  }

}

 


Subscribe For Daily Updates