rn-simple-nav
v1.1.0
Published
react-native simple navigator, just wanted to see if I could...I was bored
Downloads
1
Maintainers
Readme
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
zoomIn
spinIn
zoomSpin
fadeIn
fromLeft
fromRight
fromBottom
fromTop
as 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
name
and ascreen
name
is a stringscreen
is 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()|