React Navigation: Force screen to animate from left to right

Question

With React Navigation v6.x and using the .navigate() function, new views always animate from right to left.

Typically this is fine, but I have a couple views that I always want to load from the left.

I have tried to read the docs, code examples, and stackoverflow threads related to transitions and I cannot glean any useful information.

Can anyone can give me some pointers on this?

Cheers

Answer 1

First make this below.

 const leftToRightAnimation = {
  cardStyleInterpolator: ({ current, layouts }) => {
    return {
      cardStyle: {
        transform: [
          {
            translateX: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [-layouts.screen.width, 0],
            }),
          },
        ],
      },
    };
  },
};

Basically all it's doing is it's moving the screen from the x direction of full screen width away in left direction to fitting the screen. And implicitly progress is going from 0 to 1.

• The transform works just like any other react-native component read more here (https://reactnative.dev/docs/transforms).
• And it uses interpolate from the react-native animated (https://reactnative.dev/docs/animated)

Then put it in the screen you want the transition to apply to.

<NavigationContainer>
      <Root.Navigator headerMode="none" initialRouteName="Home">
        <Root.Screen name="Home" component={Home} />
        <Root.Screen name="NotModal" component={NotModal} options={leftToRightAnimation} />
      </Root.Navigator>
 </NavigationContainer>