React-native onpress into touchable open another model
<p>i have this model into <code>react native</code> that name <strong>LoginView.js</strong> </p>

<pre><code>    "use strict";
     import React, { Component } from 'react';
    import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';


    class LoginView extends Component {

        render() {
            return (
                &lt;View style={styles.container}&gt;
                    &lt;Text style={styles.title}&gt;
                        HYGEX
                    &lt;/Text&gt;
                    &lt;View&gt;
                        &lt;TextInput
                            placeholder="Username"
                            style={styles.formInput}
                             /&gt;
                        &lt;TextInput
                            placeholder="Password"
                            secureTextEntry={true}
                            style={styles.formInput1}
                             /&gt;

                    &lt;TouchableHighlight style={styles.button}
                    onPress={() =&gt; this.move()}&gt;
                    &lt;Text style={styles.buttonText}&gt;Login&lt;/Text&gt;
                   &lt;/TouchableHighlight&gt;

                    &lt;/View&gt;
                &lt;/View&gt;
            );
        }

      move() {
          //here !!
        }
      }

var styles = StyleSheet.create({
    container: {
        padding: 30,
        marginTop: 65,
        alignItems: "stretch"
    },
    title: {
        fontSize: 18,
        marginBottom: 10
    },
    formInput: {
        height: 36,
        padding: 10,
        marginRight: 5,
        marginBottom: 5,
        marginTop: 5,
        flex: 1,
        fontSize: 18,
        borderWidth: 1,
        borderColor: "#555555",
        borderRadius: 8,
        color: "#555555"
    },
    button: {
        height: 36,
        flex: 1,
        backgroundColor: "#555555",
        borderColor: "#555555",
        borderWidth: 1,
        borderRadius: 8,
        marginTop: 10,
        justifyContent: "center"
    },
    buttonText: {
        fontSize: 18,
        color: "#ffffff",
        alignSelf: "center"
    },
});

module.exports = LoginView;
</code></pre>

<p>in this module i have method called <code>move</code>, when click into <code>touchable</code> move must open this module that name <strong>test.js</strong> </p>

<pre><code>    import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      &lt;Text&gt;Hello world!&lt;/Text&gt;
    );
  }
}
</code></pre>

<p>i need this method in project its very important for me , if any one can tell me how to do this please !! </p>

<p>Note : iam beginner into react-native :) </p>

<p><strong>Edit</strong> </p>

<p>i tried this code 
login.js</p>

<pre><code>  "use strict";
     import React, { Component } from 'react';
    import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';


    class LoginView extends Component {

        render() {
            return (
                &lt;View style={styles.container}&gt;
                    &lt;Text style={styles.title}&gt;
                        HYGEX
                    &lt;/Text&gt;
                    &lt;View&gt;
                        &lt;TextInput
                            placeholder="Username"
                            style={styles.formInput}
                             /&gt;
                        &lt;TextInput
                            placeholder="Password"
                            secureTextEntry={true}
                            style={styles.formInput1}
                             /&gt;

                    &lt;TouchableHighlight style={styles.button}
                    onPress={() =&gt; this.OnBUttonPress()}&gt;
                    &lt;Text style={styles.buttonText}&gt;Login&lt;/Text&gt;
                   &lt;/TouchableHighlight&gt;
                    &lt;/View&gt;
                &lt;/View&gt;
            );
        }
 OnBUttonPress = () =&gt; {
      this.props.navigator.push({
        id: 'test'
      })
  }
    }

var styles = StyleSheet.create({
    container: {
        padding: 30,
        marginTop: 65,
        alignItems: "stretch"
    },
    title: {
        fontSize: 18,
        marginBottom: 10
    },
    formInput: {
        height: 36,
        padding: 10,
        marginRight: 5,
        marginBottom: 5,
        marginTop: 5,
        flex: 1,
        fontSize: 18,
        borderWidth: 1,
        borderColor: "#555555",
        borderRadius: 8,
        color: "#555555"
    },
    button: {
        height: 36,
        flex: 1,
        backgroundColor: "#555555",
        borderColor: "#555555",
        borderWidth: 1,
        borderRadius: 8,
        marginTop: 10,
        justifyContent: "center"
    },
    buttonText: {
        fontSize: 18,
        color: "#ffffff",
        alignSelf: "center"
    },
});

module.exports = LoginView;

AppRegistry.registerComponent('AwesomeProject', () =&gt; LoginView);
</code></pre>

<p>and this test.js</p>

<pre><code>import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
} from 'react-native';

export default class WelcomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '&lt;Your welcome in Second Screen&gt;',
      textBack: '&lt;Tap to Go Back to First Screen&gt;'
    }
  }
  OnBUttonPress = () =&gt; {
      this.props.navigator.push({
        id: 'WelcomeScreen'
      })
  }

  render = () =&gt; {
    return (
        &lt;View&gt;
            &lt;Text&gt;{this.state.text}&lt;/Text&gt;
            &lt;TouchableHighlight onPress={this.OnBUttonPress}&gt;
              &lt;Text&gt;{this.state.textBack}&lt;/Text&gt;
            &lt;/TouchableHighlight&gt;
       &lt;/View&gt;
    );
  }
}
</code></pre>

<p>i got this error 
<strong>undefined is not an object (evaluating'_this.props.navigator.push)</strong></p>