Skip to main content
Version: 4.x

createAnimatedSwitchNavigator

A SwitchNavigator with animation support.

To use this navigator, you need to install react-native-reanimated >= 1.0.0. If you have a managed Expo project, you need to use >= SDK 33 to have the correct version of Reanimated.

API Definition

import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';

createAnimatedSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

RouteConfigs

The route configs are identical to createSwitchNavigator

SwitchNavigatorConfig

The switch navigator configs are identical to createSwitchNavigator.

By default, the transition between screens is a cross-fade. You can customize the transition with an additional option transition:

import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { Transition } from 'react-native-reanimated';

const MySwitch = createAnimatedSwitchNavigator(
{
Home: HomeScreen,
Other: OtherScreen,
},
{
// The previous screen will slide to the bottom while the next screen will fade in
transition: (
<Transition.Together>
<Transition.Out
type="slide-bottom"
durationMs={400}
interpolation="easeIn"
/>
<Transition.In type="fade" durationMs={500} />
</Transition.Together>
),
}
);

Since the transition are possible thanks to the Transition API from react-native-reanimated, you can learn more about it here.