Navigation between screens in React Native Android?

Question

I have used this code and its working.

But I want to do the same process by saving the page in different .js file and navigate using navigator.

Please add sample code I am new to React Native...

    var React = require('react-native');

    var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator,
      TouchableOpacity,
    } = React;

    var SCREEN_WIDTH = require('Dimensions').get('window').width;
    var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

    var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {

// Make it snap back really quickly after canceling pop

      snapVelocity: 8,

       // Make it so we can drag anywhere on the screen

      edgeHitWidth: SCREEN_WIDTH,
    });

    var CustomSceneConfig = Object.assign({}, BaseConfig, {

       // A very tighly wound spring will make this transition fast

      springTension: 100,
      springFriction: 1,

      // Use our custom gesture defined above

      gestures: {
        pop: CustomLeftToRightGesture,
      }
    });

    var PageOne = React.createClass({
      _handlePress() {
        this.props.navigator.push({id: 2,});
      },

      render() {
        return (
          <View style={[styles.container, {backgroundColor: 'green'}]}>
            <Text style={styles.welcome}>Greetings!</Text>
            <TouchableOpacity onPress={this._handlePress}>
              <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
                <Text style={styles.welcome}>Go to page two</Text>
              </View>
            </TouchableOpacity>
           </View>
        )
      },
    });

    var PageTwo = React.createClass({
      _handlePress() {
        this.props.navigator.pop();
      },

      render() {
        return (
          <View style={[styles.container, {backgroundColor: 'purple'}]}>
            <Text style={styles.welcome}>This is page two!</Text>
            <TouchableOpacity onPress={this._handlePress}>
              <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
                <Text style={styles.welcome}>Go back</Text>
              </View>
            </TouchableOpacity>
           </View>
        )
      },
    });

    var SampleApp = React.createClass({
      _renderScene(route, navigator) {
        if (route.id === 1) {
          return <PageOne navigator={navigator} />
        } else if (route.id === 2) {
          return <PageTwo navigator={navigator} />
        }
      },

      _configureScene(route) {
        return CustomSceneConfig;
      },

      render() {
        return (
          <Navigator
            initialRoute={{id: 1, }}
            renderScene={this._renderScene}
            configureScene={this._configureScene} />
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: 'white',
      },
    });

    AppRegistry.registerComponent('SampleApp', () => SampleApp);

    module.exports = SampleApp;

Answer 1

To navigate between pages, you will need 3 component (react class). One for the navigator (SampleApp here), one for pageOne and one for pageTwo. It is recommended to have one component per js file. So you need to create a file named PageOne.js, PageTwo.js and SampleApp.js. When you want to render a component stored in another file, you need to import it like this import PageOne from './path/PageOne'; The only way to access a variable from another file is by importing it, but it won't work if you don't export the variable first. Exporting a variable is basically saying to react that this block of code can be used in another file. You can export multiple variables from a file. Here is some additional info to help you understand the concept of import/export:
Import

Export

Video

Your code is perfectly fine like this. Here's what each file may look like.

SampleApp.js

var React = require('react-native');
import PageOne from './PageOne';
import PageTwo from './PageTwo';

var { 
  AppRegistry, 
  StyleSheet, 
  Text, 
  View, 
  Navigator,     
  TouchableOpacity
} = React;

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = 
  Object.assign(
    {}, 
    BaseConfig.gestures.pop, 
    { snapVelocity: 8, edgeHitWidth: SCREEN_WIDTH }
  );

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  springTension: 100,
  springFriction: 1,
  gestures: { pop: CustomLeftToRightGesture }
});


var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  _configureScene(route) {
    return CustomSceneConfig;
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

module.exports = SampleApp;

PageOne.js

var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, 
                        backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
});

// This is important because without exporting PageOne,
// you cannot import it in SampleApp.js
export default PageOne;

PageTwo.js

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go back</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
});

export default PageTwo;