React Native Easy Router is an easy-to-use and performant screen navigation library for React Native
If this project has helped you out, please support us with a star 🌟
npm install --save react-native-easy-router
## or
yarn add react-native-easy-router
import { AppRegistry, Text, View } from 'react-native'
import { name } from './app.json'
import React from 'react'
import Navigator from 'react-native-easy-router'
const First = ({ navigator }) => (
<View
style={{ alignItems: 'center', backgroundColor: 'white', flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text>First screen</Text>
<Text onPress={() => navigator.push('Second', { name: 'John' })}>Go forward</Text>
</View>
)
const Second = ({ navigator, name }) => (
<View
style={{ alignItems: 'center', backgroundColor: 'pink', flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text>Second screen</Text>
<Text>Hello {name}!</Text>
<Text onPress={() => navigator.pop()}>Go back</Text>
</View>
)
const Application = () => <Navigator screens={{ First, Second }} initialStack='First' />
AppRegistry.registerComponent(name, () => Application)
You can look at example for better understanding
Screen components keyed by screen name
Example:
<Navigator screens={{ Welcome: ({navigator}) => <View><Text>Welcome</Text></View> }}/>
Initial stack can be a first screen name, an array of screen names or even array of screen objects that are are returned from navigator.stack
or onStackUpdate
.
Examples:
<Navigator initialStack='First'/>
or
<Navigator initialStack={['First', 'Second']}/>
or
<Navigator initialStack={[{screen: 'First', props: {name: 'John'}, transitionProps: {animation: 'left'}}]}/>
Callback that is called when stack updates
Example:
<Navigator onStackUpdate={(stack, previousStack) => console.log(stack, previousStack)}/>
Default value: navigator => navigator.pop()
Function that is called when user presses back button on Android or makes swipe back on IOS.
If you return false
from this function on Android app will be minimized.
Example:
<Navigator backHandler={navigator => navigator.pop()}/>
Callback that is called on navigator initialization with navigator
reference so you can manage your navigator from the outside.
Example:
<Navigator navigatorRef={ref => (this.navigator = ref)}/>
Custom animations that you can use for transitions. Because navigator uses native transitions you can use only 'transform' animations. You can use this animation with any navigator
method.
Example:
import { Dimensions } from 'react-native'
const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
<Navigator animations={{
bottomRight: {
start: { transform: [{ translateX: windowWidth }, { translateY: windowHeight }] },
end: { transform: [{ translateX: 0 }, { translateY: 0 }] }
}
}}/>
Navigator passes navigator
object to every screen. With this object you can manage your screens. Also you can get this object with navigatorRef
.
Pushes new screen to the stack. Returns Promise
that is resolved after transition finishes.
Example:
// Stack before: First
navigator.push('Second', {email: 'john@gmail.com'}, {animation: 'bottom'})
// Stack after: First, Second
Pops last screen from the stack. If transitionProps
are not provided uses those transitionProps that this screen was pushed with. Returns Promise
that is resolved after transition finishes.
Example:
// Stack before: First, Second
navigator.pop({animation: 'left'})
// Stack after: First
Resets the whole stack to a new screen. Returns Promise
that is resolved after transition finishes.
Example:
// Stack before: First, Second
navigator.reset('Third', {name: 'John'}, {animation: 'fade'})
// Stack after: Third
Returns the stack
Example:
// Stack before: First, Second
console.log(navigator.stack) // [{id: 'some-id', screen: 'First', props: {name: 'John'}, transitionProps: {animation: 'left', duration: 500, easing: 'ease-in-out'}}]
Pops all screens after the certain screen. If transitionProps
are not provided uses those transitionProps that this screen was pushed with. Returns Promise
that is resolved after transition finishes.
Example:
// Stack before: First, Second, Third, Fourth
navigator.popTo(navigator.stack[1].id)
// Stack after: First, Second
Resets the stack after the certain screen. Returns Promise
that is resolved after transition finishes.
Example:
// Stack before: First, Second, Third, Fourth
navigator.resetFrom(navigator.stack[1].id, 'Fifth', {age: 18})
// Stack after: First, Second, Fifth
If you want to handle Android hardware back press and IOS swipe back on the certain screen you can use this methods. If you return false
from callback function on Android app will be minimized.
Example:
componentDidMount = () => {
this.props.navigator.registerBackHandler(this.onBack)
}
componentWillUnmount = () => {
this.props.navigator.unregisterBackHandler()
}
onBack = navigator => navigator.pop()
Default value: 'right'
One of default animations: right
, left
, top
, bottom
, none
, fade
. Or one of custom animations provided to navigator by animations
property.
Default value: 250
Duration of transition in milliseconds. Not applied to none
animation.
Default value: 'ease-in-out'
One of easings from this table. Not applied to none
animation.