CODEWITHSUNDEEP
javascriptiosreact-nativereactjs
Jo Ko
Jo Ko

Reputation: 7575

Why am I getting 'Cannot read property 'push' of undefined' (React Native)?

In my index.ios.js, I have the following:

  renderScene(route, navigator){
    return <route.component navigator={navigator} {...route.passProps}/>
  }

and

render() {
    return (
      <Navigator
        initialRoute={{name: 'FirstPage', component: FirstPage}}
        renderScene={this.renderScene}
      />
    );
  }

then in my FirstPage.js, to navigate to the SecondPage.js: 

  _navigate(){
    this.props.navigator.replace({
      component: SecondPage,
      name: 'SecondPage'
    })
  }

Then in my SecondPage.js, it just renders the component in a . And in my ThirdPage.js:

  _rowPressed(){
    this.props.navigator.push({
      component: FourthPage,
      name: 'FourthPage',
    })
  }


  <TouchableHighlight
    onPress={() => this._rowPressed()}
  >
     <View>
          <Text>Go to FourthPage</Text>
     </View>
  </TouchableHighlight>

Then in my FourthPage.js, I simply have: 

  <View style={styles.container}>
    This is FourthPage.js
  </View>

I am getting the error from the ThirdPage.js, which says:

Cannot read property 'push' of undefined in _rowPressed()

and I cannot seem to figure out why, because the this.props.navigator.push worked fine for both .replace and .push, but now I am getting this error. Any guidance or insight would be appreciated. Thank you in advance.

Upvotes: 4

Views: 1832

Answers (1)

Burak Karasoy
Burak Karasoy

Reputation: 1690

<TouchableHighlight
    onPress={this._rowPressed.bind(this)}//add this
  >
     <View>
          <Text>Go to FourthPage</Text>
     </View>
  </TouchableHighlight>

you may just need to bind the Component

Upvotes: 3

Related Questions