How to pass data as props to component in react native.

Everyone who is new to React Native is confused by these so called props, because they are never mentioned in any other web framework, and rarely explained on their own. Basically props are used to pass data from component to component. In this guide, I want to explain React Native props in greater detail. First, it explains the “What are props in React Native?” question, followed by different props examples to see how they can be used in React Native.

What are props in React Native?

We can also use props in our components. A single component can be used in many different places in the app by making slightly different properties in each place.

To implement the props in our component, “this.props” use by class based component and “props” use by functional based component.

Today i will show you how to use props in your project as function base component.

1). Home.js File

import React from ‘react’;
import {View} from ‘react-native’;
import {ChildPage} from ‘./Profile’;

export const Home = (props) => {
return (
<View>
<ChildPage name=”Hello Aman” />
<ChildPage name=”Hello Max” />
</View>
)};

2). Child.js File

import React from ‘react’;
import {View, Text} from ‘react-native’;

export const ChildPage = (props) => {
return (
<View style={{alignItems: ‘center’,margin:5}}>
<Text style={{fontSize: 30}}>{props.name}</Text>
</View>
)};

You can do many things using props like pass data, style and calling function etc etc.

In my next tutorial i will show how to call function and update value from child to parent using props.