0.0.3 • Published 7 years ago
react-native-navstack v0.0.3
react-native-navstack
High performance navigation library for React Native, based on native animations (LayoutAnimation).
iOS and Android supported.
Install
npm install --save react-native-navstack
Example
import { NavProvider, NavScreen, NavState } from 'react-native-navstack';
<NavProvider>
<NavScreen route="screen1" routeProps={{ someValue: 'cool' }} initial={true}>
<Screen1 />
</NavScreen>
<NavScreen route="screen2">
<Screen2 />
</NavScreen>
<NavScreen route="screen3">
<Screen3 />
</NavScreen>
<NavScreen route="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
Prop | Description | Default |
---|---|---|
route | Route key. Must be unique. | Required |
routeProps | Will be passed to the children as properties {...routeProps} | None |
transition | Animation transition to use | PushFromRight |
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';
let customProps = {
userId: 123,
userType: 'admin',
someOtherValue: false,
}
NavState.push('screen2', customProps, 'SlideFromRight');
//to go back you can call
NavState.pop();