rescript-react-native · MoOx · Aug 11, 2020 · Jul 8, 2020 · Jul 8, 2020 · Jul 8, 2020
diff --git a/package.json b/package.json
@@ -2,7 +2,12 @@
   "name": "reason-react-navigation",
   "version": "5.0.0-beta.0",
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0",
+    "@react-navigation/native": "^5.0.0",
+    "@react-navigation/bottom-tabs": "^5.0.0",
+    "@react-navigation/stack": "^5.0.0",
+    "@react-navigation/material-top-tabs": "^5.0.0",
+    "@react-navigation/material-bottom-tabs": "^5.0.0",
+    "@react-navigation/drawer": "^5.0.0",
     "reason-react": "^0.7.0",
     "reason-react-native": "^0.61.0"
   },

diff --git a/src/BottomTabs.re b/src/BottomTabs.re
@@ -39,7 +39,6 @@ module Make = (M: {type params;}) => {
     pub inactiveBackgroundColor: option(string);
     pub allowFontScaling: option(bool);
     pub showLabel: option(bool);
-    pub showIcon: option(bool);
     pub labelStyle: option(ReactNative.Style.t);
     pub tabStyle: option(ReactNative.Style.t);
     pub labelPosition: option(labelPositionArgs => string);
@@ -120,7 +119,8 @@ module Make = (M: {type params;}) => {
       ~tabBarAccessibilityLabel: string=?,
       ~tabBarTestID: string=?,
       ~tabBarVisible: bool=?,
-      ~tabBarButtonComponent: React.element=?,
+      ~tabBarButton: React.element=?,
+      ~unmountOnBlur: bool=?,
       unit
     ) =>
     options;
@@ -135,8 +135,9 @@ module Make = (M: {type params;}) => {
   type navigatorProps = {
     initialRouteName: option(string),
     screenOptions: option(optionsCallback),
+    backBehavior: option(string),
     _lazy: option(bool),
-    tabBar: option(React.component(Js.t(bottomTabBarProps))),
+    tabBar: option(Js.t(bottomTabBarProps) => React.element),
     tabBarOptions: option(bottomTabBarOptions),
   };
 
@@ -211,8 +212,15 @@ module Make = (M: {type params;}) => {
         ~initialRouteName: string=?,
         ~screenOptions: optionsCallback=?,
         ~children: React.element,
+        ~backBehavior: [@bs.string] [
+                         | `initialRoute
+                         | `order
+                         | `history
+                         | `none
+                       ]
+                         =?,
         ~_lazy: bool=?,
-        ~tabBar: React.component(Js.t(bottomTabBarProps))=?,
+        ~tabBar: Js.t(bottomTabBarProps) => React.element=?,
         ~tabBarOptions: bottomTabBarOptions=?,
         unit
       ) =>

diff --git a/src/MaterialTopTabs.bs.js b/src/MaterialTopTabs.bs.js
@@ -22,12 +22,14 @@ function Make(M) {
   var $$Navigator = {
     make: make$2
   };
+  var MaterialTopTabBar = { };
   return {
           Navigation: Navigation,
           materialTopTabs: materialTopTabs,
           $$Screen: $$Screen,
           ScreenWithCallback: ScreenWithCallback,
-          $$Navigator: $$Navigator
+          $$Navigator: $$Navigator,
+          MaterialTopTabBar: MaterialTopTabBar
         };
 }
 

diff --git a/src/MaterialTopTabs.re b/src/MaterialTopTabs.re
@@ -30,33 +30,25 @@ module Make = (M: {type params;}) => {
   type animatedNode = ReactNative.Animated.Value.t;
 
   type scene = {
-    .
-    "route": route,
-    "focused": bool,
-    "tintColor": string,
+    focused: bool,
+    color: string,
   };
 
+  type descriptors;
+
   class type virtual tabBar = {
     pub scrollEnabled: option(bool);
-    pub bounces: option(bool);
     //pub navigationState: navigationState(M.params);
     //pub activeColor: option(string);
     //pub inactiveColor: option(string);
     pub pressColor: option(string);
     pub pressOpacity: option(float);
-    //pub getLabelText: scene => Js.nullable(string);
-    pub getAccessible: scene => Js.nullable(bool);
-    //pub getAccessibilityLabel: scene => Js.nullable(string);
-    //pub getTestID: scene => Js.nullable(string);
     //TODO: render: https://github.com/react-native-community/react-native-tab-view/blob/64e03bf14b0fac9c3bccd684bf31a04ecf19c50d/src/TabBar.tsx#L38-L51
-    //pub onTabPress: option(scene => unit);
-    //pub onTabLongPress: option(scene => unit);
     pub tabStyle: option(ReactNative.Style.t);
     pub indicatorStyle: option(ReactNative.Style.t);
-    pub indicatorContainerStyle: option(ReactNative.Style.t);
     pub labelStyle: option(ReactNative.Style.t);
-    pub contentContainerStyle: option(ReactNative.Style.t);
     pub style: option(ReactNative.Style.t);
+    pub renderIndicator: option(React.component({. "route": route}));
   };
 
   class type virtual materialTopTabBarOptions = {
@@ -67,7 +59,6 @@ module Make = (M: {type params;}) => {
     pub iconStyle: option(ReactNative.Style.t);
     pub showLabel: option(bool);
     pub showIcon: option(bool);
-    pub upperCaseLabel: option(bool);
     pub allowFontScaling: option(bool);
   };
 
@@ -81,21 +72,11 @@ module Make = (M: {type params;}) => {
     constraint 'self = #materialTopTabBarOptions;
     pub state: navigationState(M.params);
     pub navigation: navigation;
-    //pub getLabelText: routeOptions => ...;
-    pub getAccessibilityLabel: routeOptions => Js.nullable(string);
-    pub getTestID: routeOptions => Js.nullable(string);
-    pub onTabPress:
-      {
-        .
-        "route": route,
-        [@bs.meth] "preventDefault": unit => unit,
-      } =>
-      unit;
-    pub onTabLongPress: routeOptions => unit;
-    pub tabBarPosition: string; //`top | `bottom
-    //SceneRendererProps
+    pub descriptors: descriptors;
+    // SceneRendererProps from react-native-tab-view
     pub layout: layout;
     pub position: animatedNode;
+    pub jumpTo: string => unit;
   };
 
   [@bs.obj]
@@ -106,19 +87,15 @@ module Make = (M: {type params;}) => {
       ~iconStyle: ReactNative.Style.t=?,
       ~showLabel: bool=?,
       ~showIcon: bool=?,
-      ~upperCaseLabel: bool=?,
       ~allowFontScaling: bool=?,
       ~scrollEnabled: bool=?,
-      ~bounces: bool=?,
       ~pressColor: string=?,
       ~pressOpacity: float=?,
-      ~getAccessible: Js.nullable(bool)=?,
       ~tabStyle: ReactNative.Style.t=?,
       ~indicatorStyle: ReactNative.Style.t=?,
-      ~indicatorContainerStyle: ReactNative.Style.t=?,
       ~labelStyle: ReactNative.Style.t=?,
-      ~contentContainerStyle: ReactNative.Style.t=?,
       ~style: ReactNative.Style.t=?,
+      ~renderIndicator: React.component({. "route": route})=?,
       unit
     ) =>
     materialTopTabBarOptions;
@@ -133,7 +110,6 @@ module Make = (M: {type params;}) => {
       ~tabBarIcon: scene => React.element=?,
       ~tabBarAccessibilityLabel: string=?,
       ~tabBarTestID: string=?,
-      ~tabBarVisible: bool=?,
       unit
     ) =>
     options;
@@ -148,16 +124,19 @@ module Make = (M: {type params;}) => {
   type navigatorProps = {
     initialRouteName: option(string),
     screenOptions: option(optionsCallback),
-    lazyPlaceholderComponent: option(React.component({. "route": route})),
-    tabBar: option(React.component(Js.t(materialTopTabBarProps))),
+    _lazy: option(bool),
+    lazyPreloadDistance: option(int),
+    lazyPlaceholder: option(React.component({. "route": route})),
+    tabBar: option(Js.t(materialTopTabBarProps) => React.element),
     tabBarOptions: option(materialTopTabBarOptions),
     tabBarPosition: option(string),
     backBehavior: option(string),
-    shifting: option(bool),
-    labeled: option(bool),
-    activeColor: option(string),
-    inactiveColor: option(string),
-    barStyle: option(ReactNative.Style.t),
+    removeClippedSubviews: option(bool),
+    keyboardDismissMode: option(string),
+    swipeEnabled: option(bool),
+    swipeVelocityImpact: option(float),
+    sceneContainerStyle: option(ReactNative.Style.t),
+    style: option(ReactNative.Style.t),
   };
 
   type renderCallbackProp = {
@@ -227,14 +206,66 @@ module Make = (M: {type params;}) => {
         ~initialRouteName: string=?,
         ~screenOptions: optionsCallback=?,
         ~children: React.element,
-        ~lazyPlaceholderComponent: React.component({. "route": route})=?,
-        ~tabBar: React.component(Js.t(materialTopTabBarProps))=?,
+        ~backBehavior: [@bs.string] [
+                         | `initialRoute
+                         | `order
+                         | `history
+                         | `none
+                       ]
+                         =?,
+        ~_lazy: bool=?,
+        ~lazyPreloadDistance: int=?,
+        ~lazyPlaceholder: React.component({. "route": route})=?,
+        ~tabBar: Js.t(materialTopTabBarProps) => React.element=?,
         ~tabBarOptions: materialTopTabBarOptions=?,
         ~tabBarPosition: [@bs.string] [ | `top | `bottom]=?,
+        ~removeClippedSubviews: bool=?,
+        ~keyboardDismissMode: [@bs.string] [
+                                | `auto
+                                | [@bs.as "on-drag"] `onDrag
+                                | `none
+                              ]
+                                =?,
+        ~swipeEnabled: bool=?,
+        ~swipeVelocityImpact: float=?,
+        ~sceneContainerStyle: ReactNative.Style.t=?,
+        ~style: ReactNative.Style.t=?,
         unit
       ) =>
       navigatorProps;
 
     let make = materialTopTabs##"Navigator";
   };
+
+  module MaterialTopTabBar = {
+    [@bs.module "@react-navigation/material-top-tabs"] [@react.component]
+    external make:
+      (
+        ~state: navigationState(M.params),
+        ~navigation: navigation,
+        ~descriptors: descriptors,
+        // SceneRendererProps from react-native-tab-view
+        ~layout: layout,
+        ~position: animatedNode,
+        ~jumpTo: string => unit,
+        // materialTopTabBarOptions
+        ~activeTintColor: string=?,
+        ~inactiveTintColor: string=?,
+        ~iconStyle: ReactNative.Style.t=?,
+        ~showLabel: bool=?,
+        ~showIcon: bool=?,
+        ~allowFontScaling: bool=?,
+        ~scrollEnabled: bool=?,
+        ~pressColor: string=?,
+        ~pressOpacity: float=?,
+        ~tabStyle: ReactNative.Style.t=?,
+        ~indicatorStyle: ReactNative.Style.t=?,
+        ~labelStyle: ReactNative.Style.t=?,
+        ~style: ReactNative.Style.t=?,
+        ~renderIndicator: React.component({. "route": route})=?,
+        unit
+      ) =>
+      React.element =
+      "MaterialTopTabBar";
+  };
 };
diff --git a/src/Stack.re b/src/Stack.re
@@ -207,6 +207,7 @@ module Make = (M: {type params;}) => {
   };
 
   type headerRightOptions = {tintColor: option(ReactNative.Color.t)};
+  type headerBackgroundOptions = {style: option(ReactNative.Style.t)};
 
   [@bs.obj]
   external options:
@@ -215,14 +216,17 @@ module Make = (M: {type params;}) => {
       ~header: Header.t=?,
       ~cardShadowEnabled: bool=?,
       ~cardOverlayEnabled: bool=?,
-      ~cardTransparent: bool=?,
+      ~cardOverlay: unit => React.element=?,
       ~cardStyle: ReactNative.Style.t=?,
       ~animationEnabled: bool=?,
+      ~animationTypeForReplace: [@bs.string] [ | `push | `pop]=?,
       ~gestureEnabled: bool=?,
       ~gestureResponseDistance: gestureResponseDistance=?,
+      ~gestureVelocityImpact: float=?,
       // StackHeaderOptions
       ~headerShown: bool=?,
       ~headerTitle: HeaderTitle.t=?,
+      ~headerTitleAlign: [@bs.string] [ | `left | `center]=?,
       ~headerTitleStyle: ReactNative.Style.t=?,
       ~headerTitleContainerStyle: ReactNative.Style.t=?,
       ~headerTintColor: ReactNative.Color.t=?,
@@ -238,7 +242,8 @@ module Make = (M: {type params;}) => {
       ~headerRightContainerStyle: ReactNative.Style.t=?,
       ~headerBackImage: backImage=?,
       ~headerPressColorAndroid: ReactNative.Color.t=?,
-      ~headerBackground: unit => React.element=?,
+      ~headerBackground: headerBackgroundOptions => React.element=?,
+      ~headerStatusBarHeight: ReactNative.Style.size=?,
       ~headerStyle: ReactNative.Style.t=?,
       ~headerTransparent: bool=?,
       // TransitionPreset