StackNavigation don't add screen to stack React Native

Question

I have the current flow of screens.

Home -> Info -> Log in -> Camera.

The issue is that I don't want to add Login to the stack because then when you go back from the camera you will go back to login, rather than information.

If I use this.props.navigate('Info') from the camera, then the issue is that back now goes to the camera rather than home from info. Note I also don't want to complete delete the stack at the login page as I've seen with the Reset function here (https://reactnavigation.org/docs/navigators/navigation-actions#Reset).

Ideally what I would like to do would be:

Home -> Info -> Login (Not added to stack) -> Camera.

This was I can just go back from Camera to Info and from Info to Home.

Has anyone found a nice way around this?

Thanks

Answer 1

If you want to retain the whole stack and params, only ditching the Login page, then you could use Reset Navigation Action either in the Camera page :

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: 'Home', params: this.props.navigation.state.params })
    NavigationActions.navigate({ routeName: 'Info', params: this.props.navigation.state.params })
  ]
})
this.props.navigation.dispatch(resetAction)

This way you will:

1. Navigate to Info page on top of Home page, meaning that Back button will lead to Home page.
2. Retain the params, if you need. If you don't just do not pass them.

This functionality could be added anywhere: inside the components / inside the Action Creators / inside the Back button.

Or add the same code for the Back button. In this case you need to add this to the navigationOptions of Camera route:

const backButton = ({ navigation }) => ({
        headerLeft: <TouchableOpacity
                    onPress={() => {
                    // the code from above, except for import line and using navigation.whatever instead of this.props.navigation.whatever
                    }}
                ><Text>Back</Text> // this is a text of a back button, you could also use an icon
                </TouchableOpacity>
});

Navigator:

const MyStack = StackNavigator({
  home: { screen: Home },
  info: { screen: Info },
  login: { screen: Login },
  camera: { screen: Camera }, navigationOptions: backButton });