React Native Props

React Native Props

This post will give you an Understanding of Props in React Native. React Native components have some Props which are helpful to customize the component. For example placeholder, value, style, etc are props. Parent view sets React Native Props and they are fixed throughout the lifetime of a component.

Presentational components should get all data by passing Props. Only container components should have State.

As we all know React is a component-based language. So here everything you will make will become a component. React Native has some basic components like Text, InputText, Button, etc. You can explore more in the Introduction of 12 Basic React Native Components post. But other than that everything you make with the combination of those components will also become the component.

Basic components have some props defined as a style, autoCorrect, onPress, Size, Color, etc. which very helpful to customize according to need and we also use it according to our needs. For example, We can put TextInput anywhere just by defining the prop placeholder. TextInput remains the same, just placeholder changes. Similarly, when we make our custom component we need to make something dynamic so that we can use the same component, again and again,  we just need to pass some dynamic values and props will handle all other stuff.

Understanding of Props in React native Using an Example

Below we are making a component MyCustomTextWith which shows first name and last name in the single sentence. If we want the same thing to use everywhere will treat this as a component and though we want to use this component, again and again, need to make the first name and last name dynamic so that we can use it for the different first name and last name. This can be easily done with Props.

While making our custom component everything we want to make dynamic should be set with props that can be passed from the Master container components.

Code

Here is the example code to understand it more easily

App.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
// We are making our custom component to make use of it everywhere we want 
class MyCustomTextWith extends Component {
  render() {
    return (
      <View>
        <Text>Your First Name is {this.props.firstname}! and Last name is{' '}
          {this.props.secondname}</Text>
      </View>
    );
  }
}
export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{justifyContent: 'center',alignItems: 'center', flex:1}}>
        {/*Use of our custom component MyCustomTextWith*/}
        <MyCustomTextWith firstname='fName1' secondname='lname1'/>
        {/*We are setting the props dynamically from the main UI 
           where we want to use it. We candynamically set the value 
           using props from master every time*/}
        <MyCustomTextWith firstname='fName2' secondname='lname2' />
      </View>
    );
  }
}

Output Screenshot

Output in Online Emulator

Hope you understand the Props. As props and state are very important topics to cover before going further so we planned to describe in between the basic element series.

That was the React Native Props. If you have any doubts or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂


Related Posts

6 thoughts on “React Native Props”

  1. “Presentational components should get all data by passing Props. Only container components should have State”

    Am getting confused with “container components should have State” can u please explain about this in detail

    Reply
    • For example, You have made a child component MyCustomInput with prop color and hint and used it in the parent component to make a form.

      <View>
      <MyCustomInput color=’black’ hint=’Name’/>
      <MyCustomInput color=’blue’ hint=’Email’ />
      <MyCustomInput color=’yellow’ hint=’Age’ />
      </View>

      Here container component is Form View and presentational component MyCustomInput.
      So according to the statement
      “Presentational components should get all data by passing Props. Only container components should have State”
      You have to pass the props in MyCustomInput but to manage the value of the input you have to manage the state in the Form View, not in MyCustomInput.

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.