CODEWITHSUNDEEP
react-nativereact-native-navigation
fristyr
fristyr

Reputation: 169

React Native Navigation Animation slide implementation

Is it possible to make a Navigation animation between screen like in the video ?

enter image description here

Closest behaviour can be achieved with.


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

<Stack.Screen
   key={screen.key}
   name={screen.key}
   component={screen.component}
   options={{
     headerShown: false,
     ...TransitionPresets.SlideFromRightIOS,
   }}
/>

Upvotes: 1

Views: 1646

Answers (1)

Olius
Olius

Reputation: 11

You can try that:

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

and then

<NavigationContainer>
  <Stack.Navigator
    initialRouteName={"Page1"}
    screenOptions={{ headerShown: false }}
  >
    <Stack.Screen
      name={"Page1"}
      component={Page1}
      options={{ ...SlideTransition }}
    />
    <Stack.Screen
      name={"Page2"}
      component={Page2}
      options={{ ...SlideTransition }}
    />
  </Stack.Navigator>
</NavigationContainer>

Upvotes: 1

Related Questions