From dc033e9f23629651d3a4e02edd64506f835aae2a Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Sat, 6 Apr 2019 20:21:59 +0200 Subject: [PATCH] Initial commit --- packages/animated-switch/README.md | 44 +++++++++++++++++++++++++++ packages/animated-switch/package.json | 2 +- 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 packages/animated-switch/README.md diff --git a/packages/animated-switch/README.md b/packages/animated-switch/README.md new file mode 100644 index 00000000..0f39bbd4 --- /dev/null +++ b/packages/animated-switch/README.md @@ -0,0 +1,44 @@ +# react-navigation-animated-switch-navigator + +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-navigator` with your favorite JS package manager. + +## Usage + +```js +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 { Transition } from 'react-native-reanimated'; + +const MySwitch = createAnimatedSwitchNavigator( + { + Home: HomeScreen, + Other: OtherScreen, + }, + { + transition: ( + + + + + ), + } +); +``` + +[Learn more about the `Transition` API here](https://github.com/kmagiera/react-native-reanimated). diff --git a/packages/animated-switch/package.json b/packages/animated-switch/package.json index a2c7d94e..eb98d698 100644 --- a/packages/animated-switch/package.json +++ b/packages/animated-switch/package.json @@ -1,6 +1,6 @@ { "name": "react-navigation-animated-switch-navigator", - "version": "1.0.0", + "version": "0.1.0", "description": "", "main": "index.js", "author": "",