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
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.
transform works just like any other react-native component read more here (https://reactnative.dev/docs/transforms).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>
Set options
animation: 'slide_from_right'
https://reactnavigation.org/docs/native-stack-navigator/#options