Passing Data Between Screens in React Native

I am creating a Simple App in which I demonstrate how we can use data from one page to another. React Native Router Flux is the navigation tool. This App is just to understand the basic concept of using React Native Router Flux that passing data by clicking on Button and get it to another page.
In this blog, I also show how to get data from Input and passes it to another screen.

I am using React Native Version 56 which is the current version.

To install React Native you can refer to this link below:

https://facebook.github.io/react-native/

Let's start building an App

1. Create React Native App:

react-native init MyApp(App Name)

Or For Specific Version:

react-native init MyApp(App Name) --version 0.46.1

2. Run React Native App:

cd MyApp

react-native run-android

3. After running react-native run-android, you will see your new app running in your Android emulator look like this

4. Install React Native Router Flux

For further References Go To This Link:
https://github.com/aksonov/react-native-router-flux

npm install --save react-native-router-flux

react-native link react-native-router-flux

5.  Create First file name as PageOne.js

Put This code in PageOne.js file

import React, { Component } from 'react';

import { Text, View, TouchableOpacity } from 'react-native';

import { Actions } from 'react-native-router-flux';



export default class PageOne extends Component {

    render() {

        return (

        <View style={styles.container}>

        <TouchableOpacity style={styles.btnContainer} onPress={this.onPressNext.bind(this)}>

        <Text style={styles.textColor}>Send Data to Second Screen</Text>

        </TouchableOpacity>

        </View>

        );

    }

    onPressNext() {

        Actions.PageTwo({ data: "HELLO WORLD" });

    }

}

const styles = {

    container: {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center',

    },

    textColor: {

        color: '#fff'

    },

    btnContainer: {

        backgroundColor: '#0abde3',

        padding: 20,

        borderRadius: 5

    }

}

The Code will look like this in PageOne.js file

6. Create Second file name as PageTwo.js

import React, { Component } from 'react';

import { Text, View } from 'react-native';

import { Actions } from 'react-native-router-flux';

export default class PageTwo extends Component {

    render() {

        return (

        <View style={styles.container}>

         <Text style={styles.txtStyle}>

          {this.props.data}

         </Text>

        </View>

        );

    }

}

const styles = {

    container: {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center',

    },

    txtStyle: {

    fontSize: 30,

    fontWeight: 'bold',

  }

}

The Code will look like this in PageTwo.js file

7. Finally, navigating tools using here i.e Router. This is connecting tool between the Pages. So I created separately Router.js file.

import React from 'react';

import { Scene, Router } from 'react-native-router-flux';

import PageOne from './PageOne';

import PageTwo from './PageTwo';

const RouterComponent = () => {

return (

 <Router>

  <Scene key="root" >

  <Scene key="PageOne" component={PageOne} title="PageOne" initial />

  <Scene key="PageTwo" component={PageTwo} title="PageTwo"/>

  </Scene>

 </Router>

 );

};

export default RouterComponent;

The code like this:

8. Now binding Router to Main file i.e App.js file. I clear all previous code and freshly put some code in App.js File.

import React, { Component } from 'react';

import Router from './Router';

export default class App extends Component {

render() {

        return (

            <Router />

        );

    }

}

The Above App work is completed. Now run React Native App command i.e react-native run-android.

PageOne Look like This

After Clicking On Button, You will Get the Second Page

                           PageTwo Look like This

  

Passing Data Through Input box Between the Screens

You Just need to add some code in PageOne.js file only. All the above code will remain the same.

Creating Input Box in PageOne.js file.

import React, { Component } from 'react';

import { Text, View, TextInput, TouchableOpacity } from 'react-native';

import { Actions } from 'react-native-router-flux';

export default class PageOne extends Component {

state = { text: '' };

    render() {

        return (

        <View style={styles.container}>

            <TextInput

                    style={styles.InputStyle}

                    value={this.state.text}

                    onChangeText={text => this.setState({ text })}

                    placeholder="Type Here.."

                />

        <TouchableOpacity style={styles.btnContainer} onPress={this.onPressNext.bind(this)}>

        <Text style={styles.textColor}>Send Data to Second Screen</Text>

        </TouchableOpacity>

        </View>

        );

    }

    onPressNext() {

        Actions.PageTwo({ data: this.state.text });

    }

}

const styles = {

    container: {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center',

    },

    textColor: {

        color: '#fff'

    },

    btnContainer: {

        backgroundColor: '#0abde3',

        padding: 20,

        borderRadius: 5

    },

    InputStyle: {

        width: 200,

        alignItems: 'center',

        textAlign: 'center',

        fontSize: 20,

        borderColor: '#000',

        borderWidth: 2,

        margin: 30,

    }

}

The code looks like this:

After running command react-native run-android.

The App Looks like this

Here some example, which I created Apps on React Native:

• SQL TO ElastiSearch Query
• Love Calculator
• FlashLight

Thanks For Reading !!!