StackNavigation don't add screen to stack React Native - ios

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:
Navigate to Info page on top of Home page, meaning that Back button will lead to Home page.
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 });

Answer 2

With v6 of Navigation, CommonActions.reset might might work for you:
import { useNavigation,CommonActions } from "#react-navigation/native";
...
const navigation = useNavigation();
...
navigation.dispatch((state) => {
// We can keep all routes on the stack except that which has name "Login"
const routesWithoutLogin = state.routes.filter((r) => r.name !== "Login");
// We can then define the new route we want
const routeToAdd = {
name: "Info",
params: {},
};
const newRoutes = [...routesWithoutLogin, routeToAdd];
return CommonActions.reset({
...state,
routes: newRoutes,
index: newRoutes.length - 1,
});
});
Reference here: https://reactnavigation.org/docs/navigation-actions/#reset
When debugging, I find it quite useful to log my routes state to see what needs changing.
import { useNavigation,CommonActions } from "#react-navigation/native";
...
const navigation = useNavigation();
...
console.log(navigation.getState().routes);
It should look something like this
[{"key": "Root-YhPzpMumgvLs62ZwxjOJW", "name": "Root", "params": undefined}, {"key": "Chat-sDA1-4R0fImaxaj9maXGb", "name": "Chat", "params": {"conversation": [Object]}, "path": undefined}]
One more note, when I tried creating routes from scratch, I lost some of my redux state. It seems like a better idea to filter out routes you don't want than to make them from scratch.