1.1.0 • Published 8 years ago
rn-simple-nav v1.1.0
I was bored and made a React-Navite Navigator....
- It's straight up JavaScript using the React-Native Animated API
- No Gestures...
It works as described below, It's working for me in production... 🤓 🤓 .... the stock Navigators are probably better because those BookFace Engineers are smart, but this allowed me to do something different and I have some unique scene changes.
has
zoomInspinInzoomSpinfadeInfromLeftfromRightfromBottomfromTopas scene transitions.
rn-simple-nav
npm install --save rn-simple-nav
- Access the navigator as such
import { SimpleNav } from rn-simple-nav
| Prop | Type | Description | Required |
|---|---|---|---|
| screens | array of screen objects see below for structure | the screen for the navigator to render | YES |
| header | renderable component | the optional top header to persist | no |
| footer | renderable component | optional footer to persist | no |
| onFocus | function | function called when a screen is focused, called with screen name | no |
| onBlur | function | function called when a screen's focus is removed, called with screen name | no |
Screen object
- must have a
nameand ascreen nameis a stringscreenis a renderable component- must supply at least one to start this sucker up.
{name:'ScreenOne', screen: <ScreenOne />}Methods
- What good is a Navigator if you can't navigate on it...
- Access methods as such
you may notice there is no pop method, rather than "popping" a screen, just use the push function, specify the direction, and speed that sucker up.
import { Transitions } from 'rn-simple-nav'
| method | description | arguments | example(s) |
|---|---|---|---|
| pushScreen | pushes a new screen to the top of the navigator. If the Navigator already has the screen available you can call it by name. If the navigator has no reference, you must supply it with the screen object | (direction required,screen required ,duration optional) direction can be one of fromRight fromLeft fromTop fromBottom spinIn fadeIn zoomIn zoomSpin screen can be just a string if the Navigator has it in the stack, or a screen object duration is in milliseconds and the default is 250 | Transitions.pushScreen('fromRight',{name:'ScreenTwo',screen:<ScreenTwo />}) Transitions.pushScreen('fromLeft','ScreenOne',50) |
| removeScreen | removes the screen from the stack | screen name | Transitions.removeScreen('ScreenOne') |
| removeAllBut | removes all screens but the one passed in | screen name | Transitions.removeAllBut('ScreenOne') |
| getScreens | return a list of screens the Navigator has | none | Transitions.getScreens() |
| toggleHeader | toggles the display of the header | none | Transitions.toggleHeader() |
| toggleFooter | toggles the display of the footer | none | Transitions.toggleFooter() |
Full example in the example folder
