Experimentation with Navigation

navigation.re

module Navigation = {
  type actions = {pop: unit => unit};

  [@bs.deriving abstract]
  type navigation;

  [@bs.send]
  external navigate:
    (navigation, ~routeName: string, ~params: Js.t({.})=?, unit) => unit =
    "navigate";
};

module Abstraction = {
  module type Config = {
    type route;
    let routeToJs: route => string;
  };

  module CreateNavigationAction = (C: Config) => {
    [@bs.deriving abstract]
    type jsProps = {navigation: Navigation.navigation};
    let navigateTo = (~navigation, ~to_: C.route, ()) =>
      navigation->Navigation.navigate(C.routeToJs(to_), ());
  };
};

module Impl =
  Abstraction.CreateNavigationAction({
    [@bs.deriving jsConverter]
    type route = [ | `First | `Second];
  });

First Screen

include Navigation.Impl;

module Styles = {
  open BsReactNative.Style;
  let container =
    style([flex(1.), justifyContent(Center), alignItems(Center)]);
};

let component = ReasonReact.statelessComponent("App");

let make = (~navigation, _children) => {
  ...component,
  render: _self =>
    BsReactNative.(
      <View style=Styles.container>
        <TouchableOpacity onPress={navigateTo(~navigation, ~to_=`Second)}>
          <Text value="Go to second route" />
        </TouchableOpacity>
      </View>
    ),
};

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(~navigation=jsProps->navigationGet, [||])
  );

Second Screen

include Navigation.Impl;

let component = ReasonReact.statelessComponent("FirstRoute");

let make = (~navigation, _children) => {
  ...component,
  render: _self =>
    BsReactNative.(
      <View>
        <TouchableOpacity onPress={navigateTo(~navigation, ~to_=`First)}>
          <Text value="Go to first route" />
        </TouchableOpacity>
      </View>
    ),
};

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(~navigation=jsProps->navigationGet, [||])
  );

routes.js

// @flow

import {createStackNavigator} from 'react-navigation';
import App from './lib/js/src/First.bs';
import Second from './lib/js/src/Second.bs';

export default createStackNavigator({
  First: App,
  Second: Second,
});