React navigation "replace" the previous 2 screens instead of only 1 - react-native

Question

In react navigation, how can I replace the last two screens in a stack?
For example, if my current stack is screen1 -> screen2 -> screen3, when I call .replace('screen4') on screen3,
it becomes screen1 -> screen2 -> screen4
But I want a way so it becomes screen1 -> screen4

Answer 1

You'll need to use reset to do it:
import { CommonActions } from "#react-navigation/native";
// ...
navigation.dispatch(state => {
// Remove the last 2 routes from current list of routes
const routes = state.routes.slice(0, -2);
// Reset the state to the new state with updated list of routes
return CommonActions.reset({
...state,
index: routes.length - 1,
routes
});
});

Answer 2

TL;DR
Scroll down for solution
Long answer
I find #satya164 to be a bit confusing, because the provided piece of code will actually remove the last two screens and simply push you back, unless you go on to push another screen using navigation.push or navigation.navigate.
So the actual solution would be:
import {CommonActions, StackActions} from '#react-navigation/native';
// this removes last two screens
navigation.dispatch(state => {
const routes = state.routes.slice(0, -2);
return CommonActions.reset({
...state,
index: routes.length - 1,
routes,
});
// can also be replaced by:
// return StackActions.popToTop();
});
// and pushes a new one directly
navigation.navigate('YourNewScreen', { /* optional params */ });
But even then, at least on iOS the animation will go backwards, as if a screen is being popped (i.e: user going backwards), instead of being pushed, which isn't very intuitive, and looks a bit weird.
I found that if you want to navigate to a new stacked screen, but want to discard the rest of the stack. The best way to do that, is to navigate to the needed screen, and to discard the rest of the screens keeping the first and last one (the one being presented) after the navigation has happened. This way, yo get the desired behavior and there are no weird jumps or wrong navigations animations.
Another plus is that this way you don't care how many screens you got in between, you just take the first and last. You can then put it in a neat little generic hook:
Solution
import {CommonActions} from '#react-navigation/native';
// call this hook in the last screen of the stack (so `screen4`)
export const useResetNavigationStackEffect = (props, condition) => {
const {navigation} = props;
useEffect(() => {
if (condition) { // only reset if `true`
navigation.dispatch(state => {
const topScreen = state.routes[0];
const thisScreen = state.routes[state.routes.length - 1];
const routes = [topScreen, thisScreen];
return CommonActions.reset({
...state,
index: routes.length - 1,
routes,
});
});
}
}, [condition, navigation]);
};