> For the complete documentation index, see [llms.txt](https://dormakaba-digital.gitbook.io/reactnative-client/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dormakaba-digital.gitbook.io/reactnative-client/concerns/navigation.md).

# Navigation

Navigation is build upon [react-navigation](https://github.com/react-navigation/react-navigation). Consider reading their documentation for further details.

## Navigator

The navigator enables usage of navigation actions outside of the page scope.\
\
To get it to work you will have to pass the most outer navigation component (root navigator) to it like:

```jsx
import { Navigator } from '@dormakaba/digital-reactnative-client';

// router provides any of SwitchNavigator, StackNavigator, ...
import Router from './Router';

<Router
  ref={navigatorRef => {
    Navigator.setContainer(navigatorRef);
  }}
/>
```

Now you can use any navigation function of:

```javascript
// get current route
Navigator.getCurrentRoute();

// get current route name
Navigator.getCurrentRouteName();

// navigate
Navigator.navigate(routeName, params);
Navigator.navigateDeep([{ routeName, params }, { routeName, params }]);
Navigator.back()
Navigator.reset(routeName, params);
```

## Drawer Component

To be used as contentComponent of a DrawerNavigator

```jsx
import React from 'react';
import { Drawer, NavButton, Navigator } from '@dormakaba/digital-reactnative-client';

export function AppDrawer() {
  return (
    <Drawer
      user={{
        name: 'Jan Mühlemann',
        pictureUrl: 'https://avatars2.githubusercontent.com/u/977772',
      }}
      gotoDashboard={() => {
        Navigator.navigate('Dashboard');
      }}
      gotoAccount={() => {
        Navigator.navigate('UserProfile');
      }}
      gotoAccountText="Open Userprofile"
      handleLogout={() => {
        Navigator.navigate('Login');
      }}
      handleLogoutText="Logout"
    >
      <NavButton route="dashboard" label="dashboard" />
    </Drawer>
  );
}

```

## Utils

### getStackOptions

Creates the needed stack options (shows hamburger menu icon on root page which opens the drawer).

Full sample of a Router.js

```jsx
import React from 'react';
import {
  createSwitchNavigator,
  createDrawerNavigator,
  createStackNavigator,
} from 'react-navigation';
import { colors } from '@dormakaba/digital-reactnative-visual';
import { StatusBar } from 'react-native';
import { getStackOptions } from '@dormakaba/digital-reactnative-client';

import { AppDrawer } from './Drawer';
import { Login, Dashboard, UserProfile } from './components/pages';

StatusBar.setBarStyle('light-content');
StatusBar.setBackgroundColor(colors.blue);

const Drawer = {
  DashboardStack: {
    name: 'DashboardStack',
    screen: createStackNavigator(
      {
        Dashboard: {
          screen: Dashboard,
        },
      },
      getStackOptions('Dashboard')
    ),
  },
  UserProfileStack: {
    name: 'UserProfileStack',
    screen: createStackNavigator(
      {
        UserProfile: {
          screen: UserProfile,
        },
      },
      getStackOptions('UserProfile')
    ),
  },
  // ...
};

const RootNavigator = createSwitchNavigator(
  {
    Login: { name: 'Login', screen: Login },
    OwnerApp: {
      name: 'OwnerApp',
      screen: createDrawerNavigator(Drawer, {
        drawerPosition: 'left',
        contentComponent: AppDrawer,
      }),
    },
  },
  {
    headerMode: 'none',
    navigationOptions: {
      gesturesEnabled: false,
    },
  }
);

export default RootNavigator;

```