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

Question

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.

push is a function on arrays and this.props.navigator is an object. — John S
– John S, Commented Jul 14, 2016 at 16:41
@JohnS Navigator indeed has push facebook.github.io/react-native/docs/navigator.html — azium
– azium, Commented Jul 14, 2016 at 16:58
OP did you bind your _rowPressed method to the component in your constructor? — azium
– azium, Commented Jul 14, 2016 at 16:59
@JohnS As far as I know, this.props.navigator.push works on objects. — Jo Ko
– Jo Ko, Commented Jul 14, 2016 at 17:03
@azium Sorry but could you clarify on what you mean? This is what I have as my constructor: constructor(props){ super(props);} — Jo Ko
– Jo Ko, Commented Jul 14, 2016 at 17:07

Burak Karasoy · Accepted Answer · 2016-07-14 20:02:54Z

3

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

you may just need to bind the Component

edited Jul 14, 2016 at 20:02

answered Jul 14, 2016 at 18:51

Burak Karasoy

1,6902 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jo Ko Over a year ago

I tried it and no error but the method '_rowPressed*()' is somehow not being called, and I can't seem to figure out why... tried console.log inside _rowPressed() and it is not logging even though it is being called via onPress. What could be the issue?

Burak Karasoy Over a year ago

try this this._rowPressed.bind(this)

Jo Ko Over a year ago

Actually it works and calls the method and logs correctly, but now I am getting the following error: Cannot read property 'push' of undefined

Burak Karasoy Over a year ago

navigator.props.push() try this

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related