React native TouchableHighlight on press open another screen
<p>iam new in react native and start my first project , i have a login screen and when i press into <code>TouchableHighlight</code> i need to open another screen , but the problem is i failed to make the function that move from login to second screen , this is my code </p>

<p><strong>Login.js</strong></p>

<pre><code>    import React, { Component } from 'react';
import { AppRegistry, Text,SecureView ,Button,Image,TextInput,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
require('./HygexListView.js');

class LoginView extends Component {
   constructor(props){
    super(props);


  }
  onPositive(){
    this.props.navigator.pop()

  };


    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.onPositive() }&gt;
               &lt;Text style={styles.buttonText}&gt;Login&lt;/Text&gt;
               &lt;/TouchableHighlight&gt;
                &lt;/View&gt;
            &lt;/View&gt;
        );
    }
    onPress()  {
  this.props.navigator.push({
     title: "HygexListView",
     component: HygexListView,
  });

}
}
</code></pre>

<p>and when press into TouchableHighlight i need to open this screen </p>

<p><strong>HygexListView.js</strong></p>

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

class HygexListView extends Component {

  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      &lt;View style={{flex: 1, paddingTop: 22}}&gt;
        &lt;ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) =&gt; &lt;Text&gt;{rowData}&lt;/Text&gt;}
        /&gt;
      &lt;/View&gt;
    );
  }
}
module.exports = HygexListView;
</code></pre>