Skip to content

arsen/react-native-navstack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

25 Commits

Repository files navigation

react-native-navstack

High performance navigation library for React Native, based on native animations (LayoutAnimation).
iOS and Android supported.

npmDependency StatusGitHub license

Install

npm install --save react-native-navstack

Example

import{NavProvider,NavScreen,NavState}from'react-native-navstack';<NavProvider><NavScreenroute="screen1"routeProps={{someValue: 'cool'}}initial={true}><Screen1/></NavScreen><NavScreenroute="screen2"><Screen2/></NavScreen><NavScreenroute="screen3"><Screen3/></NavScreen><NavScreenroute="screen4"><Screen4/></NavScreen></NavProvider>

Supported Transitions

PushFromRight
PushFromTop
PushFromBottom
SlideFromRight
SlideFromTop
SlideFromBottom

NavScreen

All your screens must be wrapped into NavScreen component.
NavScreen has 3 public properties

PropDescriptionDefault
routeRoute key. Must be unique.Required
routePropsWill be passed to the children as properties{...routeProps}None
transitionAnimation transition to usePushFromRight

NavState reducer

NavState reducer has 2 public methods push and pop

NavState.push([ROUTE NAME], [ROUTE PROPS], [TRANSITION])
NavState.pop()

From within your components include "NavState"

import{NavState}from'react-native-navstack';letcustomProps={userId: 123,userType: 'admin',someOtherValue: false,}NavState.push('screen2',customProps,'SlideFromRight');//to go back you can callNavState.pop();

About

React Native navigation library based on native animations

Resources

License

Stars

Watchers

Forks

Packages

No packages published