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

Starting from : "@react-navigation/native": "^5.5.1",

import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';


const TransitionScreenOptions = {
  ...TransitionPresets.SlideFromRightIOS, // This is where the transition happens
};

const CreditStack = createStackNavigator();

function CreditStackScreen() {
  return (
    <CreditStack.Navigator screenOptions={TransitionScreenOptions}> // Don't forget the screen options
      <CreditStack.Screen
        name="Credit"
        component={HomeScreen}
        options={headerWithLogo}
      />
      <HomeStack.Screen
        name="WorkerDetails"
        component={WorkerDetails}
        options={headerWithLogoAndBackBtn}
      />
    </CreditStack.Navigator>
  );
}

You can watch this video to understand more: https://www.youtube.com/watch?v=PvjV96CNPqM&ab_channel=UnsureProgrammer

Answer 2

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 }] };
    }
})
});