upgrade to react-navigation 7

Author: Freddy03h

package-lock.json

@@ -6,14 +6,16 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@react-navigation/bottom-tabs": ">=6.1.0",
-    "@react-navigation/drawer": ">=6.1.0",
-    "@react-navigation/material-bottom-tabs": ">=6.1.0",
-    "@react-navigation/material-top-tabs": ">=6.1.0",
-    "@react-navigation/native": ">=6.1.0",
-    "@react-navigation/stack": ">=6.1.0",
-    "@rescript/react": ">=0.11.0",
-    "rescript-react-native": ">=0.71.0"
+    "@react-navigation/bottom-tabs": ">=7.0.0",
+    "@react-navigation/drawer": ">=7.0.0",
+    "@react-navigation/material-top-tabs": ">=7.0.0",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/stack": ">=7.0.0",
+    "@rescript/react": ">=0.12.0",
+    "rescript-react-native": ">=0.73.1"
+  },
+  "overrides": {
+    "react": "^18.0.0"
   },
   "repository": "https://github.com/rescript-react-native/react-navigation.git",
   "license": "MIT",
@@ -43,13 +45,13 @@
     "release": "npmpub"
   },
   "devDependencies": {
-    "@rescript/react": "^0.11.0",
+    "@rescript/react": "^0.12.2",
     "husky": "^4.0.0",
     "lint-staged": "^10.0.0",
     "npmpub": "^5.0.0",
     "prettier": "^2.0.0",
-    "rescript": "^11.0.0",
-    "rescript-react-native": ">=0.71.1"
+    "rescript": "^11.0.1",
+    "rescript-react-native": "^0.73.1"
   },
   "prettier": {
     "trailingComma": "all"

package.json

@@ -2,8 +2,7 @@
   "name": "rescript-react-navigation",
   "namespace": "react-navigation",
   "jsx": {
-    "version": 4,
-    "mode": "classic"
+    "version": 4
   },
   "package-specs": {
     "module": "commonjs",

bsconfig.json renamed to rescript.json

@@ -29,7 +29,7 @@ type rec options = {
   tabBarBadge?: string,
   tabBarBadgeStyle?: Style.t,
   tabBarAccessibilityLabel?: string,
-  tabBarTestID?: string,
+  tabBarButtonTestID?: string,
   tabBarButton?: unit => React.element, // TODO: props
   tabBarColor?: Color.t,
   tabBarActiveTintColor?: string,
@@ -40,8 +40,9 @@ type rec options = {
   tabBarItemStyle?: Style.t,
   tabBarStyle?: Style.t,
   tabBarBackground?: unit => React.element,
+  sceneStyle?: Style.t,
   \"lazy"?: bool,
-  unmountOnBlur?: bool,
+  popToTopOnBlur?: bool,
   freezeOnBlur?: bool,
   header?: headerParams => React.element,
   headerShown?: bool,
@@ -82,7 +83,6 @@ module type NavigatorModule = {
       ~screenOptions: screenOptionsParams => options=?,
       ~backBehavior: backBehavior=?,
       ~detachInactiveScreens: bool=?,
-      ~sceneContainerStyle: Style.t=?,
       ~tabBar: unit => React.element=?,
       ~children: React.element,
     ) => React.element

src/BottomTabs.res

@@ -61,6 +61,10 @@ module Navigation = {
   @send
   external navigateWithParams: (t, string, 'params) => unit = "navigate"
 
+  @send external navigateDeprecated: (t, string) => unit = "navigateDeprecated"
+  @send
+  external navigateDeprecatedWithParams: (t, string, 'params) => unit = "navigateDeprecated"
+
   @send external goBack: (navigation, unit) => unit = "goBack"
 
   @send

src/Core.res

@@ -45,14 +45,14 @@ type rec options = {
   drawerHideStatusBarOnOpen?: bool,
   drawerStatusBarAnimation?: drawerStatusBarAnimation,
   overlayColor?: Color.t,
-  sceneContainerStyle?: Style.t,
+  sceneStyle?: Style.t,
   gestureEnabled?: bool,
   gestureHandlerProps?: gestureHandlerProps,
   swipeEnabled?: bool,
   swipeEdgeWidth?: float,
   swipeMinDistance?: float,
   keyboardDismissMode?: keyboardDismissMode,
-  unmountOnBlur?: bool,
+  popToTopOnBlur?: bool,
   freezeOnBlur?: bool,
   headerShown?: bool,
   header?: headerProps => React.element,

src/Drawer.res

@@ -13,11 +13,13 @@ module Header = {
     | String(string)
     | Function(headerTitleProps => React.element)
 
+  type displayMode = [#default | #generic | #minimal]
+
   type headerLeftProps = {
     tintColor: option<Color.t>,
     pressColor: option<Color.t>,
     pressOpacity: option<float>,
-    labelVisible: option<bool>,
+    displayMode: option<displayMode>,
   }
 
   type headerRightProps = {
@@ -66,7 +68,7 @@ module HeaderBackground = {
 module HeaderBackButton = {
   @react.component @module("@react-navigation/elements")
   external make: (
-    ~labelVisible: bool=?,
+    ~displayMode: Header.displayMode=?,
     ~tintColor: Color.t=?,
     ~onPress: unit => unit,
   ) => React.element = "HeaderBackButton"

src/Elements.res

@@ -1,14 +1,14 @@
 'use strict';
 
-var React = require("react");
 var Js_dict = require("rescript/lib/js/js_dict.js");
 var Caml_option = require("rescript/lib/js/caml_option.js");
 var ReactNative = require("react-native");
+var JsxRuntime = require("react/jsx-runtime");
 var Stack$ReactNavigation = require("./Stack.bs.js");
 var Native = require("@react-navigation/native");
 
 function Example$HomeScreen(props) {
-  return React.createElement(ReactNative.Text, {
+  return JsxRuntime.jsx(ReactNative.Text, {
               children: "Hello Reasonable Person!"
             });
 }
@@ -18,7 +18,7 @@ var HomeScreen = {
 };
 
 function Example$ModalScreen(props) {
-  return React.createElement(ReactNative.Text, {
+  return JsxRuntime.jsx(ReactNative.Text, {
               children: "Hello From Modal"
             });
 }
@@ -34,15 +34,15 @@ var $$Navigator = include.$$Navigator;
 var $$Screen = include.$$Screen;
 
 function Example$MainStackScreen(props) {
-  return React.createElement($$Navigator.make, {
-              children: Caml_option.some(React.createElement($$Screen.make, {
+  return JsxRuntime.jsx($$Navigator.make, {
+              children: Caml_option.some(JsxRuntime.jsx($$Screen.make, {
                         name: "Home",
                         options: (function (props) {
                             var params = props.route.params;
                             return {
                                     title: params !== undefined ? Caml_option.valFromOption(params).name : "Reason",
                                     headerRight: (function (param) {
-                                        return React.createElement(ReactNative.Button, {
+                                        return JsxRuntime.jsx(ReactNative.Button, {
                                                     color: "#f00",
                                                     onPress: (function (param) {
                                                         props.navigation.navigate("MyModal");
@@ -113,27 +113,30 @@ var linking = {
 };
 
 function Example$RootStackScreen(props) {
-  return React.createElement(Native.NavigationContainer, {
+  return JsxRuntime.jsx(Native.NavigationContainer, {
               linking: linking,
-              children: React.createElement($$Navigator$1.make, {
+              children: JsxRuntime.jsxs($$Navigator$1.make, {
                     screenOptions: (function (param) {
                         return {
                                 presentation: "modal"
                               };
                       }),
-                    children: Caml_option.some(null)
-                  }, React.createElement($$Screen$1.make, {
-                        name: "Main",
-                        component: Example$MainStackScreen
-                      }), React.createElement($$Screen$1.make, {
-                        name: "MyModal",
-                        children: (function (param) {
-                            return React.createElement(Example$ModalScreen, {
-                                        navigation: param.navigation,
-                                        route: param.route
-                                      });
+                    children: [
+                      JsxRuntime.jsx($$Screen$1.make, {
+                            name: "Main",
+                            component: Example$MainStackScreen
+                          }),
+                      JsxRuntime.jsx($$Screen$1.make, {
+                            name: "MyModal",
+                            children: (function (param) {
+                                return JsxRuntime.jsx(Example$ModalScreen, {
+                                            navigation: param.navigation,
+                                            route: param.route
+                                          });
+                              })
                           })
-                      }))
+                    ]
+                  })
             });
 }
 

src/Example.bs.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var Interop = require("./Interop");
-var MaterialBottomTabs = require("@react-navigation/material-bottom-tabs");
+var ReactNavigation = require("react-native-paper/react-navigation");
 
 var TabBarBadge = {};
 
 function Make($star) {
-  return Interop.adaptNavigatorModule(MaterialBottomTabs.createMaterialBottomTabNavigator());
+  return Interop.adaptNavigatorModule(ReactNavigation.createMaterialBottomTabNavigator());
 }
 
 var $$Navigation = {};

src/MaterialBottomTabs.bs.js

@@ -69,7 +69,7 @@ module type NavigatorModule = {
 type navigatorModule
 
 %%private(
-  @module("@react-navigation/material-bottom-tabs")
+  @module("react-native-paper/react-navigation")
   external createMaterialBottomTabNavigator: unit => navigatorModule =
     "createMaterialBottomTabNavigator"
 

src/MaterialBottomTabs.res

@@ -25,7 +25,7 @@ type options = {
   tabBarIndicator?: unit => React.element,
   tabBarIndicatorStyle?: Style.t,
   tabBarIndicatorContainerStyle?: Style.t,
-  tabBarTestID?: string,
+  tabBarButtonTestID?: string,
   tabBarActiveTintColor?: string,
   tabBarInactiveTintColor?: string,
   tabBarPressColor?: string,
@@ -57,6 +57,7 @@ type tabBarProps = {
   tabStyle?: Style.t,
   indicatorStyle?: Style.t,
   labelStyle?: Style.t,
+  sceneStyle?: Style.t,
   style?: Style.t,
   renderIndicator?: React.component<{"route": route}>,
   activeTintColor?: string,
@@ -86,7 +87,6 @@ module type NavigatorModule = {
       ~tabBarPosition: tabBarPosition=?,
       ~keyboardDismissMode: keyboardDismissMode=?,
       ~initialLayout: layout=?,
-      ~sceneContainerStyle: Style.t=?,
       ~style: Style.t=?,
       ~tabBar: tabBarProps => React.element=?,
       ~children: React.element,

src/MaterialTopTabs.res

@@ -3,6 +3,8 @@
 
 var Linking = {};
 
+var NavigationIndependentTree = {};
+
 var NavigationContainer = {};
 
 var ServerContainer = {};
@@ -12,6 +14,7 @@ var CommonActions = {};
 var Link = {};
 
 exports.Linking = Linking;
+exports.NavigationIndependentTree = NavigationIndependentTree;
 exports.NavigationContainer = NavigationContainer;
 exports.ServerContainer = ServerContainer;
 exports.CommonActions = CommonActions;

src/Native.bs.js

@@ -7,9 +7,17 @@ type themeColors = {
   notification: string,
 }
 
+type themeFonts = {
+  regular: ReactNative.Style.t,
+  medium: ReactNative.Style.t,
+  bold: ReactNative.Style.t,
+  heavy: ReactNative.Style.t,
+}
+
 type theme = {
   dark: bool,
   colors: themeColors,
+  fonts: themeFonts,
 }
 
 @module("@react-navigation/native")
@@ -35,6 +43,11 @@ module Linking = {
   }
 }
 
+module NavigationIndependentTree = {
+  @module("@react-navigation/native") @react.component
+  external make: unit => React.element = "NavigationIndependentTree"
+}
+
 module NavigationContainer = {
   type state = Js.Json.t
   type navigationState = state => unit
@@ -48,7 +61,7 @@ module NavigationContainer = {
     ~theme: theme=?,
     ~linking: Linking.t=?,
     ~children: React.element,
-    ~independent: bool=?,
+    ~navigationInChildEnabled: bool=?,
   ) => React.element = "NavigationContainer"
 
   @send
@@ -115,9 +128,11 @@ module CommonActions = {
 @module("@react-navigation/native")
 external useLinkTo: string => unit = "useLinkTo"
 
-type linkPropsIn = {
-  to_: string,
-  action: unit => unit,
+type linkPropsIn<'params> = {
+  screen?: string,
+  params?: 'params,
+  action?: Core.action,
+  href?: string,
 }
 type linkPropsOut = {
   href: string,
@@ -126,20 +141,24 @@ type linkPropsOut = {
 }
 
 @module("@react-navigation/native")
-external useLinkProps: linkPropsIn => linkPropsOut = "useLinkProps"
+external useLinkProps: linkPropsIn<'params> => linkPropsOut = "useLinkProps"
 
-type linkBuilderOut<'a> = (string, 'a) => string
+type linkBuilderOut<'params> = {
+  buildHref: (string, 'params) => string,
+  buildAction: string => Core.action,
+}
 
 @module("@react-navigation/native")
-external useLinkBuilder: unit => linkBuilderOut<'a> = "useLinkBuilder"
+external useLinkBuilder: unit => linkBuilderOut<'params> = "useLinkBuilder"
 
 module Link = {
-  @module("@react-navigation/native") @react.component
-  external make: (
-    ~to_: string=?,
-    ~action: unit => unit=?,
-    ~children: React.element,
-  ) => React.element = "Link"
+  type props<'params> = {
+    ...linkPropsIn<'params>,
+    children: React.element,
+  }
+
+  @module("@react-navigation/native")
+  external make: props<'params> => React.element = "Link"
 }
 
 @module("@react-navigation/native")