Screen navigation for React Native

React Native Easy Router

Screen navigation for React Native.

Installation

npm install --save react-native-easy-router

Usage

import React from 'react'
import Router from 'react-native-easy-router'
import { Text, View } from 'react-native'

const First = ({ router }) => (
  <View style={{ backgroundColor: 'white', flex: 1 }}>
    <Text>First screen</Text>
    <Text onPress={() => router.push.Second({ name: 'John' })}>Go forward</Text>
  </View>
)

const Second = ({ router, name }) => (
  <View style={{ backgroundColor: 'pink', flex: 1 }}>
    <Text>Second screen</Text>
    <Text>Hello {name}!</Text>
    <Text onPress={() => router.pop()}>Go back</Text>
  </View>
)

const routes = { First, Second }
const App = () => <Router routes={routes} initialRoute="First" />

export default App

You can see more usage examples in examples

API

Router properties

Property	Type	Required	Description
animations	object		custom animations
routes	object	required	route components keyed by route name
initialRoute	string	required	initial route name
router	function		function to get router object
disableHardwareBack	boolean		don't use Android back button to pop (default false)
onStackChange	function		function called after navigation stack changes
onBeforeStackChange	function		function called before navigation stack changes

// Example

<Router
  routes={{ First, Second }}
  initialRoute="first"
  router={router => (this.router = router)}
  disableHardwareBack={false}
/>

Router functions

Router object can be found in route component parameters or can be got from routerRef property

Property	Type	Description
pop	function(animation)	Pops the last screen
push	object{key:function(parameters, animation)}	Object of functions to push new screen keyed by route name
replace	object{key:function(parameters, animation)}	Object of functions to replace current screen keyed by route name
reset	object{key:function(parameters, animation)}	Object of functions to reset the whole stack keyed by route name
stack	array	List of routes in stack

All functions return promises. Promise resolves when action finishes

// Example

router.pop({type:'top'}).then(() => console.log('Popped')
router.push.First({value:123}, {type:'top'}).then(() => console.log('Pushed'))
router.replace.Second({value:123}, {type:'top'}).then(() => console.log('Replaced'))
router.reset.First({value:123}, {type:'top'}).then(() => console.log('Reset'))

Router stack element

Parameter	Type	Description
id	string	Id of route
route	string	Route name
params	object	Parameters passed to screen
animation	object	Animation used to transition to this screen
pop	function	Function to pop all screens until this
replace	function	Function to replace all screens in stack after this

// Example

console.log(router.stack[0].id)
console.log(router.stack[0].route)
console.log(router.stack[0].params)

router.stack[0].pop({ type: 'bottom' }).then(() => console.log('Popped to route'))
router.stack[0].replace.Second().then(() => console.log('Replaced'))

Animations

Property	Available values
type	'none', 'bottom','left', 'left-bottom', 'left-top' 'right', 'right-bottom', 'right-top' 'top', 'fade'
duration	integer number in milliseconds
easing	easing type from here (https://github.com/oblador/react-native-animatable)

When you set animation type to none no animation is shown

// Example

router.pop({ type: 'bottom', duration: 500, easing: 'ease-in-out' })

Custom animations

Also you can pass your custom animation types to router. Where type is array consisting of:

Index	Type	Description
0	Object	Start position for in animation / end position for out animation
1	Object	Start position for out animation / end position for in animation
2	Boolean	Usage of native driver animation

// Example

const animations = { 'skew' : [{ transform: [{ skewX: '90deg' }] }, { transform: [{ skewX: '0deg' }] }, false] }
<Router animations={animations} routes={First, Second} initialRoute="First"/>

// then
router.push.Second({}, { type: 'skew' })

The only limitation for custom animations is that the out animation useNativeDriver property can't be different from the in animation useNativeDriver property

// You can't push screen with animation like this
[{ transform: [{ skewX: '90deg' }] }, { transform: [{ skewX: '0deg' }]}, false]
// and then pop with animation like that
[{ opacity: 1}] }, { opacity:0}, true]

Responding to stack changes

The onStackChange event can be used to update your application state or UI when navigation occurs. It receives a single argument, the new stack

// Example

<Router
  onStackChange={newStack => {
    // Dispatch the new navigation stack to a store
    dispatch({type: 'SET_ROUTER_STACK', payload: newStack})
  }}
/>

The onBeforeStackChange event can be used to synchronise your application UI with router transitions. It receives 3 arguments: the transition animation, the current stack and the target stack

// Example

<Router
  onBeforeStackChange={(animation, oldStack, newStack) => {
    // Assign the transition animation and screens to state
    const fromScreen = fromStack[fromStack.length - 1].route
    const toScreen = toStack[toStack.length - 1].route
    this.setState({animation, fromScreen, toScreen})
  }}
/>

GitHub