Understanding of Props in React Native

Understanding of Props in React Native

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 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 style, autoCorrect, onPress, Size, Color etc. which very helpful to customize according to need and we also use it according to our need. For an 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 which can be passed from the Master container components. Here is the Example code to understand it more easily.

App.js

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 doubt 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. 🙂

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

4 thoughts on “Understanding of Props in React Native”

  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

    • 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.

Leave a Comment

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

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

About React will use the information you provide on this form to be in touch with you and to provide updates and marketing.