https://github.com/react-navigation/animated-switch

A switch navigator but with transitions between screens powered by the react-native-reanimated Transitions API
https://github.com/react-navigation/animated-switch

Last synced: 5 months ago
JSON representation

A switch navigator but with transitions between screens powered by the react-native-reanimated Transitions API

• Host: GitHub
• URL: https://github.com/react-navigation/animated-switch
• Owner: react-navigation
• License: mit
• Archived: true
• Created: 2019-04-06T18:22:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-24T17:36:01.000Z (almost 6 years ago)
• Last Synced: 2024-04-14T04:53:13.263Z (over 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 410 KB
• Stars: 158
• Watchers: 4
• Forks: 21
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
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](https://github.com/kmagiera/react-native-reanimated) to animate route change transitions. Aside from the animations, it is identical to the standard [switch navigator](https://reactnavigation.org/docs/en/switch-navigator.html).

## Installation

- [Install react-native-reanimated >= 1.0.0](https://github.com/kmagiera/react-native-reanimated#installation) 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

```js

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:

```js

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

import { Transition } from 'react-native-reanimated';

const MySwitch = createAnimatedSwitchNavigator(

  {

    Home: HomeScreen,

    Other: OtherScreen,

  },

  {

    transition: (

      

        

        

      

    ),

  }

);

```

If you need to customize the underlying `Transitioning.View` style, you can pass in a `transitionViewStyle` option.

```js

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](https://github.com/kmagiera/react-native-reanimated).