This package has been moved to https://github.com/react-navigation/react-navigation/tree/4.x/packages/animated-switch
react-navigation-animated-switch
This navigator uses the Reanimated Transitions API to animate route change transitions. Aside from the animations, it is identical to the standard switch navigator.
Installation
- Install react-native-reanimated >= 1.0.0 if you have not already (the alpha version will not work!). If you have a managed Expo project, you need to use >= SDK 33 to have the correct version of Reanimated.
- Install
react-navigation-animated-switchwith your favorite JS package manager.
Usage
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
const MySwitch = createAnimatedSwitchNavigator({
Home: HomeScreen,
Other: OtherScreen,
});Ta da! When you change between routes the screens will cross-fade with each other. You can customize the transition using the transition prop:
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { Transition } from 'react-native-reanimated';
const MySwitch = createAnimatedSwitchNavigator(
{
Home: HomeScreen,
Other: OtherScreen,
},
{
transition: (
<Transition.Together>
<Transition.Out
type="slide-bottom"
durationMs={400}
interpolation="easeIn"
/>
<Transition.In type="fade" durationMs={500} />
</Transition.Together>
),
}
);If you need to customize the underlying Transitioning.View style, you can pass in a transitionViewStyle option.
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { Transition } from 'react-native-reanimated';
const MySwitch = createAnimatedSwitchNavigator(
{
Home: HomeScreen,
Other: OtherScreen,
},
{
transitionViewStyle: { backgroundColor: 'red' },
}
);