The back button goes to the initial route of the stack instead of the previous screen

Viewed 525

Consider the following routes:

const App = TabNavigator({
    Home: {
        screen: HomeScreen
    },
    Settings: {
        screen: SettingsStack
    }
})


const SettingsStack = StackNavigator({
    SettingsMenu: {
        screen: SettingsMenuScreen
    },
    AccountSettings: {
        screen: AccountSettingsScreen
    }
})

HomeScreen looks like this:

function HomeScreen ({ navigation }) {
    return (
        <View>
            <Button
                title=’Go to Account Settings’
                onPress={() => navigation.navigate(‘AccountSettings’)}
            />
        </View>
    )
}

When I press the button in HomeScreen, the app navigates to AccountSettings. However, when I click the back button in the AccountSettings' header, the app navigates to SettingsMenu. I expected it to go back to Home.

What is supposed to be the correct behavior? Is there anyway I can make it go back to the screen where it was, instead of the initial route of the stack?

I've created a repo to reproduce this in GitHub: https://github.com/Sparragus/react-navigation-issue

And here's a screencast of the app: http://recordit.co/tjQxbVcgtr

0 Answers
Related