Navigation

Navigation is build upon 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:

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:

// 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

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

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;