0.6.5 • Published 2 years ago
react-navigation-animated-switch v0.6.5
react-navigation-animated-switch
This navigator uses the Reanimated Transitions API to animate route change transitions. Aside from the animations, it is identical to the standard switch navigator.
Installation
- Install react-native-reanimated >= 1.0.0 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
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:
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.
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { Transition } from 'react-native-reanimated';
const MySwitch = createAnimatedSwitchNavigator(
{
Home: HomeScreen,
Other: OtherScreen,
},
{
transitionViewStyle: { backgroundColor: 'red' },
}
);
0.6.5
2 years ago
0.6.4
3 years ago
0.6.3
4 years ago
0.6.2
4 years ago
0.6.1
4 years ago
0.6.0
4 years ago
0.5.12
4 years ago
0.5.11
4 years ago
0.5.10
4 years ago
0.5.9
4 years ago
0.5.8
4 years ago
0.5.7
4 years ago
0.5.6
4 years ago
0.5.5
4 years ago
0.5.4
4 years ago
0.5.3
4 years ago
0.5.2
4 years ago
0.5.0
4 years ago
0.5.1
4 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago