@@ -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 */

@@ -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"]
 }
 }