How can I animate resetting react native navigation?

Question

I have a react native app and am using react navigation (https://reactnavigation.org).

After the user logs in, I reset the navigation stack with:

const initialNavigation = NavigationActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: Main })],
});

props.navigation.dispatch(initialNavigation);

This results in a jump from the login screen to the main screen. Is there any way to animate this so that it looks like a smooth transition? For example, fading out the login screen or sliding the screen.

I understand I could "navigate" instead of "reset" the stack to get animation, but I don't want the login screen to be on the navigation stack.

Answer 1

You might want to subscribe to these two github open issues since it seems like others are running into the same issue:

https://github.com/react-community/react-navigation/issues/1663

https://github.com/react-community/react-navigation/issues/1493