React-Native ListView onPress - undefined is not an object
<p>I seem to be stuck with calling functions on button press. No matter what method i try i get different undefined errors.</p>

<p>i'm running react native 0.24 and currently coding for Android device only.</p>

<p>please see the code below:</p>

<pre><code>class ListPage extends Component {

   constructor(props){
   super(props);
       this.nav = props.nav;
       this.route = props.route;
       this.ds = new ListView.DataSource({
          rowHasChanged: (row1, row2) =&gt; row1 !== row2,
       });
       this.state = ({
           visible: false,
           dataSource: this.ds.cloneWithRows(props.fullList),
       });
  }

  goToPage(name){
      this.nav.push({ name: name });
  }

  loadModal() {
      this.setState({ visible: true });
  }

    list(row){
        return (
             &lt;View style={styles.box}&gt;
                  &lt;TouchableNativeFeedback underlayColor="#FFF" 
                    onPress={this.goToPage.bind(this,'ShowRow')}&gt;
                      &lt;View&gt;
                          ...ShowRow Button
                      &lt;/View&gt;
                   &lt;/TouchableNativeFeedback&gt;
                   &lt;TouchableNativeFeedback
                      onPress={this.loadModal.bind(this)} &gt;
                        &lt;View style={styles.button}&gt;
                            ...Modal Button
                        &lt;/View&gt;
                   &lt;/TouchableNativeFeedback&gt;
              &lt;/View&gt;
          );
    }

    render(){
        return (
             &lt;View style={styles.container}&gt;
                &lt;Modal visible={this.state.visible}
                  onRequestClose={() =&gt; {this.setState({visible: false}) }} &gt;
                    &lt;View&gt;
                        &lt;Text&gt;I am a Modal!&lt;/Text&gt;
                    &lt;/View&gt;
                &lt;/Modal&gt;
                &lt;ListView
                  dataSource={this.state.dataSource}
                  renderRow={this.list} /&gt;
             &lt;/View&gt;
        );
    }
}
</code></pre>

<p>Whenever i press either button i get undefined is not an object error for both this.goToPage.bind and this.loadModal.bind .</p>

<p>if i try this:</p>

<pre><code>render() { //or inside list(row) function
    goToPage = function(name){
       this.nav.push etc etc
    }
    loadModal = function() { setState etc... }
    return (
        ...render stuff
    )
}
</code></pre>

<p>it now says undefined is not an object for both this.nav and this.setState</p>

<p>but if i do this:</p>

<pre><code> constructor() {
    ...
    goToPage = function(name){
        props.nav.push(...);
    }
 }
</code></pre>

<p>it works.....but i know this is not the right approach and also i can't setState for the modal. Why isn't it working with the first method? Many thanks.</p>