NavigationExperimental replace scene with animation - animation

Question

Its way to replace last scene in stack with newone? Like new scene is pushed with animation and older is silently poped from stack when push animation end. NavigationExperimental StateUtils replaceAt and replaceAtIndex only change scene on top without animation.

Answer 1

There is no utility function in NavigationStateUtils that does this for you but what you have to do is push and then at the very end of the navigation transition animation you do a reset with all the routes except the route before the newest one.
Since you're using NavigationCardStack, you have to do the reset on the component that you're pushing using InteractionManager because NavigationCardStack does not have a callback prop to call when the transition is finished.
Here's an example:
// Navigation reducer
function routeReducer(
navigationState = {
routes: [],
index: 0,
},
action,
) {
switch (action.type) {
case 'replaceWithPushAnimation':
// Pass a `reset` flag to your component so it knows to `resetWithoutRoute`
return NavigationStateUtils.push(navigationState, action.route);
case 'resetWithoutRoute':
return NavigationStateUtils.reset(
navigationState,
[
// Copy of all the routes except for navigationState.routes[length - 2]
]);
default:
return navigationState;
}
}
// The component that you pushed
class PushedComponent extends React.Component {
componentDidMount() {
if (this.props.shouldResetWithoutPrevious) {
// This runs after the navigation transition is over
InteractionManager.runAfterInteractions(() => {
// This function calls the reducer to trigger the
// routes reset
this.props.onNavigate({
type: 'resetWithoutRoute',
});
});
}
}
// render() {}
}
If you don't like this approach, you can use NavigationTransitioner, which has a onTransitionEnd callback prop to do the reset, however, because it's a lower-level API, you have to implement the navigation transitions yourself.