react-navigation-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-switch with 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' },
  }
);

Learn more about the Transition API here.