React Navigation: StackNavigator transition for Android

Question

I am using this library https://reactnavigation.org/docs/intro/ to build android by react-native. I can make the navigation happens on android device but how I can make the screen slide in from the right and fade in from the left. It seems that this behaviour happens on iOS device but not in Android. Is there any animation configuration for android app?

Please see below animation. This is recorded in iOS.

Answer 1

You should use transitionConfig to override default screen transitions as written on this page.

Unfortunately there is no example provided how that function works but you can find some examples in this file: \react-navigation\lib\views\CardStackStyleInterpolator.js

So your code should look like this:

 const navigator = StackNavigator(scenes, {
transitionConfig: () => ({
    screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const translateX = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [layout.initWidth, 0, 0]
        });

        const opacity = position.interpolate({
            inputRange: [
                index - 1,
                index - 0.99,
                index,
                index + 0.99,
                index + 1
            ],
            outputRange: [0, 1, 1, 0.3, 0]
        });

        return { opacity, transform: [{ translateX }] };
    }
})
});