Props in React Native

Published in

lTunes Tribe

3 min readJul 12, 2022

Props, or properties, are data that is passed to child components in a React application. React components render UI elements based on their props and their internal state. The props that a component takes (and uses) defines how it can be controlled from the outside.

PropTypes

The prop-types package allows you to add runtime type checking to your component that ensures the types of the props passed to the component are correct. For instance, if you don’t pass a name or isYummy prop to the component below it will throw an error in development mode. In production mode the prop type checks are not done. Defining propTypes can make your component more readable and maintainable

Multiple PropTypes

You can also have multiple propTypes for one props. For example, the name props I’m taking can also be an object, I can write it as

Children Props

There is also a special props called children, which is not passed in like

Instead, you should do this

then you can do this in Recipe’s render:

You will have a component in your Recipe saying Hello React Native.

And the propType of children is

What are props?

Props are used to transfer data from parent to child component. Props are read only. Child component can only get the props passed from parent using this.props.keyName. Using props one can make his component reusable.

Use of props

Once setup is completed. Copy the code below to index.android.js or to index.ios.js file to use the props.

Using props one can make his component generic. For example, you have a Button component. You can pass different props to that component, so that one can place that button anywhere in his view.

Default Props

defaultProps allows you to set default prop values for your component. In the below example if you do not pass the name props, it will display John otherwise it will display the passed value

Multiple props rendering

For rendering multiple props or variables we can use ``.

Output: test name

In this article, I explained the use of props in react native in a simple way. We provided the explanation over the Class component structure. This is because it is more understandable.