How to pass values from one component to another in react-native android

Question

I'm new in react-native android, I wanna know How to pass values from one component to another in react-native android, I just wanna to know 2 things,

1. How to pass data
2. How to retrieve data

give any reference or link which is understood easy.thanks advance

Answer 1

There are two types of passing data,

1. State : Used if your component is in the same class you can simply use state to pass data between components
2. Props : Used if you want to pass data between different class (child <-> parent).

reference: https://facebook.github.io/react-vr/docs/components-props-and-state.html

React Native also recomend to use state management if your app is getting bigger.

One of the most used state management is by using REDUX, in short you can make your props behave like a global variable that you can access across your app.

for more detailed introduction you can read this :

https://medium.com/@jonlebensold/getting-started-with-react-native-redux-2b01408c0053

Answer 2

If you are using react-navigation for routing from one component to another, it's pretty simple to send data in params as you move to a new component. Have a look at the docs here.

In your android.js file, initialize all the routes like below:

import Component from './app/components/Component/Component';
import HomeComponent from './app/components/HomeComponent/HomeComponent';
const Mobile = StackNavigator(
{Login: { screen: Component },
Home: { screen: HomeComponent },},
 { initialRouteName: 'Login' },
{ headerMode: 'screen' });
AppRegistry.registerComponent('Mobile', () =>Mobile);

Then the login screen will load first, then use this command in a function or constructor to navigate:

this.props.navigation.navigate('Home',{param:'SomeParameter'})

In the Home screen constructor print out the this.props, and in the console you will find the param key in that object.