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.