title: Navigation between screens in React Native Android?
body: <p>I have used this code and its <strong><em>working</em></strong>.</p>
  
  <blockquote>
    <p>But  I want to do the same process by saving the page in different .js file
    and navigate using navigator.</p>
  </blockquote>
  
  <p><strong>Please add sample code I am new to <em>React Native</em>...</strong></p>
  
  <pre><code>    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, {
  </code></pre>
  
  <p>// Make it snap back really quickly after canceling pop</p>
  
  <pre><code>      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 (
            &lt;View style={[styles.container, {backgroundColor: 'green'}]}&gt;
              &lt;Text style={styles.welcome}&gt;Greetings!&lt;/Text&gt;
              &lt;TouchableOpacity onPress={this._handlePress}&gt;
                &lt;View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}&gt;
                  &lt;Text style={styles.welcome}&gt;Go to page two&lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
             &lt;/View&gt;
          )
        },
      });
  
      var PageTwo = React.createClass({
        _handlePress() {
          this.props.navigator.pop();
        },
  
        render() {
          return (
            &lt;View style={[styles.container, {backgroundColor: 'purple'}]}&gt;
              &lt;Text style={styles.welcome}&gt;This is page two!&lt;/Text&gt;
              &lt;TouchableOpacity onPress={this._handlePress}&gt;
                &lt;View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}&gt;
                  &lt;Text style={styles.welcome}&gt;Go back&lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
             &lt;/View&gt;
          )
        },
      });
  
      var SampleApp = React.createClass({
        _renderScene(route, navigator) {
          if (route.id === 1) {
            return &lt;PageOne navigator={navigator} /&gt;
          } else if (route.id === 2) {
            return &lt;PageTwo navigator={navigator} /&gt;
          }
        },
  
        _configureScene(route) {
          return CustomSceneConfig;
        },
  
        render() {
          return (
            &lt;Navigator
              initialRoute={{id: 1, }}
              renderScene={this._renderScene}
              configureScene={this._configureScene} /&gt;
          );
        }
      });
  
      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', () =&gt; SampleApp);
  
      module.exports = SampleApp;
  </code></pre>