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

Question

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?

Solution 1

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}]};
            },
    })
  }
);

Solution 2

Answered by satya164 in react-navigation/stack github repo, using gestureDirection: 'horizontal-inverted' in defaultNavigationOptions/navigationOptions

Screen: {
  screen: Screen,
  navigationOptions: {
    ...TransitionPresets.SlideFromRightIOS,
    gestureDirection: 'horizontal-inverted',
  },
},

related links below:

https://github.com/react-navigation/stack/issues/377#issuecomment-578504696

https://reactnavigation.org/docs/stack-navigator/#animation-related-options

Solution 3

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>
)}

Solution 4

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>

Solution 5

This worked for me:

<AppStack.Navigator headerMode="none" initialRouteName="Home">
    <AppStack.Screen
        name="LeftMenu"
        component={LeftMenu}
        options={{ gestureDirection: "horizontal-inverted" }}
    />
</AppStack.Navigator>

View more solutions

Comments

[Blue Bot]

is there really no simple way to just set slide from left/right?? what if I need same navigation to use different direction animation in different places? hate react native navigation really.. its horrible - sorry... needed to get it out.. guess your answer is the best one considering all things - thanks

[Mahdi]

how did you handle the swipe gestures ??