react native - change navigation direction (i.e, from right to left)

user_7386630 0
Viewed 12655

I am using react-navigation to navigate from one screen to another. By the way I am using createStackNavigator.

I am using the code below to navigate between screens.

<Button onPress={()=>this.props.navigation.navigate('ScreenTwo')}>button-></Button>

It works fine, but I want to change the animation direction. Currently when I press the button the ScreenTwo just pops up, instead I want the screen to slide from right to left.

Is the a way I could change the direction of the animation when navigating?

react-navigation react-native navigation
6 Answers
user_88236000

You need to use Custom Screen Transitions in side your navigation configurations. Try following code, (make sure to import Easing, Animated from 'react-native')

const yourStack = createStackNavigator(
  {
    One: ScreenOne,
    Two: DetailsTwo,
  },
  {
    initialRouteName: 'One',
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
                const {layout, position, scene} = sceneProps;
                const {index} = scene;

                const width = layout.initWidth;
                const translateX = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [width, 0, 0],
                });

                const opacity = position.interpolate({
                    inputRange: [index - 1, index - 0.99, index],
                    outputRange: [0, 1, 1],
                });

                return {opacity, transform: [{translateX: translateX}]};
            },
    })
  }
);
user_43081400

For version 4.x.x -

   import {
      createStackNavigator,
      CardStyleInterpolators,
    } from 'react-navigation-stack';

const CatalogStack = createStackNavigator(
  {
    Catalog: Catalog,
    ProductDetails: ProductDetails,
    EditProduct: EditProduct,
    Categories: Categories,
    SubCategories: SubCategories,
    ChooseColors: ChooseColors,
    ChooseSizes: ChooseSizes,
  },
  {
    defaultNavigationOptions: {
      headerShown: false,
      gestureEnabled: false,
      swipeEnabled: false,
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
    },
  },
);

For 5.x.x -

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

 <HomeStack.Navigator
  initialRouteName="Home"
  headerMode="none"
  screenOptions={{
    gestureEnabled: false,
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  }}>
  <HomeStack.Screen name="Home" component={Home} />

</HomeStack.Navigator>
user_84577250

For me this worked well with "react-native": "0.62.2","react-navigation": "4.4.4", "react-navigation-stack": "2.10.4",:

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

const RootStack = createStackNavigator();

function Root(props) {
  return (
    <RootStack.Navigator headerMode="none" mode="modal">
     <RootStack.Screen
        name="NextScreen"
        options={{
          gestureDirection: 'horizontal',
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
        component={NextScreenComponent}
      />
    </RootStack.Navigator>
)}
user_28558570

This worked for me:

<AppStack.Navigator headerMode="none" initialRouteName="Home">
    <AppStack.Screen
        name="LeftMenu"
        component={LeftMenu}
        options={{ gestureDirection: "horizontal-inverted" }}
    />
</AppStack.Navigator>
user_60679480 
// some import
import { Animated, Easing } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const forSlide = ({ 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
                            ],
                            extrapolate: 'clamp',
                        }),
                        inverted
                    ),
                },
            ],
        },
    };
};

const config = {
    duration: 300,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
};

const SettingsNavigation = () => (
        <Stack.Navigator screenOptions={{ tabBarVisible: false }}>
            <Stack.Screen name="Tags" component={TagsScreen} options={{ headerShown: false, transitionSpec: { open: config, close: config }, cardStyleInterpolator: forSlide}} />            
        </Stack.Navigator>
);

I found this solution on https://reactnavigation.org/docs/stack-navigator/#animations

user_107679480
Related