adding some tab navigator experiments + tab navigator nested support experiment

Author: vnovick

example/src/DrawerExample.re

@@ -9,10 +9,8 @@ module Drawer =
     let drawerOptions =
       DrawerNavigation.drawerOptions(~activeTintColor="#847", ());
 
-    let order = [Dashbord, Settings];
-
-    let getItem = tab =>
-      switch (tab) {
+    let getItem = drawerItem =>
+      switch (drawerItem) {
       | Dashbord => (
           "Dashbord",
           (() => <Items.Dashboard />),

example/src/StackExample.re

@@ -35,7 +35,7 @@ module Stack =
           <Screen navigation text={"Browsing profile of: " ++ userId} />,
           screenOptions(~title="Hello " ++ userId, ()),
         )
-      | TabExample => (<TabExample />, screenOptions())
+      | TabExample => (<TabExample navigation/>, screenOptions())
       };
   });
 

example/src/TabExample.re

@@ -13,25 +13,30 @@ module Tabs =
 
     let order = [Info, Profile, Settings];
 
-    let getTab = tab => {
+    let getTab = (tab, navigationProp) => {
       switch (tab) {
       | Info => (
           "Info",
-          ((navigation) => <Tabs.Info navigation/>),
+          (() => <Tabs.Info navigation={navigationProp}/>),
           TabNavigator.screenOptions(~title="Info", ()),
         )
       | Profile => (
           "Profile",
-          ((navigation) => <Tabs.Profile navigation/>),
+          (() => <Tabs.Profile navigation={navigationProp}/>),
           TabNavigator.screenOptions(~title="Profile", ()),
         )
       | Settings => (
           "Settings",
-          ((navigation) => <Tabs.Settings navigation/>),
+          (() => <Tabs.Settings navigation={navigationProp}/>),
           TabNavigator.screenOptions(~title="Settings", ()),
         )
       };
     };
   });
 
-let make = Tabs.make
+let render = Tabs.make;
+
+let make = (~navigation, _children) => {
+  ...(ReasonReact.statelessComponent("TabExample")),
+  render: _ => ReasonReact.createElement(render,[||])
+}

src/ReactNavigation.re

@@ -1,22 +1,22 @@
 module Core = {
   [@bs.module "@react-navigation/core"]
-  external stackRouter: ('a, 'b) => ReasonReact.reactElement = "StackRouter";
+  external stackRouter: ('a, 'b) => ReasonReact.reactClass = "StackRouter";
 
   [@bs.module "@react-navigation/core"]
-  external switchRouter: ('a, 'b) => ReasonReact.reactElement = "SwitchRouter";
+  external switchRouter: ('a, 'b) => ReasonReact.reactClass = "SwitchRouter";
 
   [@bs.module "@react-navigation/core"]
-  external createNavigator: ('a, 'b, 'c) => ReasonReact.reactElement = "";
+  external createNavigator: ('a, 'b, 'c) => ReasonReact.reactClass = "";
 };
 
 module Native = {
   [@bs.module "@react-navigation/native"]
-  external createAppContainer: 'a => ReasonReact.reactElement = "";
+  external createAppContainer: 'a => ReasonReact.reactClass = "";
 };
 
 module Stack = {
   [@bs.module "react-navigation-stack"]
-  external stackView: ReasonReact.reactElement = "StackView";
+  external stackView: ReasonReact.reactClass = "StackView";
 };
 
 module Tab = {
@@ -29,11 +29,11 @@ module Tab = {
 
 module Switch = {
   [@bs.module "@react-navigation/core"]
-  external switchView: ReasonReact.reactElement = "SwitchView";
+  external switchView: ReasonReact.reactClass = "SwitchView";
 };
 
 module Drawer = {
   [@bs.module "react-navigation-drawer"]
-  external create: ('a, 'b) => ReasonReact.reactElement =
+  external create: ('a, 'b) => ReasonReact.reactClass =
     "createDrawerNavigator";
 };

src/TabNavigator.re

@@ -59,7 +59,7 @@ module type TabConfig = {
   let containerName: string;
   let tabBarOptions: tabBarOptions;
   let getTab:
-    tabs => (Js.Dict.key, navigation => ReasonReact.reactElement, screenOptions);
+    (tabs,navigation) => (Js.Dict.key, unit => ReasonReact.reactElement, screenOptions);
 };
 
 module Create = (Config: TabConfig) => {
@@ -70,14 +70,27 @@ module Create = (Config: TabConfig) => {
 
   [@bs.deriving abstract]
   type routeConfig = {
-    screen: navigation => ReasonReact.reactElement,
+    screen: unit => ReasonReact.reactElement,
     navigationOptions: screenOptions,
   };
 
+  module NavigationProp = {
+
+    [@bs.send] external navigate: (string) => unit = "navigate";
+
+
+    [@bs.send] external goBack: (unit) => unit = "goBack";
+  };
+
+  let makeNavigationProp = () => {
+      navigate: routeName => NavigationProp.navigate(routeName),
+      goBack: () => NavigationProp.goBack(),
+    };
+
   let tabs =
     Config.order
     |> List.map(tab => {
-         let (tabname, screen, screenOptionsConfig) = Config.getTab(tab);
+         let (tabname, screen, screenOptionsConfig) = Config.getTab(tab, makeNavigationProp());
          (
            tabname,
            routeConfig(~screen, ~navigationOptions=screenOptionsConfig),
@@ -93,19 +106,7 @@ module Create = (Config: TabConfig) => {
 
   let navigator = ReactNavigation.Tab.createBottomTabNavigator(tabs, tabBarOptions)
 
-  let navigatorElement = ReasonReact.createElement(navigator, [||])
-
-  module Container = {
-    let component = ReasonReact.statelessComponent(Config.containerName);
-
-    let make = (_children) => {
-      ...component,
-      render: _self => navigatorElement
-    };
-  };
-  
-
-  let make = Container.make
+  let make = ReactNavigation.Native.createAppContainer(navigator)
 
 };