Add Stack.ScreenWithCallback to support render callback (via children prop) (#32)

* changed prop from component to componentOrRenderCallback

* correct screenprops type

* create seperate modules for component and rendercallback

Author: a-c-sreedhar-reddy

src/Example.bs.js

@@ -72,19 +72,24 @@ var MainStackScreen_Header = include.Header;
 
 var MainStackScreen_stack = include.stack;
 
+var MainStackScreen_ScreenWithCallback = include.ScreenWithCallback;
+
 var MainStackScreen = {
   StakeParams: StakeParams,
   Navigation: MainStackScreen_Navigation,
   HeaderTitle: MainStackScreen_HeaderTitle,
   Header: MainStackScreen_Header,
   stack: MainStackScreen_stack,
+  ScreenWithCallback: MainStackScreen_ScreenWithCallback,
   $$Screen: $$Screen,
   $$Navigator: $$Navigator,
   make: Example$MainStackScreen
 };
 
 var include$1 = Stack$ReactNavigation.Make({ });
 
+var ScreenWithCallback = include$1.ScreenWithCallback;
+
 var $$Screen$1 = include$1.$$Screen;
 
 var $$Navigator$1 = include$1.$$Navigator;
@@ -98,9 +103,14 @@ function Example$RootStackScreen(Props) {
                   }, React.createElement($$Screen$1.make, {
                         name: "Main",
                         component: Example$MainStackScreen
-                      }), React.createElement($$Screen$1.make, {
+                      }), React.createElement(ScreenWithCallback.make, {
                         name: "MyModal",
-                        component: Example$ModalScreen
+                        children: (function (param) {
+                            return React.createElement(Example$ModalScreen, {
+                                        navigation: param.navigation,
+                                        route: param.route
+                                      });
+                          })
                       }))
             });
 }
@@ -118,6 +128,7 @@ var RootStackScreen = {
   HeaderTitle: RootStackScreen_HeaderTitle,
   Header: RootStackScreen_Header,
   stack: RootStackScreen_stack,
+  ScreenWithCallback: ScreenWithCallback,
   $$Screen: $$Screen$1,
   $$Navigator: $$Navigator$1,
   make: Example$RootStackScreen

src/Example.re

@@ -59,7 +59,9 @@ module RootStackScreen = {
     <Native.NavigationContainer>
       <Navigator mode=`modal headerMode=`none>
         <Screen name="Main" component=MainStackScreen.make />
-        <Screen name="MyModal" component=ModalScreen.make />
+        <ScreenWithCallback name="MyModal">
+          {({navigation, route}) => <ModalScreen navigation route />}
+        </ScreenWithCallback>
       </Navigator>
     </Native.NavigationContainer>;
 };

src/Stack.bs.js

@@ -40,18 +40,23 @@ function Make(M) {
   };
   var stack = Stack.createStackNavigator();
   var make = stack.Screen;
-  var $$Screen = {
+  var ScreenWithCallback = {
     make: make
   };
-  var make$1 = stack.Navigator;
-  var $$Navigator = {
+  var make$1 = stack.Screen;
+  var $$Screen = {
     make: make$1
   };
+  var make$2 = stack.Navigator;
+  var $$Navigator = {
+    make: make$2
+  };
   return {
           Navigation: Navigation,
           HeaderTitle: HeaderTitle,
           Header: Header,
           stack: stack,
+          ScreenWithCallback: ScreenWithCallback,
           $$Screen: $$Screen,
           $$Navigator: $$Navigator
         };

src/Stack.re

@@ -89,8 +89,7 @@ module TransitionSpec = {
   };
   [@bs.obj]
   external spring:
-    (~animation: [@bs.string] [ | `spring], ~config: springConfig) => t =
-    "";
+    (~animation: [@bs.string] [ | `spring], ~config: springConfig) => t;
 
   type timingConfig = {
     duration: int,
@@ -99,8 +98,7 @@ module TransitionSpec = {
 
   [@bs.obj]
   external timing:
-    (~animation: [@bs.string] [ | `timing], ~config: timingConfig) => t =
-    "";
+    (~animation: [@bs.string] [ | `timing], ~config: timingConfig) => t;
 };
 
 type transitionSpec = {
@@ -136,8 +134,7 @@ module Make = (M: {type params;}) => {
   type gestureResponseDistance;
   [@bs.obj]
   external gestureResponseDistance:
-    (~vertical: float=?, ~horizontal: float=?, unit) => gestureResponseDistance =
-    "";
+    (~vertical: float=?, ~horizontal: float=?, unit) => gestureResponseDistance;
 
   module HeaderTitle = {
     type t;
@@ -251,8 +248,7 @@ module Make = (M: {type params;}) => {
       ~headerStyleInterpolator: stackHeaderStyleInterpolator=?,
       unit
     ) =>
-    options =
-    "";
+    options;
   type optionsProps = {
     navigation,
     route,
@@ -266,17 +262,23 @@ module Make = (M: {type params;}) => {
     headerMode: option(string),
     keyboardHandlingEnabled: option(bool),
   };
-
+  type renderCallbackProp = {
+    navigation,
+    route,
+  };
   type screenProps('params) = {
     name: string,
     options: option(optionCallback),
     initialParams: option('params),
     component:
-      React.component({
-        .
-        "navigation": navigation,
-        "route": route,
-      }),
+      option(
+        React.component({
+          .
+          "navigation": navigation,
+          "route": route,
+        }),
+      ),
+    children: option(renderCallbackProp => React.element),
   };
 
   [@bs.module "@react-navigation/stack"]
@@ -290,7 +292,19 @@ module Make = (M: {type params;}) => {
     "createStackNavigator";
 
   let stack = make();
-
+  module ScreenWithCallback = {
+    [@bs.obj]
+    external makeProps:
+      (
+        ~name: string,
+        ~options: optionCallback=?,
+        ~initialParams: M.params=?,
+        ~children: renderCallbackProp => React.element,
+        unit
+      ) =>
+      screenProps(M.params);
+    let make = stack##"Screen";
+  };
   module Screen = {
     type componentProps = {navigation};
     [@bs.obj]
@@ -306,8 +320,8 @@ module Make = (M: {type params;}) => {
                     }),
         unit
       ) =>
-      screenProps(M.params) =
-      "";
+      screenProps(M.params);
+
     let make = stack##"Screen";
   };
 
@@ -323,8 +337,7 @@ module Make = (M: {type params;}) => {
         ~children: React.element,
         unit
       ) =>
-      navigatorProps =
-      "";
+      navigatorProps;
 
     let make = stack##"Navigator";
   };