Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
brentvatne Merge pull request #2 from itsjgf/master
Call animateNextTransition only when activeKey has changed
Latest commit 423e52c Apr 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
index.js refactor: remove inline condition Apr 8, 2019
package.json Only animate transition when index changes Apr 9, 2019

README.md

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>
    ),
  }
);

Learn more about the Transition API here.

You can’t perform that action at this time.