React-native-navigation: goBack() doesn't work

user_6294509 0
Viewed 33423

I use React Navigation with Redux in React Native. Navigation is working fine, but on one screen the goBack() function doesn't work. Can you tell we why?

This is the header config:

static navigationOptions = {
        header: ({ state, goBack }) => {
            return {
                title: state.params.name,
                right: (<Button
                    title={'Done'}
                    onPress={() => goBack()}
                />)

            }
        }
    }

This is the dispatched event:

enter image description here

No Screen is poped off. The Screen on the device stays the same.

react-navigation react-redux react-native reactjs
9 Answers

Try <Button onPress={() => this.props.navigation.goBack(null)}>

when null is used as input parameter it will bring you to the last page(immediate history) and it helps in situations where nested StackNavigators to go back on a parent navigator when the child navigator already has only one item in the stack.

They may change in future because according to their documentation there are planning to change it.

For more information check here .

user_38837070

GoBack is a bit flaky, excplicitly dispatching the action worked for me.

import { NavigationActions } from 'react-navigation';

this.props.navigation.dispatch(NavigationActions.back())
user_21154940

Here is a solution for this.

this is my working code :-

static navigationOptions = ({navigation, screenProps}) => {
     return {
         title:'SECOND',
         headerStyle:{ backgroundColor: '#ffffff'},
         headerTitleStyle:{fontSize:12},
         headerLeft:<TouchableOpacity onPress={()=>navigation.goBack()}>
                      <Image source={{uri:'back_btn'}} style={{height: 20, width: 20,marginLeft:10,}}/>
                  </TouchableOpacity>
     }
  }
user_57272620

Using the StackActions API is what broke the navigation in my app. By navigating to a screen with only the (simpler and more reliable) NavigationActions API, the back button worked.

user_3262420

react-navigation

<TouchableOpacity onPress={()=>{ this.props.navigation.goback() }}>
 <Text>Back</Text>
</TouchableOpacity>

react-native-router-flux

<TouchableOpacity onPress={() => { Actions.pop() }}>
 <Text>Back</Text>
</TouchableOpacity>
user_90717740
Related