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 that 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 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!

About Snehal Agrawal

#SelfLearner #MobileAppDeveloper #TechnologyMiner #OpenSourceLover thats enough to describe me..

View all posts by Snehal Agrawal →

2 Comments on “Understanding of Props in React Native”

Leave a Reply

Your email address will not be published. Required fields are marked *

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