A fast, declarative navigation for React Native, based on React Navigation

Currently we are not supporting the nested navigators.

Supported navigators:

• Stack Navigator
• Switch Navigator
• Tab Navigator
• Drawer Navigator

Open a Terminal in your project's folder and run,

yarn add bs-react-navigation

After installation, you will need to install react-navigation and its peer dependencies. Please follow official installation instructions here.

• example built-in library - check /example

For all navigator you need follow some steps:

First of all, create a config file like Config.re and there define your all routes. It sould be a simple Variant Type with your routes/tabs/items

type route =
  | Home
  | UserDetails;

It is important to create a separate file in order to avoid circular dependencies when you try to import navigation dependencies.

For our components we need to create navigationProp type, which is created from a list of our routes defined in Config.re.

type navigationProp = StackNavigator.navigation(route);

Each Navigator provides their own navitationProp type.

Example:

let make = (~navigation: Config.navigationProp, _children) => {
  ...component,
  render: _self =>
    <View>
      <Button
        title="Go to home screen"
        onPress={() => navigation.push(Home)}
      />
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>,
};

Use a functor Create from StackNavigator module and pass a configuration module which needs to include a few pieces:

• route - list of your routes, use variant from your Config.re
• initialRoute - the first screen of your navigation state
• getScreen - it's a function which as a parameters get the currentRoute and navigation props. As a return, you should create a tuple where the first element is a screen component and the second is screen configuration.

If your route has a parameter you should pass them to you component inside getScreen function.

exmaple:

let getScreen = (currentRoute, navigation) =>
  switch (currentRoute) {
  | Home => (<Screen navigation />, screenOptions(~title="Home", ()))
  | UserDetails(userId) => (
      <Screen navigation text={"Browsing profile of: " ++ userId} />,
      screenOptions(~title="Hello " ++ userId, ()),
    )
  };

The API for creating navigator is almost the same as in Stack Navigator:

module Switch =
  SwitchNavigator.Create({
    open SwitchNavigator;

    type route = Config.route;

    let initialRoute = Login;

    let getScreen = (currentRoute, navigation) =>
      switch (currentRoute) {
      | Login => (<Login navigation />, screenOptions())
      | LoggedIn => (<LoggedIn navigation />, screenOptions())
      };
  });

Tab needs one additional setting compared to the Switch or Stack Navigator.

let order: list(tabs);

Full example:

module Tabs =
  TabNavigator.Create({
    open TabNavigator;

    type tabs = Config.tabs;

    let options = options(~activeTintColor="#847", ());

    let order = [Info, Profile, Settings];

    let getTab = tab => {
      switch (tab) {
      | Info => (<Tabs.Info navigation/>, screenOptions(~title="Info"))
      | Profile => (<Tabs.Profile navigation/>, screenOptions(~title="Profile"))
      | Settings => (<Tabs.Settings navigation/>, screenOptions(~title="Settings"))
      };
    };
  });

Drawer needs one additional setting compared to the Switch or Stack Navigator.

let items: list(item);

Full example:

module Drawer =
  DrawerNavigation.Create({
    open DrawerNavigation;
    type item = Config.item;

    let items = [Dashbord, Settings];

    let options = options(~width=150, ());

    let order = [Dashbord, Settings];

    let getItem = currentItem =>
      switch (currentItem) {
      | Dashbord => (<Items.Dashboard />, screenOptions(~title="Info")
      | Settings => (<Items.Settings />, screenOptions(~title="Settings")
      };
  });

This library is a continuation of our efforts to provide a first-class navigation for bs-react-native applications.

If you are coming from rebolt-navigation or reroute-native (our previous attempts at solving this problem), please open an issue and let us know. We will help you find the best migration path to adopt this library.

Inside the root folder, run BS build script:

yarn start

next, go to the example app and start the watch script for building the ReasonML code:

yarn watch

The last step is to start the Expo packager inside your example app

yarn start

See Reason license in LICENSE.txt.