Navigators
Fluid Transitions
Fluid Transitions is a library that provides Shared Element Transitions during navigation between screens using react-navigation.
A Shared Element Transition is the visualization of an element in one screen being transformed into a corresponding element in another screen during the navigation transition.
The library implements a custom navigator called FluidNavigator
that makes all this and more possible.
Links
github.com/fram-x/FluidTransitions
Libraries
react-navigation-collapsible
react-navigation-collapsible is a library and a Higher Order Component
that adjusts your navigationOptions and makes your screen header collapsible.
Since react-navigation's header is designed as Animated
component, you can animate the header by passing Animated.Value
from your ScrollView
or FlatList
to the header.
Links
github.com/benevbright/react-navigation-collapsible
react-native-screens
This project aims to expose native navigation container components to React Native and React Navigation can integrate with it since version 2.14.0. Using react-native-screens
brings several benefits, such as support for the "reachability feature" on iOS, and improved memory consumption on both platforms.
Links
github.com/software-mansion/react-native-screens
react-navigation-header-buttons
Helps you to render buttons in the navigation bar and handle the styling so you don't have to. It tries to mimic the appearance of native navbar buttons and attempts to offer a simple interface for you to interact with.
Links
github.com/vonovak/react-navigation-header-buttons
react-navigation-props-mapper
Provides simple HOCs that map react-navigation props to your screen components directly - ie. instead of const user = this.props.navigation.getParam(activeUser, null)
, you'd write const user = this.props.activeUser
.
react-native-header-scroll-view
This component implements iOS large header with grow/shrink on scroll, made by @jonsamp. Note that it doesn't handle header animation between screens, it only handles animating the header title on scroll.
To use this component, we'd want to disable the built-in header. There are 2 ways to disable the header in React Navigation:
- Disable the default header for one screen:
static navigationOptions = {
headerShown: false
};
- Disable header globally in
createStackNavigator
const Home = createStackNavigator(
{
ExampleScreen1,
ExampleScreen1,
},
{
headerMode: 'none',
}
);