add Container support

Author: vnovick

example/src/App.re

@@ -1,7 +1,7 @@
 let stack = StackExample.render;
-let tab = TabExample.render;
+/* let tab = TabExample.render; */
 let drawer = DrawerExample.render;
 
 let switchNavigator = SwitchExample.render;
 
-let app = drawer;
+let app = stack;

example/src/StackExample.re

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

example/src/TabExample.re

@@ -6,6 +6,8 @@ module Tabs =
     type tabs = Config.tabs;
     type order = list(tabs);
 
+    let containerName="TabExample";
+
     let tabBarOptions =
       TabNavigator.tabBarOptions(~activeTintColor="#847", ());
 
@@ -32,9 +34,4 @@ module Tabs =
     };
   });
 
-let render = Tabs.render;
-
-let make = (~navigation, _children) => {
-  ...(ReasonReact.statelessComponent("TabExample")),
-  render: _ => Tabs.render
-}
+let make = Tabs.make

package.json

@@ -34,8 +34,6 @@
     "react-navigation": "^3.0.5",
     "react-navigation-drawer": "^1.0.5",
     "react-navigation-stack": "^1.0.5",
-    "@react-navigation/core": "^3.0.1",
-    "@react-navigation/native": "^3.0.3",
     "react-navigation-tabs": "1.0.1",
     "reason-react": "^0.5.3"
   },

src/ReactNavigation.re

@@ -21,10 +21,10 @@ module Stack = {
 
 module Tab = {
   [@bs.module "react-navigation-tabs"]
-  external createBottomTabNavigator: ('a, 'b) => ReasonReact.reactElement = "";
+  external createBottomTabNavigator: ('a, 'b) => ReasonReact.reactClass = "";
 
   [@bs.module "react-navigation-tabs"]
-  external createMaterialTopTabNavigator: 'a => ReasonReact.reactElement = ""
+  external createMaterialTopTabNavigator: 'a => ReasonReact.reactClass = ""
 };
 
 module Switch = {

src/TabNavigator.re

@@ -56,12 +56,14 @@ module type TabConfig = {
   type tabs;
   type order = list(tabs);
   let order: order;
+  let containerName: string;
   let tabBarOptions: tabBarOptions;
   let getTab:
     tabs => (Js.Dict.key, navigation => ReasonReact.reactElement, screenOptions);
 };
 
 module Create = (Config: TabConfig) => {
+  
   [@bs.deriving abstract]
   type navigatorConfig = {initialRouteName: string};
 
@@ -89,10 +91,21 @@ module Create = (Config: TabConfig) => {
     "tabBarOptions": Config.tabBarOptions,
   };
 
-  /* navigator */
-  let navigator =
-    ReactNavigation.Tab.createBottomTabNavigator(tabs, tabBarOptions);
+  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
+  
+};
 
-  /* Wrap StackNavigator with the AppContainer - temporary */
-  let render = ReactNavigation.Native.createAppContainer(navigator);
-};