0.0.1 • Published 3 years ago
react-navigation-transition-slide-over v0.0.1
react-navigation-transition-slide-over
This package provides a transition preset for use with React Navigation. The transition aims to mimic the current (November - 2020) transition effect used in Twitter's android mobile app.
Usage
To use import the desired transition preset from react-navigation-transition-slide-over
and spread the contents of it into the desired react-navigation
Screen's options
prop.
import { slideOverFromRightPreset } from 'react-navigation-transition-slide-over';
// ...
<Stack.Screen
name="Home"
component={Home}
options={{
title: 'Home',
...slideOverFromRightPreset,
}}
/>;
You can also spread the preset into a Navigator's screenOptions
prop in order to apply the transition to all child Screens.
import { slideOverFromRightPreset } from 'react-navigation-transition-slide-over';
// ...
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
...slideOverFromRightPreset,
}}
mode="modal"
>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>;
In addition to the various spreadable transition presets, react-navigation-transition-slide-over
also makes the interpolators and transition specs directly available incase you wish to replace one or the other.
import { slideOverTransitionSpec, } from 'react-navigation-transition-slide-over';
// ...
<Stack.Screen
name="Home"
component={Home}
options={{
title: 'Home',
transitionSpec: {
open: slideOverTransitionSpec,
close: slideOverTransitionSpec,
},
cardStyleInterpolator: slideOverFromRightInterpolator,
}}
/>;
Transitions
slideOverFromRightInterpolator
- New screen slides in from the right.
0.0.1
3 years ago