Awesome Open Source
Awesome Open Source

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.

Alternatives To React Navigation Slide From Right Transition
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,089,895
Reactjs (166,672
Animation (17,672
Stack (16,047
Slides (13,454
Navigation (8,842
Transition (6,103
React Navigation (837