Improve Drawer

src/Drawer.bs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var Interop = require("./Interop");
 var Core$ReactNavigation = require("./Core.bs.js");
 var Drawer = require("@react-navigation/drawer");
 
@@ -9,22 +10,57 @@ function Make(M) {
   var M$1 = {};
   var include = Core$ReactNavigation.NavigationScreenProp(M$1);
   var Navigation = include;
+  var t = function (prim) {
+    return Interop.identity(prim.VAL);
+  };
+  var string = function (s) {
+    return Interop.identity(s);
+  };
+  var render = function (x) {
+    return Interop.identity(x);
+  };
+  var HeaderTitle = {
+    t: t,
+    string: string,
+    render: render
+  };
+  var t$1 = function (prim) {
+    return Interop.identity(prim.VAL);
+  };
+  var string$1 = function (s) {
+    return Interop.identity(s);
+  };
+  var render$1 = function (x) {
+    return Interop.identity(x);
+  };
+  var DrawerLabel = {
+    t: t$1,
+    string: string$1,
+    render: render$1
+  };
   var stack = Drawer.createDrawerNavigator();
   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.Group;
-  var Group = {
+  var make$2 = stack.Navigator;
+  var $$Navigator = {
     make: make$2
   };
+  var make$3 = stack.Group;
+  var Group = {
+    make: make$3
+  };
   return {
           Navigation: Navigation,
+          HeaderTitle: HeaderTitle,
+          DrawerLabel: DrawerLabel,
           stack: stack,
+          ScreenWithCallback: ScreenWithCallback,
           $$Screen: $$Screen,
           $$Navigator: $$Navigator,
           Group: Group
@@ -33,4 +69,4 @@ function Make(M) {
 
 exports.DrawerNavigationProp = DrawerNavigationProp;
 exports.Make = Make;
-/* @react-navigation/drawer Not a pure module */
+/* ./Interop Not a pure module */

src/Drawer.res

@@ -2,6 +2,8 @@ open Core
 
 type options
 
+type layoutChangeEvent
+
 module DrawerNavigationProp = (
   M: {
     type params
@@ -27,32 +29,69 @@ module Make = (
     type options = options
   })
 
+  module HeaderTitle = {
+    type t
+
+    type headerTitleProps = {
+      children: option<string>,
+      allowFontScaling: option<bool>,
+      tintColor: option<ReactNative.Color.t>,
+      onLayout: layoutChangeEvent => unit,
+      style: option<ReactNative.Style.t>, //textStyle
+    }
+
+    @val @module("./Interop")
+    external t: @unwrap
+    [
+      | #String(string)
+      | #Render(headerTitleProps => React.element)
+    ] => t = "identity"
+
+    let string = s => t(#String(s))
+    let render = x => t(#Render(x))
+  }
+
+  module DrawerLabel = {
+    type t
+
+    type drawerLabelProps = {
+      focused: bool,
+      color: string,
+    }
+
+    @val @module("./Interop")
+    external t: @unwrap
+    [
+      | #String(string)
+      | #Render(drawerLabelProps => React.element)
+    ] => t = "identity"
+
+    let string = s => t(#String(s))
+    let render = x => t(#Render(x))
+  }
+
   type animatedNode = ReactNative.Animated.Value.t
 
   type scene = {
     route: route<M.params>,
     index: int,
     focused: bool,
-    tintColor: option<string>,
+    tintColor: option<ReactNative.Color.t>,
   }
 
-  type drawerLabelProps = {
-    focused: bool,
-    color: string,
-  }
   type drawerIconProps = {
     focused: bool,
-    color: string,
+    color: ReactNative.Color.t,
     size: float,
   }
 
   type contentOptions = {
     "items": array<route<M.params>>,
     "activeItemKey": option<Js.nullable<string>>,
-    "activeTintColor": option<string>,
-    "activeBackgroundColor": option<string>,
-    "inactiveTintColor": option<string>,
-    "inactiveBackgroundColor": option<string>,
+    "activeTintColor": option<ReactNative.Color.t>,
+    "activeBackgroundColor": option<ReactNative.Color.t>,
+    "inactiveTintColor": option<ReactNative.Color.t>,
+    "inactiveBackgroundColor": option<ReactNative.Color.t>,
     "itemsContainerStyle": option<ReactNative.Style.t>,
     "itemStyle": option<ReactNative.Style.t>,
     "labelStyle": option<ReactNative.Style.t>,
@@ -75,16 +114,31 @@ module Make = (
     "drawerOpenProgress": animatedNode,
   }
 
+  type headerRightOptions = {
+    tintColor: option<ReactNative.Color.t>,
+    pressColor: option<ReactNative.Color.t>,
+    pressOpacity: option<float>,
+  }
+
+  type headerLeftOptions = {
+    tintColor: option<ReactNative.Color.t>,
+    pressColor: option<ReactNative.Color.t>,
+    pressOpacity: option<float>,
+    labelVisible: option<bool>,
+  }
+
+  type headerBackgroundOptions = {style: option<ReactNative.Style.t>}
+
   @obj
   external options: (
     ~title: string=?,
     ~_lazy: bool=?,
-    ~drawerLabel: drawerLabelProps => React.element=?,
+    ~drawerLabel: DrawerLabel.t=?,
     ~drawerIcon: drawerIconProps => React.element=?,
-    ~drawerActiveTintColor: string=?,
-    ~drawerActiveBackgroundColor: string=?,
-    ~drawerInactiveTintColor: string=?,
-    ~drawerInactiveBackgroundColor: string=?,
+    ~drawerActiveTintColor: ReactNative.Color.t=?,
+    ~drawerActiveBackgroundColor: ReactNative.Color.t=?,
+    ~drawerInactiveTintColor: ReactNative.Color.t=?,
+    ~drawerInactiveBackgroundColor: ReactNative.Color.t=?,
     ~drawerItemStyle: ReactNative.Style.t=?,
     ~drawerLabelStyle: ReactNative.Style.t=?,
     ~drawerContentContainerStyle: ReactNative.Style.t=?,
@@ -94,7 +148,7 @@ module Make = (
     ~drawerType: [#front | #back | #slide | #permanent]=?,
     ~drawerHideStatusBarOnOpen: bool=?,
     ~drawerStatusBarAnimation: [#slide | #fade | #none]=?,
-    ~overlayColor: string=?,
+    ~overlayColor: ReactNative.Color.t=?,
     ~sceneContainerStyle: ReactNative.Style.t=?,
     ~gestureEnabled: bool=?,
     ~gestureHandlerProps: 'gestureHandlerProps=?,
@@ -108,9 +162,28 @@ module Make = (
     ]=?,
     ~unmountOnBlur: bool=?,
     ~headerShown: bool=?,
+    // ~header: Header.t=?,
+    ~headerTitle: HeaderTitle.t=?,
+    ~headerTitleAlign: [#left | #center]=?,
+    ~headerTitleStyle: ReactNative.Style.t=?,
+    ~headerTitleContainerStyle: ReactNative.Style.t=?,
+    ~headerTitleAllowFontScaling: bool=?,
+    ~headerLeft: headerLeftOptions => React.element=?,
+    ~headerLeftLabelVisible: bool=?,
+    ~headerLeftContainerStyle: ReactNative.Style.t=?,
+    ~headerRight: headerRightOptions => React.element=?,
+    ~headerRightContainerStyle: ReactNative.Style.t=?,
+    ~headerPressColor: ReactNative.Color.t=?,
+    ~headerPressOpacity: float=?,
+    ~headerTintColor: ReactNative.Color.t=?,
+    ~headerBackground: headerBackgroundOptions => React.element=?,
+    ~headerBackgroundContainerStyle: ReactNative.Style.t=?,
+    ~headerTransparent: bool=?,
+    ~headerStyle: ReactNative.Style.t=?,
+    ~headerShadowVisible: bool=?,
+    ~headerStatusBarHeight: ReactNative.Style.size=?,
     unit,
   ) => options = ""
-  // TODO Header options: https://reactnavigation.org/docs/drawer-navigator/#header-related-options
   // ~drawerLockMode: [@bs.string] [
   //                    | `unlocked
   //                    | [@bs.as "locked-closed"] `lockedClosed
@@ -127,19 +200,43 @@ module Make = (
 
   type navigatorProps
 
-  type screenProps
+  type groupProps = {screenOptions: option<optionsCallback>}
 
-  type groupProps
+  type renderCallbackProp = {
+    navigation: navigation,
+    route: route<M.params>,
+  }
+
+  type screenProps<'params> = {
+    name: string,
+    options: option<optionsCallback>,
+    initialParams: option<'params>,
+    component: option<React.component<{"navigation": navigation, "route": route<M.params>}>>,
+    children: option<renderCallbackProp => React.element>,
+  }
 
   @module("@react-navigation/drawer")
   external make: unit => {
     "Navigator": navigatorProps => React.element,
-    "Screen": screenProps => React.element,
+    "Screen": screenProps<M.params> => React.element,
     "Group": groupProps => React.element,
   } = "createDrawerNavigator"
 
   let stack = make()
 
+  module ScreenWithCallback = {
+    @obj
+    external makeProps: (
+      ~name: string,
+      ~options: optionsCallback=?,
+      ~initialParams: M.params=?,
+      ~children: renderCallbackProp => React.element,
+      ~key: string=?,
+      unit,
+    ) => screenProps<M.params> = ""
+    let make = stack["Screen"]
+  }
+
   module Screen = {
     @obj
     external makeProps: (
@@ -149,7 +246,7 @@ module Make = (
       ~component: React.component<{"navigation": navigation, "route": route<M.params>}>,
       ~key: string=?,
       unit,
-    ) => screenProps = ""
+    ) => screenProps<M.params> = ""
     let make = stack["Screen"]
   }
 
@@ -190,7 +287,7 @@ module Make = (
       ~children: React.element,
       ~key: string=?,
       unit,
-    ) => screenProps = ""
+    ) => groupProps = ""
     let make = stack["Group"]
   }
 }