What is Props in React Native Explained Tutorial with Example

There are various types of components available in React Native. Each component has its unique task. Props are used to customize the components by giving them different parameters. Each component has its infrequent ability to customize the component.

For Example : In this tutorial we would going use component Image to show image in application and to gain control of Image, we would use Prop named as source . Source controls what shows inside Image component. Like we can show a local image or also can show image from HTTP URL.

Source Code for index.android.js file :

<br />
import React, { Component } from ‘react’;<br />
import {<br />
 AppRegistry, Image<br />
} from ‘react-native’;</p>
<p>export default class Myproject extends Component {<br />
 render() {</p>
<p> let Image_Http_URL ={ uri: ‘/wp-content/uploads/2017/06/sample_image.png’};</p>
<p> return (<br />
 <Image source={Image_Http_URL} style = {{height: 200, resizeMode : ‘center’, margin: 5 }} /><br />
 );<br />
 }<br />
}</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);

import React, { Component } from ‘react’;

import {

AppRegistry, Image

} from ‘react-native’;

export default class Myproject extends Component {

render() {

let Image_Http_URL ={ uri: ‘/wp-content/uploads/2017/06/sample_image.png’};

return (

);

}

AppRegistry.registerComponent(‘Myproject’, () => Myproject);

Screenshot :

Next step is to make your own component with Props. So now we would make a single Text component and by using Props we can call it anywhere in our application with various styles.

Source Code for index.android.js file with own Props :

<br />
import React, { Component } from ‘react’;<br />
import { AppRegistry, Text, View } from ‘react-native’;</p>
<p>class HelloClass extends Component {<br />
  render() {<br />
    return (<br />
      <Text style={{marginTop : 10}}>Hello {this.props.StudentName} !</Text><br />
    );<br />
  }<br />
}</p>
<p>export default class MyProject extends Component {<br />
  render() {<br />
    return (<br />
      <View style={{alignItems: ‘center’, marginTop : 20}}></p>
<p>        <HelloClass StudentName=’Pankaj’ /><br />
        <HelloClass StudentName=’Honey’ /><br />
        <HelloClass StudentName=’Sumit’ /></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>// skip this line if using Create React Native App<br />
AppRegistry.registerComponent(‘MyProject’, () => MyProject);

import React, { Component } from ‘react’;

import { AppRegistry, Text, View } from ‘react-native’;

class HelloClass extends Component {

render() {

return (

<Text style={{marginTop : 10}}>Hello {this.props.StudentName} !</Text>

);

}

export default class MyProject extends Component {

render() {

return (

</View>

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent(‘MyProject’, () => MyProject);

What we are doing in above code :

In above code we have created a extra class named as HelloClass. Inside that class we would create a Text component. Now we would set this component as Props using this.props.StudentName . The Prop value is Hello. Now we would call that Prop into our Main Myproject class View component using ClassName PropName .

Screenshot :