Upgrade to React Navigation 6.x (#47)

* Upgrade to React Navigation 6.x
- upgraded package version from 5.2.0 to 6.0.0

* Add `headerShown` option to `BottomTabs`

Author: vknez

package.json

@@ -1,14 +1,14 @@
 {
   "name": "rescript-react-navigation",
   "description": "ReScript bindings for react-navigation.",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "peerDependencies": {
-    "@react-navigation/bottom-tabs": "^5.0.0",
-    "@react-navigation/drawer": "^5.0.0",
-    "@react-navigation/material-bottom-tabs": "^5.0.0",
-    "@react-navigation/material-top-tabs": "^5.0.0",
-    "@react-navigation/native": "^5.0.0",
-    "@react-navigation/stack": "^5.0.0",
+    "@react-navigation/bottom-tabs": "^6.0.0",
+    "@react-navigation/drawer": "^6.0.0",
+    "@react-navigation/material-bottom-tabs": "^6.0.0",
+    "@react-navigation/material-top-tabs": "^6.0.0",
+    "@react-navigation/native": "^6.0.0",
+    "@react-navigation/stack": "^6.0.0",
     "@rescript/react": "^0.10.0",
     "rescript-react-native": "^0.64.3"
   },

src/BottomTabs.bs.js

@@ -22,12 +22,17 @@ function Make(M) {
   var $$Navigator = {
     make: make$2
   };
+  var make$3 = bottomTabs.Group;
+  var Group = {
+    make: make$3
+  };
   return {
           Navigation: Navigation,
           bottomTabs: bottomTabs,
           $$Screen: $$Screen,
           ScreenWithCallback: ScreenWithCallback,
-          $$Navigator: $$Navigator
+          $$Navigator: $$Navigator,
+          Group: Group
         };
 }
 

src/BottomTabs.res

@@ -57,23 +57,6 @@ module Make = (
     "inactiveTintColor": option<string>,
   }
 
-  @obj
-  external bottomTabBarOptions: (
-    ~keyboardHidesTabBar: bool=?,
-    ~activeTintColor: string=?,
-    ~inactiveTintColor: string=?,
-    ~activeBackgroundColor: string=?,
-    ~inactiveBackgroundColor: string=?,
-    ~allowFontScaling: bool=?,
-    ~showLabel: bool=?,
-    ~labelStyle: ReactNative.Style.t=?,
-    ~tabStyle: ReactNative.Style.t=?,
-    ~labelPosition: labelPositionArgs => string=?,
-    ~adaptive: bool=?,
-    ~style: ReactNative.Style.t=?,
-    unit,
-  ) => bottomTabBarOptions = ""
-
   type accessibilityRole = string
   type accessibilityStates = array<string>
   type routeArgs = {route: route}
@@ -113,14 +96,31 @@ module Make = (
   @obj
   external options: (
     ~title: string=?,
-    ~tabBarLabel: //TODO: dynamic, missing static option: React.ReactNode
-    tabBarLabelArgs => React.element=?,
+    ~unmountOnBlur: bool=?,
+    ~_lazy: bool=?,
+    ~showIcon: bool=?,
+    // TODO: Use @react-navigation/elements and add header-related options
+    // https://reactnavigation.org/docs/bottom-tab-navigator/#header-related-options
+    // https://github.com/rescript-react-native/rescript-react-navigation/pull/47
+    // ~header: 'header=?,
+    ~headerShown: bool=?,
+    ~tabBarLabel: tabBarLabelArgs => React.element=?, //TODO: dynamic, missing static option: React.ReactNode
     ~tabBarIcon: tabBarIconArgs => React.element=?,
     ~tabBarAccessibilityLabel: string=?,
     ~tabBarTestID: string=?,
-    ~tabBarVisible: bool=?,
     ~tabBarButton: React.element=?,
-    ~unmountOnBlur: bool=?,
+    ~tabBarHideOnKeyboard: bool=?,
+    ~tabBarActiveTintColor: string=?,
+    ~tabBarInactiveTintColor: string=?,
+    ~tabBarActiveBackgroundColor: string=?,
+    ~tabBarInactiveBackgroundColor: string=?,
+    ~tabBarAllowFontScaling: bool=?,
+    ~tabBarShowLabel: bool=?,
+    ~tabBarLabelPosition: labelPositionArgs => string=?,
+    ~tabBarLabelStyle: ReactNative.Style.t=?,
+    ~tabBarItemStyle: ReactNative.Style.t=?,
+    ~tabBarStyle: ReactNative.Style.t=?,
+    ~tabBarBackground: unit => React.element=?,
     unit,
   ) => options = ""
 
@@ -131,13 +131,13 @@ module Make = (
 
   type optionsCallback = optionsProps => options
 
+  type groupProps = {screenOptions: option<optionsCallback>}
+
   type navigatorProps = {
     initialRouteName: option<string>,
     screenOptions: option<optionsCallback>,
     backBehavior: option<string>,
-    _lazy: option<bool>,
     tabBar: option<bottomTabBarProps => React.element>,
-    tabBarOptions: option<bottomTabBarOptions>,
   }
 
   type renderCallbackProp = {
@@ -157,6 +157,7 @@ module Make = (
   external make: unit => {
     "Navigator": navigatorProps => React.element,
     "Screen": screenProps<M.params> => React.element,
+    "Group": groupProps => React.element,
   } = "createBottomTabNavigator"
 
   let bottomTabs = make()
@@ -193,14 +194,24 @@ module Make = (
       ~initialRouteName: string=?,
       ~screenOptions: optionsCallback=?,
       ~children: React.element,
-      ~backBehavior: [#initialRoute | #order | #history | #none]=?,
+      ~backBehavior: [#firstRoute | #initialRoute | #order | #history | #none]=?,
       ~_lazy: bool=?,
       ~tabBar: bottomTabBarProps => React.element=?,
-      ~tabBarOptions: bottomTabBarOptions=?,
       ~key: string=?,
       unit,
     ) => navigatorProps = ""
 
     let make = bottomTabs["Navigator"]
   }
+
+  module Group = {
+    @obj
+    external makeProps: (
+      ~screenOptions: optionsCallback=?,
+      ~children: React.element,
+      ~key: string=?,
+      unit,
+    ) => groupProps = ""
+    let make = bottomTabs["Group"]
+  }
 }

src/Core.bs.js

@@ -3,17 +3,20 @@
 var Caml_option = require("rescript/lib/js/caml_option.js");
 
 function NavigationHelpersCommon(M) {
-  var navigateByKey = function (key, params, navigation) {
+  var navigateByKey = function (key, params, merge, navigation) {
     var tmp = {
       key: key
     };
     if (params !== undefined) {
       tmp.params = Caml_option.valFromOption(params);
     }
+    if (merge !== undefined) {
+      tmp.merge = merge;
+    }
     navigation.navigate(tmp);
 
   };
-  var navigateByName = function (name, key, params, navigation) {
+  var navigateByName = function (name, key, params, merge, navigation) {
     var tmp = {
       name: name
     };
@@ -23,6 +26,9 @@ function NavigationHelpersCommon(M) {
     if (params !== undefined) {
       tmp.params = Caml_option.valFromOption(params);
     }
+    if (merge !== undefined) {
+      tmp.merge = merge;
+    }
     navigation.navigate(tmp);
 
   };
@@ -37,17 +43,20 @@ function EventConsumer(M) {
 }
 
 function NavigationScreenProp(M) {
-  var navigateByKey = function (key, params, navigation) {
+  var navigateByKey = function (key, params, merge, navigation) {
     var tmp = {
       key: key
     };
     if (params !== undefined) {
       tmp.params = Caml_option.valFromOption(params);
     }
+    if (merge !== undefined) {
+      tmp.merge = merge;
+    }
     navigation.navigate(tmp);
 
   };
-  var navigateByName = function (name, key, params, navigation) {
+  var navigateByName = function (name, key, params, merge, navigation) {
     var tmp = {
       name: name
     };
@@ -57,6 +66,9 @@ function NavigationScreenProp(M) {
     if (params !== undefined) {
       tmp.params = Caml_option.valFromOption(params);
     }
+    if (merge !== undefined) {
+      tmp.merge = merge;
+    }
     navigation.navigate(tmp);
 
   };

src/Core.res

@@ -2,7 +2,7 @@ type rec route<'params> = {
   key: string,
   name: string,
   params: option<'params>,
-  state: option<navigationState<'params>>,
+  path: option<string>,
 }
 and navigationState<'params> = {
   key: string,
@@ -29,27 +29,38 @@ module NavigationHelpersCommon = (
   type navigationParams
 
   @obj
-  external navigateByKeyParams: (~key: string, ~params: M.params=?, unit) => navigationParams = ""
+  external navigateByKeyParams: (
+    ~key: string,
+    ~params: M.params=?,
+    ~merge: bool=?,
+    unit,
+  ) => navigationParams = ""
 
   @obj
   external navigateByNameParams: (
     ~name: string,
     ~key: string=?,
     ~params: M.params=?,
+    ~merge: bool=?,
     unit,
   ) => navigationParams = ""
 
   @send external navigateBy: (navigation, navigationParams) => unit = "navigate"
 
-  let navigateByKey = (~key: string, ~params: option<M.params>=?, navigation) =>
-    navigateBy(navigation, navigateByKeyParams(~key, ~params?, ()))
+  let navigateByKey = (
+    ~key: string,
+    ~params: option<M.params>=?,
+    ~merge: option<bool>=?,
+    navigation,
+  ) => navigateBy(navigation, navigateByKeyParams(~key, ~params?, ~merge?, ()))
 
   let navigateByName = (
     ~name: string,
     ~key: option<string>=?,
     ~params: option<M.params>=?,
+    ~merge: option<bool>=?,
     navigation,
-  ) => navigateBy(navigation, navigateByNameParams(~name, ~key?, ~params?, ()))
+  ) => navigateBy(navigation, navigateByNameParams(~name, ~key?, ~params?, ~merge?, ()))
 
   @send external replace: (navigation, string) => unit = "replace"
   @send
@@ -113,9 +124,8 @@ module NavigationScreenProp = (
   external isFirstRouteInParent: (navigation, unit) => bool = "isFirstRouteInParent"
 
   @send
-  external dangerouslyGetParent: navigation => Js.nullable<navigation> = "dangerouslyGetParent"
+  external getParent: navigation => Js.nullable<navigation> = "getParent"
 
   @send
-  external dangerouslyGetState: navigation => Js.nullable<navigationState<'params>> =
-    "dangerouslyGetState"
+  external getState: navigation => Js.nullable<navigationState<'params>> = "getState"
 }

src/Drawer.bs.js

@@ -18,11 +18,16 @@ function Make(M) {
   var $$Navigator = {
     make: make$1
   };
+  var make$2 = stack.Group;
+  var Group = {
+    make: make$2
+  };
   return {
           Navigation: Navigation,
           stack: stack,
           $$Screen: $$Screen,
-          $$Navigator: $$Navigator
+          $$Navigator: $$Navigator,
+          Group: Group
         };
 }