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
  };
 }