# react-navigation-animated-switch

> Animated switch for React Navigation

Latest version **0.6.5** (published 2022-02-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-navigation-animated-switch
pnpm add react-navigation-animated-switch
yarn add react-navigation-animated-switch
bun add react-navigation-animated-switch
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.6.5 |
| Published | 2022-02-02 |
| First published | 2019-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brentvatne, satya164, osdnk |

## Links

- npm: https://www.npmjs.com/package/react-navigation-animated-switch
- npm.io page: https://npm.io/package/react-navigation-animated-switch

## Recent versions

- 0.6.5 (latest) — 2022-02-02
- 0.6.4 — 2021-02-21
- 0.6.3 — 2020-10-26
- 0.6.2 — 2020-10-02
- 0.6.1 — 2020-09-24
- 0.6.0 — 2020-06-25
- 0.5.12 — 2020-04-30
- 0.5.11 — 2020-04-22
- 0.5.10 — 2020-04-02
- 0.5.9 — 2020-03-31
- 0.5.8 — 2020-03-28
- 0.5.7 — 2020-03-27
- 0.5.6 — 2020-03-22
- 0.5.5 — 2020-03-20
- 0.5.4 — 2020-03-16
- … 14 more at https://npm.io/package/react-navigation-animated-switch/versions

## README

# 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: (
      <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.

```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).

---
_Source: https://npm.io/package/react-navigation-animated-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._