Add to your project yarn add bambang-ap/react-navigation-transition-effect#1.0.0
Import
import * as TransitionEffect from 'react-navigation-transition-effect';
// TransitionEffect.fromLeft()
// TransitionEffect.fromRight(1000)
or you can extract as you need
import {fromLeft, fromRight} from 'react-navigation-transition-effect';
these method are called in react-navigation
options
<RootStack.Navigator screenOptions={fromLeft()}>
// Your screen here
</RootStack.Navigator>
<RootStack.Navigator screenOptions={{
// other config options
...fromLeft(),
}}>
// Your screen here
</RootStack.Navigator>
or you can set each screen
<RootStack.Navigator>
<RootStack.Screen
name="Login"
component={App}
options={fromLeft()}
/>
<RootStack.Screen
name="App"
component={App}
options={fromRight()}
/>
</RootStack.Navigator>
<RootStack.Navigator>
<RootStack.Screen
name="Login"
component={App}
options={{
// other config options
...fromLeft()
}}
/>
<RootStack.Screen
name="App"
component={App}
options={{
// other config options
...fromRight()
}}
/>
</RootStack.Navigator>