Get in Touch
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, Route,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 ( <Router history={history}> <Routes> {[ "/:key", "/", "*", ].map((path, index) => ( <Route key={index} path={path} element={<UseNavigator {...props} />} ></Route> ))} </Routes> </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

Options

<Navigator props={}>


<Navigator>

<Child props={}>

</Navigator>

Get in Touch

Let's rock the digital world together.

Fun with us! Join our newsletter