Props - React Native







When App developed, most components can be customized with different parameters. Such parameters of formation are called props, short of properties. One basic element of React Native, for example, is the Picture. You may use a prop called source to track what object it shows when you create an image.


Let me help with real code below :

import React, { Component } from 'react';
import { Image } from 'react-native';
export default class MNCImageIcon extends Component {
render() {let pic = {
uri: 'https://static.wixstatic.com/media/8ce2d2_22b0afd24d354c2aa5532db01224838e~mv2.jpg/v1/fill/w_1296,h_972,al_c/8ce2d2_22b0afd24d354c2aa5532db01224838e~mv2.jpg'
};
return (
<Image source={pic} style={{width: 300, height: 200}}/>
);}
}

Try pasting this code inside your local IDE or use my console from NawabBlog


Note the{ pic} braces that surround the variable pic in JSX. You can place any expression of JavaScript in JSX braces.


You can also use props for your own parts. By referring to this.props in your rendering feature, this allows you to create a single component that is used in several different locations in your app, with slightly different properties in each location. Here is an example of this:


import React, { Component } from 'react';
import { Image } from 'react-native';
class NameHolder extends Component {render() 
{return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}}
export default class LotsOfNameHolder extends Component {
render() {
return (
<View style={{alignItems: 'center', top: 50}}>
<NameHolder name='Nawab' />
<NameHolder name='Micle' />
<NameHolder name='Neha' />
</View>
);
}
}

Try pasting the code App.js or use my console from NawabBlog.


Using name as a prop helps us to customize the NameHolder component for each of our greetings, so we can reuse the component. The NameHolder module in JSX is also used in this example, similar to the built-in components. The ability to do this is what makes React so amazing-you can invent new ones when you feel like you have a different set of basic UIs to work with.


The other new thing that is happening here is the part of View. A View is useful to help manage design and layout as a container for other components.


You can create a wide variety of static screens with props and the basic Text, Picture, and View components. You need to know about the state to make the software change over time.


57 views
Never Miss a Post. Subscribe Now!

Contact Us: nawabblog@gmail.com

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad