Revision history [back]

Yes, @react-navigation/native-stack allows you to create a sliding animation from left for Stack Screen on iOS. This can be achieved by setting the transition property of the Stack.Screen component to a custom animation function like slideFromLeft. Here is an example:

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

const Stack = createStackNavigator();

function slideFromLeft(transitionProps, prevTransitionProps) {
  return {
    cardStyleInterpolator: ({ current, next, inverted, layouts: { screen } }) => {
      const progress = Animated.add(
        current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
          extrapolate: 'clamp',
        }),
        next
          ? next.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [0, 1],
              extrapolate: 'clamp',
            })
          : 0
      );

      return {
        cardStyle: {
          transform: [
            {
              translateX: Animated.multiply(
                progress.interpolate({
                  inputRange: [0, 1, 2],
                  outputRange: [
                    screen.width, // Focused, but offscreen in the beginning
                    0, // Fully focused
                    screen.width * -0.3, // Fully unfocused
                  ],
                }),
                inverted
              ),
            },
          ],
        },
      };
    },
  };
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={{ ...TransitionPresets.SlideFromRightIOS, ...slideFromLeft() }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

In this example, we have created a custom animation function called slideFromLeft that uses the cardStyleInterpolator to create a sliding animation from left for the stack screen. We have then added this animation function to the options property of the Stack.Screen component for the Details screen along with the TransitionPresets.SlideFromRightIOS animation to create a more seamless transition.