nlnd-navigation v0.1.4

NLND Navigation

This is a simple view-manager for react-native that get's a group of routes and stacks and creates a view-manager which can act as the navigation system of the app.

This module does not provide any sort of UI navigation components like Tab navigations or Drawer navigations. It only provides the basic system where you can use the navigation functions to do what you want.

installation

just do

npm install nlnd-navigation

or

yarn add nlnd-navigation

Sample

This is a simple example to see how it works:

import { NlndNavigation } from "nlnd-navigation";

const stacks = {
  name: "root",
  initialStack: "homestack",
  stacks: [
    {
      name: "homestack",
      initialRoute: "home",
      routes: [{ key: "home", route: Home }, { key: "page1", route: Page1 }],
      stacks: [
        {
          name: "page2stack",
          initialRoute: "page2",
          routes: [{ key: "page2", route: Page2 }]
        },
        {
          name: "page3stack",
          initialRoute: "page3",
          routes: [{ key: "page3", route: Page3 }]
        }
      ]
    }
  ]
};

const App = () => {
  return <NlndNavigation stack={stacks} />;
};

And you can do the navigations like so:

This is an example of in-stack navigations:

<Button onPress={() => props.navigation.navigate("page1")} title="Page 1" />

To do inter-stack navigations, we provide a function that would route to your desired destination from root:

<Button
  onPress={() =>
    props.navigation.navigateFromRoot(
      ["root", "homestack", "page2stack"],
      "page2"
    )
  }
  title="Page 2"
/>

This will route from root, to homestack, to page2stack and finally to the page2 component.

Refrences

Preview

Authors

Ali Rezaee nlndipi@hotmail.com