mobile-navigation-controller

mobile-navigation-controller

It's manager for your pages like mobile app.

import Navigator from './mobile-navigation-controller';

In the render function return

<Navigator onRef={ref => (this.navigatorRef = ref)} >
        
        
         <MyHomePage key="home" levelPage={0} />   
          
          <AboutPage key="about" 
           levelPage={1}   
           />
      
      
 </Navigator>

Note: prop levelPage important to manage the returs (from back button) in the structure of a tree

To change page you get the ref and do:

this.navigatorRef.changePage("about");

the option to changePage it's:

this.navigatorRef.changePage(
                goToPage //Required
              ,{options}// Not requred
              );

options => { animationIn:integer // have defult , animationOut:string // have defult , timeAnimationInMS:integer // defult=250(ms) , callbackFun:function , props:{...} }

*animationIn and animationOut need name animate from https://daneden.github.io/animate.css/
*the animate.css includ in this package

Options:

Navigator props

onRef={ref => (this.navigatorRef = ref)} required
key={string} Required
height={...}
onChangePage={(nowPageKey,levelAction) => { ... }} levelAction==>> "Out"||"In"||"SameLevel"
beforChangePage={(goToPageKey,levelAction) => { ... }} levelAction==>> "Out"||"In"||"SameLevel"
homePageKey={"home"} defult==>> The key of the first child

Child props

levelPage=={integer} important
backgroundColor="..." defult==>> #fff
//backOnSwipeRight={true}defult==>> false
//alwaysLive={true}defult==>> false

Check what is page now

const nowPage= this.navigatorRef.nowPage;

Get the historyPages list

const historyPages= this.navigatorRef.historyPages();

Get the listLevelPages list

const listLevelPages= this.navigatorRef.listLevelPages();

Back 1 page history

this.navigatorRef.back();

Check if the mangerPages is busy

const navigator_busy= this.navigatorRef.busy;

*busy return boolean

Credit: Arik Wald

Credit animated: animate.css -https://daneden.github.io/animate.css/