The basic concept of props (Properties) is the same as that of
React for the web. They serve as a way data is passed from a parent to a child
component.
This article will examine how props work in React Native apps and
provide examples with functional components.
Props are used to pass values between components in React Native. It allows us
to change the behavior and appearance of the child component.
- Unidirectional Data Flow: Data flows from parent to child components via props, as in React web.
- Read-Only: Props cannot be changed within the child component that receives them. You should never directly modify props in the child component. If a child needs to communicate changes to the parent, you typically pass down a function as a prop from the parent, which the child can then invoke.
- Configuration: Props enable child components to be flexible and reusable in a variety of scenarios.
Let's look at some examples.
Example #1
We've created a simple reusable component that displays a personalized
message. Here's our GreetMe component. In the component, we used the
propName type to pass the name prop.
Here's our parent component, which makes use of the GreetMe component.
In the parent component, the GreetMe component is used several times.
Each GreetMe instance is assigned a unique name prop.
Example #2
Props can be of various data types, such as numbers, booleans, arrays,
objects, styles, and functions. We have passed different types of props into
the component.
This component makes use of these props to display various information.
Here's our parent component, which uses the UserCard component.
We passed the User object to the component's user prop. The
function is assigned to the onButtonPress property. Here, a function is
passed as a prop to allow the child to cause an action in the parent.
Example #3
This example shows how props can be used to bind data to a list component.
FlatList is a useful component for efficiently rendering lists of data.
To display an array of data, we can pass it to FlatList's data prop.
And the renderItem prop specifies how to render each item in the list.
We have a custom renderItem that defines how each item will display
data. The item array renders the data as a View with
Text elements. The keyExtractor prop generates a unique key for
each list item. This is critical for FlatList's performance optimization.
Our parent used this child component for data binding.
DataList is a component that is specifically intended to render a list.
The items prop accepts an array of objects as input. The data source
for the FlatList component within the DataList component is the
items prop.
Example #4
In this example, we will look at how to use children prop to
create React Native components. This prop is useful for making container and
wrapper components.
The parent employs the Container component.
The Container component is designed to wrap other components. The
Container receives the Text and Button elements as its children.
The Container component retrieves these elements from
props.children and renders them in its View element.
These examples show how props are commonly used in React Native. We can use it
to pass values, control styling, and handle events. It can also be used to
transmit data that is used as a data source by the components. It allows us to
create dynamic UI and highly reusable components.
You can get the source code from
here.
Happy coding!!! 😊
