ScreenWithCallback for tabs navigators (#34)

Author: Freddy03h

src/BottomTabs.bs.js

@@ -14,14 +14,19 @@ function Make(M) {
   var $$Screen = {
     make: make
   };
-  var make$1 = bottomTabs.Navigator;
-  var $$Navigator = {
+  var make$1 = bottomTabs.Screen;
+  var ScreenWithCallback = {
     make: make$1
   };
+  var make$2 = bottomTabs.Navigator;
+  var $$Navigator = {
+    make: make$2
+  };
   return {
           Navigation: Navigation,
           bottomTabs: bottomTabs,
           $$Screen: $$Screen,
+          ScreenWithCallback: ScreenWithCallback,
           $$Navigator: $$Navigator
         };
 }

src/BottomTabs.re

@@ -16,6 +16,7 @@ module BottomTabNavigationProp = (M: {
 };
 
 module Make = (M: {type params;}) => {
+  type nonrec route = route(M.params);
   module Navigation =
     BottomTabNavigationProp({
       include M;
@@ -55,9 +56,9 @@ module Make = (M: {type params;}) => {
 
   type accessibilityRole = string;
   type accessibilityStates = array(string);
-  type routeArgs = {route: route(M.params)};
+  type routeArgs = {route};
   type renderIconArgs = {
-    route: route(M.params),
+    route,
     focused: bool,
     tintColor: string,
     horizontal: bool,
@@ -98,8 +99,7 @@ module Make = (M: {type params;}) => {
       ~style: ReactNative.Style.t=?,
       unit
     ) =>
-    bottomTabBarOptions =
-    "";
+    bottomTabBarOptions;
 
   type tabBarLabelArgs = {
     focused: bool,
@@ -123,27 +123,50 @@ module Make = (M: {type params;}) => {
       ~tabBarButtonComponent: React.element=?,
       unit
     ) =>
-    options =
-    "";
+    options;
 
   type optionsProps = {
     navigation,
-    route: route(M.params),
+    route,
   };
 
   type optionsCallback = optionsProps => options;
 
-  type navigatorProps;
+  type navigatorProps = {
+    initialRouteName: option(string),
+    screenOptions: option(optionsCallback),
+    _lazy: option(bool),
+    tabBar: option(React.component(Js.t(bottomTabBarProps))),
+    tabBarOptions: option(bottomTabBarOptions),
+  };
+
+  type renderCallbackProp = {
+    navigation,
+    route,
+  };
 
-  type screenProps;
+  type screenProps('params) = {
+    name: string,
+    options: option(optionsCallback),
+    initialParams: option('params),
+    component:
+      option(
+        React.component({
+          .
+          "navigation": navigation,
+          "route": route,
+        }),
+      ),
+    children: option(renderCallbackProp => React.element),
+  };
 
   [@bs.module "@react-navigation/bottom-tabs"]
   external make:
     unit =>
     {
       .
       "Navigator": navigatorProps => React.element,
-      "Screen": screenProps => React.element,
+      "Screen": screenProps(M.params) => React.element,
     } =
     "createBottomTabNavigator";
 
@@ -159,12 +182,25 @@ module Make = (M: {type params;}) => {
         ~component: React.component({
                       .
                       "navigation": navigation,
-                      "route": route(M.params),
+                      "route": route,
                     }),
         unit
       ) =>
-      screenProps =
-      "";
+      screenProps(M.params);
+    let make = bottomTabs##"Screen";
+  };
+
+  module ScreenWithCallback = {
+    [@bs.obj]
+    external makeProps:
+      (
+        ~name: string,
+        ~options: optionsCallback=?,
+        ~initialParams: M.params=?,
+        ~children: renderCallbackProp => React.element,
+        unit
+      ) =>
+      screenProps(M.params);
     let make = bottomTabs##"Screen";
   };
 
@@ -180,8 +216,7 @@ module Make = (M: {type params;}) => {
         ~tabBarOptions: bottomTabBarOptions=?,
         unit
       ) =>
-      navigatorProps =
-      "";
+      navigatorProps;
 
     let make = bottomTabs##"Navigator";
   };

src/MaterialBottomTabs.bs.js

@@ -28,20 +28,25 @@ function Make(M) {
     number: number,
     string: string
   };
-  var stack = MaterialBottomTabs.createMaterialBottomTabNavigator();
-  var make = stack.Screen;
+  var materialBottomTabs = MaterialBottomTabs.createMaterialBottomTabNavigator();
+  var make = materialBottomTabs.Screen;
   var $$Screen = {
     make: make
   };
-  var make$1 = stack.Navigator;
-  var $$Navigator = {
+  var make$1 = materialBottomTabs.Screen;
+  var ScreenWithCallback = {
     make: make$1
   };
+  var make$2 = materialBottomTabs.Navigator;
+  var $$Navigator = {
+    make: make$2
+  };
   return {
           Navigation: Navigation,
           TabBarBadge: TabBarBadge,
-          stack: stack,
+          materialBottomTabs: materialBottomTabs,
           $$Screen: $$Screen,
+          ScreenWithCallback: ScreenWithCallback,
           $$Navigator: $$Navigator
         };
 }

src/MaterialBottomTabs.re

@@ -20,6 +20,7 @@ module MaterialBottomTabNavigationProp = (M: {
 };
 
 module Make = (M: {type params;}) => {
+  type nonrec route = route(M.params);
   module Navigation =
     MaterialBottomTabNavigationProp({
       include M;
@@ -30,7 +31,7 @@ module Make = (M: {type params;}) => {
 
   type scene = {
     .
-    "route": route(M.params),
+    "route": route,
     "focused": bool,
     "tintColor": string,
   };
@@ -63,31 +64,57 @@ module Make = (M: {type params;}) => {
       ~tabBarTestID: string=?,
       unit
     ) =>
-    options =
-    "";
+    options;
 
   type optionsProps = {
     navigation,
-    route: route(M.params),
+    route,
   };
 
   type optionsCallback = optionsProps => options;
 
-  type navigatorProps;
+  type navigatorProps = {
+    initialRouteName: option(string),
+    screenOptions: option(optionsCallback),
+    backBehavior: option(string),
+    shifting: option(bool),
+    labeled: option(bool),
+    activeColor: option(string),
+    inactiveColor: option(string),
+    barStyle: option(ReactNative.Style.t),
+  };
+
+  type renderCallbackProp = {
+    navigation,
+    route,
+  };
 
-  type screenProps;
+  type screenProps('params) = {
+    name: string,
+    options: option(optionsCallback),
+    initialParams: option('params),
+    component:
+      option(
+        React.component({
+          .
+          "navigation": navigation,
+          "route": route,
+        }),
+      ),
+    children: option(renderCallbackProp => React.element),
+  };
 
   [@bs.module "@react-navigation/material-bottom-tabs"]
   external make:
     unit =>
     {
       .
       "Navigator": navigatorProps => React.element,
-      "Screen": screenProps => React.element,
+      "Screen": screenProps(M.params) => React.element,
     } =
     "createMaterialBottomTabNavigator";
 
-  let stack = make();
+  let materialBottomTabs = make();
 
   module Screen = {
     [@bs.obj]
@@ -99,9 +126,22 @@ module Make = (M: {type params;}) => {
         ~component: React.component({. "navigation": navigation}),
         unit
       ) =>
-      screenProps =
-      "";
-    let make = stack##"Screen";
+      screenProps(M.params);
+    let make = materialBottomTabs##"Screen";
+  };
+
+  module ScreenWithCallback = {
+    [@bs.obj]
+    external makeProps:
+      (
+        ~name: string,
+        ~options: optionsCallback=?,
+        ~initialParams: M.params=?,
+        ~children: renderCallbackProp => React.element,
+        unit
+      ) =>
+      screenProps(M.params);
+    let make = materialBottomTabs##"Screen";
   };
 
   module Navigator = {
@@ -126,9 +166,8 @@ module Make = (M: {type params;}) => {
         //TODO: More? https://github.com/callstack/react-native-paper/blob/bd4296116d841ed355f3dbebb40cfbc3b87a79ff/src/components/BottomNavigation.tsx#L132-L196
         unit
       ) =>
-      navigatorProps =
-      "";
+      navigatorProps;
 
-    let make = stack##"Navigator";
+    let make = materialBottomTabs##"Navigator";
   };
 };

src/MaterialTopTabs.bs.js

@@ -9,19 +9,24 @@ function Make(M) {
   var M$1 = { };
   var include = Core$ReactNavigation.NavigationScreenProp(M$1);
   var Navigation = include;
-  var stack = MaterialTopTabs.createMaterialTopTabNavigator();
-  var make = stack.Screen;
+  var materialTopTabs = MaterialTopTabs.createMaterialTopTabNavigator();
+  var make = materialTopTabs.Screen;
   var $$Screen = {
     make: make
   };
-  var make$1 = stack.Navigator;
-  var $$Navigator = {
+  var make$1 = materialTopTabs.Screen;
+  var ScreenWithCallback = {
     make: make$1
   };
+  var make$2 = materialTopTabs.Navigator;
+  var $$Navigator = {
+    make: make$2
+  };
   return {
           Navigation: Navigation,
-          stack: stack,
+          materialTopTabs: materialTopTabs,
           $$Screen: $$Screen,
+          ScreenWithCallback: ScreenWithCallback,
           $$Navigator: $$Navigator
         };
 }