CODEWITHSUNDEEP
reactjsreact-native
mohamed adel
mohamed adel

Reputation: 715

React Native back button not issue

i have this code 

      <View style={{ flexDirection: 'row' }}>
    <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
      <Image
        source={require('./image/drawer.png')}
        style={{ width: 25, height: 25, marginLeft: 5 }}
      />
    </TouchableOpacity>
  </View>

which it should go back to the previous page when I press it but i get this error enter image description here

here is a link to project snack https://snack.expo.io/@ov3rcontrol/navi

Upvotes: 0

Views: 237

Answers (1)

swimisbell
swimisbell

Reputation: 1591

Looking at your snack.expo project, it appears that in each stack navigator you have <NavigationDrawerStructure navigationProps={navigation} /> and <NavigateBack navigationProps={navigation} />; you're actually passing the navigation object to these components as a prop named navigationProps. So when you try to call this.props.navigation.goBack(), it'll rightly throw that error saying "undefined (i.e. this.props.navigation) is not an object" because it wasn't defined!

If you change this.props.navigation.goBack() to this.props.navigationProps.goBack(), you'd be calling the correct prop name. However, I'd simply recommend changing navigationProps={navigation} to navigation={navigation} so your prop names stay consistent and avoid confusion down the road while passing the navigation object.

Edit / Note: This will fix the error; it may not solve your desired navigation.

Upvotes: 1

Related Questions