How to skip back/modify navigation

Question

I have a stackNavigation which works great. 3 screens : DeviceList / DeviceDetail / DevideAdd. The normal paths is (1) DeviceList > DeviceDetail or (2) DeviceList > DeviceAdd > DeviceDetail.

But when user use the path (2), I want that the back button of the DeviceDetail screen go to DeviceList. Or for the moment, it's going to DevideAdd.

Here is my navigation:

const DeviceStackNavigator = createStackNavigator({
    DeviceList: {
        screen: DeviceList,
    },
    DeviceDetail: {
        screen: DeviceDetail,
    },
    DeviceAdd: {
        screen: DeviceAdd,
    },
});

How to achieve it ?

Ok, did you already try this? https://stackoverflow.com/questions/49477330/modifying-back-button-with-react-navigation-on-specific-screen — Ian Vasco, Jul 12 '19 at 17:14
OK it works with custom navigation options in DeviceDetail. I got the left arrow which is going to DeviceList but I don't achieve to custom left arrow title. It is blank. Any idea ? I already try "headerBackTitle"... — MatDepInfo, Jul 13 '19 at 06:55
Ok I found it: I had to add "title={'custom title'} backTitleVisible={true}" in the headerLeft > HeaderBackButton params. Thanks. — MatDepInfo, Jul 13 '19 at 07:05

hong developer · Answer 1 · 2019-07-12T17:33:16.927

The key attribute 'goBack()' is a dynamically generated string that is created each time you navigate to a new 'react-navigation' path.

So if you want to go from DeviceDetail to DeviceList, what you have to do is to pass the key of DeviceAdd down to DeviceDetail, and then call goBack() with the key.

DeviceAdd.js

render() {
    const { state, navigate } = this.props.navigation;    

    return (
        <View>
            <Button title="Go to DeviceDetail" onPress={ () => {
                navigate('DeviceDetail', { go_back_key: state.key });
            }} />
        </View>
    );
}

DeviceDetail.js

render() {
    const { state, goBack } = this.props.navigation;    
    const params = state.params || {};

    return (
        <View>
            <Button title="Back to DeviceList" onPress={ () => {
                goBack(params.go_back_key);
            }} />
        </View>
    );
}

How to skip back/modify navigation

1 Answers1