Quick contact
arrowRight
support-icon

Navigation Controller

It is manager for your pages like mobile app.

You can use it with any cross-platform framework. we trid it on React, on React with Cordova or on React with Electron, work good.

Simple Demo

Try simple example code

 import Navigator from "undefined";

For example: In the render function return

<Navigator onRef={(ref) => (navigatorRef = ref)} onError={(error) => {}}>
  <MyHomePage key="home" levelPage={0} />

  <AboutPage
    key="about"
    levelPage={1}
    transitionIn="fadeInRight"
    transitionOut="fadeOutLeft"
  />
</Navigator>;
Note
levelPage
important to manage the returs (from back button) in the structure of a tree

To change page you get the ref and do:

navigatorRef.changePage("about");

navigatorRef.changePage("about");

navigatorRef.changePage(
  goToPage, //Required
  { options } // Not requred
);
const options = {
  transitionIn: "fadeInRight", // have defult
  transitionOut: "fadeOutLeft", // have defult
  timeAnimationInMS: integer, // defult=250(ms)
  callbackFun: () => {},
  props: {},
};
*animationIn and animationOut need name animate from animate.style
*the animate.css includ in this package

use with react-router

import React from "react";
import Navigator from "undefined";

//import all pages
import Home from "../pages/index";
import Page2 from "../pages/page2";

// #Hooks
import { BrowserRouter, HashRouter,HashRouter,Routes, useParams } from "react-router-dom";
import { createBrowserHistory } from "history";

// ## use history
const history = createBrowserHistory();

const useRouter = (props) => {
  let Router = BrowserRouter;
  if (window.cordova.platformId !== "browser") Router = HashRouter;

  return (
 <HashRouter history={history}>
    <Routes>
      {[
        "/:key",
        "/",
        "*",
      ].map((path, index) => (
        <Route
          key={index}
          path={path}
          element={<UseNavigator {...props} />}
        ></Route>
      ))}
    </Routes>
 </HashRouter>
  );
};

const UseNavigator = (props) => {
  // # init navigator ref
  let navigatorRef = undefined;

  const { key } = useParams();
  // let query = useQuery();
  return (
    <div>
      <Navigator routeKey={key} changeRoute={false}>
        <Home key="home" levelPage={0} />
        <Page2 key="page2" levelPage={1} />
      </Navigator>
    </div>
  );
};

export default useRouter;

import React from "react";
import Navigator from "undefined";

//import all pages
import Home from "../pages/index";
import Page2 from "../pages/page2";

// #Hooks
import { BrowserRouter, HashRouter,HashRouter, useParams } from "react-router-dom";
import { createBrowserHistory } from "history";

// ## use history
const history = createBrowserHistory();

const useRouter = (props) => {
  let Router = BrowserRouter;
  if (window.cordova.platformId !== "browser") Router = HashRouter;

  return (
    <HashRouter history={history}>
      <Route path={["/:key", "/"]}>
        <UseNavigator {...props} />
      </HashRouter>
    </Router>
  );
};

const UseNavigator = (props) => {
  // # init navigator ref
  let navigatorRef = undefined;

  const { key } = useParams();
  // let query = useQuery();
  return (
    <div>
      <Navigator routeKey={key} changeRoute={false}>
        <Home key="home" levelPage={0} />
        <Page2 key="page2" levelPage={1} />
      </Navigator>
    </div>
  );
};

export default useRouter;

Check what is page now

const nowPage = navigatorRef.nowPage;

Get the historyPages list

const historyPages = navigatorRef.historyPages();

Get the listLevelPages list

const listLevelPages = navigatorRef.listLevelPages();

Back 1 page history

navigatorRef.back();

or

navigatorRef.back({options...});

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

Check if the mangerPages is busy

const navigator_busy = navigatorRef.busy;

*busy return boolean

react.cordova-navigation_controller

npm install

Options

<Navigator props={}>

key={"home"}
  • requiredrequired
  • StringString

onRef={ref => navigatorRef = ref}
  • requiredrequired
  • defultdefult:
  • FunctioncallbackFun reference: function

errorPageKey="not-found-404"
  • StringString

onError={error => ( 
  //do something 
)}
  • FunctioncallbackFun

//For android backbutton only. 
beforExit={() =>{ ( 
  // do something 
  // return false to cancel the process
  // return true to continue and exit from app
)}}
  • FunctioncallbackFun

//For android backbutton only. 
beforBack={() =>{ ( 
 // do something 
 // return false to cancel the process
 // retun true to continue the process 
)}}
  • StringcallbackFun

height={60}//px
height={"100%"}
  • defultdefult: "100%"
  • StringString

onChangePage={(nowPageKey,levelAction) => { ... }}
  • FunctionFunction

beforChangePage={(goToPageKey,levelAction) => { ... }}
  • FunctionFunction

//Determines whether to change the URL to the component key
  • defultdefult: true (on cordova native platforms => false)
  • BooleanBoolean

//The app will start on this page
  • defultdefult: The key of the first child
  • StringString

<Navigator>

<Child props={}>

</Navigator>

// important!
  • requiredrequired
  • IntInt

  • StringString

  • defultdefult: "100%"
  • StringString

//May be problematic with css "padding-left"
  • defultdefult: false
  • BooleanBoolean

  • StringString

  • StringString

  • IntInt

props={{id}}
  • ObjectObject

  • BooleanBoolean

//Don't kill the child. Life is always in the background
  • defultdefult: false
  • BooleanBoolean

Hire us

Contact us for more information

step1
step2
step3

We sent a SMS to the number:

Change number

Please confirm the code below:

callus Call Us Now
Want to work with us? This form is not for job search details.

Looking for a job?   Click here

By clicking Send you agree to the Privacy Policy

Fun with us! Join our newsletter