CODEWITHSUNDEEP
react-nativereact-navigation
burakkesepara
burakkesepara

Reputation: 316

From left to right window animation with react-navigation?

Is there a way to implement animation that goes from left to right with navigate() function in react-navigation ?

Thanks in advance.

Upvotes: 6

Views: 6751

Answers (4)

Mohit Bisht
Mohit Bisht

Reputation: 17

animation property on RootStack Navigator takes different values

import {createNativeStackNavigator} from '@react-navigation/native-stack'

const RootStack = createNativeStackNavigator()
return (
   <RootStack.Navigator
       screenOptions={{headerShown: false, animation: 'slide_from_right'}}>
     // Your Screens Here
   </RootStack.Navigator>
)

Upvotes: 0

O.O
O.O

Reputation: 1419

I know this is old, but I also struggled to find a config that did this for only one screen at a time and ended up using react-navigation-transitions. 

import {createStackNavigator} from 'react-navigation-stack';
import {fromLeft, fromRight} from 'react-navigation-transitions';
import {ScreenA, ScreenB, ScreenC} from 'screens'; 

export const handleCustomTransition = ({scenes}) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  if (
    prevScene &&
    prevScene.route.routeName === 'ScreenA' &&
    nextScene.route.routeName === 'ScreenB'
  ) {
    return fromLeft();
  } else if (
    prevScene &&
    prevScene.route.routeName === 'ScreenA' &&
    nextScene.route.routeName === 'ScreenC'
  ) {
    return fromRight();
  }
};

const stack = createStackNavigator(
  {
    ScreenA: homeScreen,
    ScreenB: messageScreen,
    ScreenC: settingsScreen,
  },
  {
    transitionConfig: nav => handleCustomTransition(nav),
  }
);

Upvotes: 0

KahTim
KahTim

Reputation: 449

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/en/stack-navigator.html#animation-related-options

Upvotes: 2

vonovak
vonovak

Reputation: 1597

when you define your screens, you can use transitionConfig option.

const Stack = StackNavigator(
  {
    SomeScreen: { screen: ... },
  },
  {
    transitionConfig: customAnimationFunc,
  }
);
...

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

const customAnimationFunc = () => ({
  screenInterpolator: sceneProps => {
    return CardStackStyleInterpolator.forVertical(sceneProps);
  },
});

should do the job. You can of course define your own animation, or return null to disable it; check the sources for that.

Upvotes: 0

Related Questions