Skip to main content
Version: 2.7.0 (current)

Create Navigations

Navigations are the relations between chosen screens.

Create Navigation for specific screens​

  • To create a navigation between two or more screens, simply run:
rnhc create -n <navigation-type> <screen-name-1> <screen-name-2> ...

  • The <navigation-type> can be either of these types: stack, native-stack, drawer, bottom-tabs, material-bottom-tabs or material-top-tabs.

  • The number of given screens should be 2 or more.

  • If one of the screens does not exist, rnhc will try to create the navigation.* file that resides next to the existed screens.

  • If all screens does not exist, rhnc will prompt you the following:

None of these screens exist

Example​

rnhc create -n stack screen-1 screen-2
  • This will create a navigation.* file next to screen-1 and screen-2 screens as the following:
src/
└── screens
    ├── navigation.jsx
    ├── screen-1
    │   ├── __tests__
    │   │   └── index.spec.jsx
    │   ├── functions
    │   │   └── index.js
    │   ├── index.jsx
    │   └── styles.js
    └── screen-2
        ├── __tests__
        │   └── index.spec.jsx
        ├── functions
        │   └── index.js
        ├── index.jsx
        └── styles.js
  • The content for the navigation.* file is as the following:
import Screen1Screen from "./screen-1";
import Screen2Screen from "./screen-2";
import { createStackNavigator } from "@react-navigation/stack";
const { Navigator, Screen } = createStackNavigator();


const routes = [
  {
    name: "screen-1",
    component: Screen1Screen,
  },
  {
    name: "screen-2",
    component: Screen2Screen,
  },
];

const Navigation = () => {
  return (
    <Navigator>
      {routes.map(({ name, component }) => (
        <Screen key={name} name={name} component={component} />
      ))}
    </Navigator>
  );
};
export default Navigation;

Create Navigation for specific screens in a specific folder​

  • To create a navigation file for screens that resides in a specific path under the src/screens/ folder, you can run this:
rnhc create -n <navigation-type> <screen-name-1> <screen-name-2> ... -f <folder-path>
  • This will create the navigation.* file under the src/screens/<folder-path>/ folder for the screens that resides in the same location.

Example​

rhnc create -n drawer screen-1 screen-2 -f foo/bar
  • This will create navigation.* file under src/screens/foo/bar/ folder which contains the following:
import Screen1Screen from "./screen-1";
import Screen2Screen from "./screen-2";
import { createStackNavigator } from "@react-navigation/stack";
const { Navigator, Screen } = createStackNavigator();


const routes = [
  {
    name: "screen-1",
    component: Screen1Screen,
  },
  {
    name: "screen-2",
    component: Screen2Screen,
  },
];

const Navigation = () => {
  return (
    <Navigator>
      {routes.map(({ name, component }) => (
        <Screen key={name} name={name} component={component} />
      ))}
    </Navigator>
  );
};
export default Navigation;

Create Navigation that depends on other navigations​

  • To create a navigation that depends on another navigation you can run the same command as this:
rnhc create -n <navigation-type> <screen-name-1> <screen-name-2> ... <another-navigation-folder>
  • This will create navigation.* file that resides in the same location for the given inputs.

Example​

In this example, we have the following structure:

src/
└── screens
    ├── folder
    │   ├── navigation.jsx
    │   ├── screen-one
    │   │   ├── __tests__
    │   │   │   └── index.spec.jsx
    │   │   ├── functions
    │   │   │   └── index.js
    │   │   ├── index.jsx
    │   │   └── styles.js
    │   └── screen-two
    │       ├── __tests__
    │       │   └── index.spec.jsx
    │       ├── functions
    │       │   └── index.js
    │       ├── index.jsx
    │       └── styles.js
    └── screen-three
        ├── __tests__
        │   └── index.spec.jsx
        ├── functions
        │   └── index.js
        ├── index.jsx
        └── styles.js

Where we have a drawer navigation between screen-one and screen-two under the folder folder. And we want to create a stack navigation between folder and screen-three. And to show that rnhc will continue to run for the existed screens we added in the command line screen-four which does not exist as the following:

rnhc create -n stack folder screen-three screen-four
  • The command will output the following:
src/screens/screen-four/ does not exist
src/screens/navigation.jsx created
  • And it will add a new navigation.* that resides between folder and screen-three as the following:
src/
└── screens
    ├── folder
    │   ├── navigation.jsx
    │   ├── screen-one
    │   │   ├── __tests__
    │   │   │   └── index.spec.jsx
    │   │   ├── functions
    │   │   │   └── index.js
    │   │   ├── index.jsx
    │   │   └── styles.js
    │   └── screen-two
    │       ├── __tests__
    │       │   └── index.spec.jsx
    │       ├── functions
    │       │   └── index.js
    │       ├── index.jsx
    │       └── styles.js
    ├── navigation.jsx
    └── screen-three
        ├── __tests__
        │   └── index.spec.jsx
        ├── functions
        │   └── index.js
        ├── index.jsx
        └── styles.js
  • And the content of the new navigation.* file will be like this:
import FolderNavigation from "./folder/navigation";
import ScreenThreeScreen from "./screen-three";
import { createStackNavigator } from "@react-navigation/stack";
const { Navigator, Screen } = createStackNavigator();


const routes = [
  {
    name: "folder",
    component: FolderNavigation,
  },
  {
    name: "screen-three",
    component: ScreenThreeScreen,
  },
];

const Navigation = () => {
  return (
    <Navigator>
      {routes.map(({ name, component }) => (
        <Screen key={name} name={name} component={component} />
      ))}
    </Navigator>
  );
};
export default Navigation;

Create Navigation for all screens​

  • To create a navigation file for multiple screens that resides at the root of the src/screens/ folder, you can run this:
rnhc create -n <navigation-type>
  • This will create the navigation file for all existed screens in the src/screens/ folder.

You can also run this command to create a navigation file for multiple screens that resides in a specific path under the src/screens/ folder:

rnhc create -n <navigation-type> -f <folder-path>

  • This will create the navigation file for all existed screens in the src/screens/<folder-path>/ folder.

  • This also work for the nested navigations.

  • All the sub folders should contain the navigation files so it can be added to the navigation file you want to create, for example take this structure:

src/
└── screens
    ├── folder
    │   ├── screen-one
    │   │   ├── __tests__
    │   │   │   └── index.spec.jsx
    │   │   ├── functions
    │   │   │   └── index.js
    │   │   ├── index.jsx
    │   │   └── styles.js
    │   └── screen-two
    │       ├── __tests__
    │       │   └── index.spec.jsx
    │       ├── functions
    │       │   └── index.js
    │       ├── index.jsx
    │       └── styles.js
    ├── navigation.jsx
    ├── screen-four
    │   ├── __tests__
    │   │   └── index.spec.jsx
    │   ├── functions
    │   │   └── index.js
    │   ├── index.jsx
    │   └── styles.js
    └── screen-three
        ├── __tests__
        │   └── index.spec.jsx
        ├── functions
        │   └── index.js
        ├── index.jsx
        └── styles.js

When you try to create a navigation like this:

rnhc create -n stack

It will output the following:

./src/screens/folder/navigation.jsx does not exist
./src/screens/navigation.jsx created

And the ./src/screens/navigation.* file will only contain screen-three and screen-four because the src/screens/folder does not contain a navigation file.

So if you want to create a navigation file for all existed screens in the src/screens/ folder, you must take in consideration that all subfolders must contain a navigation file first and then you can either update the navigation file or create a new one.

By updating it means overwriting in other words, so you can just do this:

rnhc create -n stack -o