Skip to content
A slide-from-right transition config for use with react navigation's stack navigator on android
JavaScript Objective-C Python Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example add an example Jul 11, 2017
static
.gitignore initial project commit Jul 11, 2017
README.md add npm badges to README Sep 15, 2017
index.js fix broken function export Jul 11, 2017
package.json

README.md

Slide From Right Transition Config for React Navigation

npm version downloads

This is a slide from right transition config ported from the codebase of react navigation to enable usage on Android.

Example App Screen Capture

Motivation

On iOS, the default transition animation for React Navigation's card stack is a slide from right animation. I had a project which required the same slide from right animation on Android, so I decided to pull out the transition config into this library. See the corresponding issue here to track any potential progress on getting a slide from right transition on Android.

Installation and Usage

  • Install this library

npm install --save react-navigation-slide-from-right-transition

  • Pass down the custom transition configuration to your react-navigation StackNavigator:
import { StackNavigator } from 'react-navigation';
import getSlideFromRightTransition from 'react-navigation-slide-from-right-transition';

/* ... your react component code here ... */

const SimpleStack = StackNavigator({
  Home: {
    screen: MyHomeScreen
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
}, {
  transitionConfig: getSlideFromRightTransition
});
  • Now your stack navigator will slide from the right when you push screens onto the stack, and slide to the left when you pop screens off of the stack on Android!

Example

Check out the example app included in the github repo to see the slide-from-right transition in action! I assume you already have the react-native-cli installed, as well as the required Android dependencies.

git clone https://github.com/Traviskn/react-navigation-slide-from-right-transition.git

cd react-navigation-slide-from-right-transition/example
npm install

Use react-native run-android to run the example.

You can’t perform that action at this time.