upgrade to react-navigation 7

README.md

@@ -31,7 +31,7 @@ yarn add rescript-react-navigation
 ```
 
 `rescript-react-navigation` should be added to `bs-dependencies` in your
-`bsconfig.json`:
+`rescript.json`:
 
 ```diff
 {

package.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",
@@ -24,7 +26,7 @@
   ],
   "files": [
     "*.md",
-    "bsconfig.json",
+    "rescript.json",
     "src/**/*.res",
     "src/**/*.resi",
     "src/**/*.js",
@@ -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.1.0",
+    "rescript-react-native": "^0.73.1"
   },
   "prettier": {
     "trailingComma": "all"

bsconfig.json → rescript.json

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

src/BottomTabs.res

@@ -6,6 +6,16 @@ open ReactNative
 
 type tabBarLabelPosition = [#"below-icon" | #"beside-icon"]
 
+type tabBarPosition = [#bottom | #top | #left | #right]
+
+type tabBarVariant = [#uikit | #material]
+
+type animation = [
+  | #fade
+  | #shift
+  | #none
+]
+
 type tabBarIconOptions = {
   focused: bool,
   color: string,
@@ -29,9 +39,8 @@ 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,
   tabBarInactiveTintColor?: string,
   tabBarActiveBackgroundColor?: string,
@@ -40,11 +49,15 @@ type rec options = {
   tabBarItemStyle?: Style.t,
   tabBarStyle?: Style.t,
   tabBarBackground?: unit => React.element,
+  tabBarPosition?: tabBarPosition,
+  tabBarVariant?: tabBarVariant,
+  sceneStyle?: Style.t,
   \"lazy"?: bool,
-  unmountOnBlur?: bool,
+  popToTopOnBlur?: bool,
   freezeOnBlur?: bool,
   header?: headerParams => React.element,
   headerShown?: bool,
+  animation?: animation,
   // Header props from https://reactnavigation.org/docs/elements#header
   headerTitle?: Header.headerTitle,
   headerTitleAlign?: Header.headerTitleAlign,
@@ -82,8 +95,8 @@ module type NavigatorModule = {
       ~screenOptions: screenOptionsParams => options=?,
       ~backBehavior: backBehavior=?,
       ~detachInactiveScreens: bool=?,
-      ~sceneContainerStyle: Style.t=?,
       ~tabBar: unit => React.element=?,
+      ~layout: layoutNavigatorParams => React.element=?,
       ~children: React.element,
     ) => React.element
   }
@@ -124,8 +137,8 @@ type navigatorModule
 module Make = () => unpack(createBottomTabNavigator()->adaptNavigatorModule)
 
 module Navigation = {
-  @send external jumpTo: (navigation, string) => unit = "jumpTo"
-  @send
+  @send external jumpTo: (navigation, string, ~params: 'params=?) => unit = "jumpTo"
+  @deprecated("Use `jumpTo` with `~params` instead") @send
   external jumpToWithParams: (navigation, string, 'params) => unit = "jumpTo"
 
   @send

src/Core.res

@@ -54,24 +54,35 @@ type stateEventData = {state: navigationState}
 
 type action
 
+type layoutNavigatorParams = {
+  state: navigationState,
+  navigation: navigation,
+  descriptors: descriptors,
+  children: React.element,
+}
+
 module Navigation = {
   type t = navigation
 
-  @send external navigate: (t, string) => unit = "navigate"
-  @send
+  @send external navigate: (t, string, ~params: 'params=?) => unit = "navigate"
+  @deprecated("Use `navigate` with `~params` instead") @send
   external navigateWithParams: (t, string, 'params) => unit = "navigate"
 
-  @send external goBack: (navigation, unit) => unit = "goBack"
+  @send external navigateDeprecated: (t, string, ~params: 'params=?) => unit = "navigateDeprecated"
+
+  @send external goBack: navigation => unit = "goBack"
 
   @send
   external reset: (navigation, navigationState) => unit = "reset"
 
-  @send external isFocused: (navigation, unit) => bool = "isFocused"
+  @send external preload: (t, string, ~params: 'params=?) => unit = "preload"
+
+  @send external isFocused: navigation => bool = "isFocused"
 
   @send
   external dispatch: (t, action) => unit = "dispatch"
 
-  @send external canGoBack: (navigation, unit) => bool = "canGoBack"
+  @send external canGoBack: navigation => bool = "canGoBack"
 
   @send external setParams: (navigation, 'params) => unit = "setParams"
 

src/Drawer.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,
@@ -104,6 +104,7 @@ module type NavigatorModule = {
       ~detachInactiveScreens: bool=?,
       ~useLegacyImplementation: bool=?,
       ~drawerContent: React.component<contentComponentProps>=?,
+      ~layout: layoutNavigatorParams => React.element=?,
       ~children: React.element=?,
     ) => React.element
   }
@@ -147,7 +148,7 @@ module Navigation = {
   @send
   external setOptions: (navigation, options) => unit = "setOptions"
 
-  @send external jumpTo: (navigation, ~name: string, ~params: 'params=?, unit) => unit = "jumpTo"
+  @send external jumpTo: (navigation, ~name: string, ~params: 'params=?) => unit = "jumpTo"
   @send external openDrawer: navigation => unit = "openDrawer"
   @send external closeDrawer: navigation => unit = "closeDrawer"
   @send external toggleDrawer: navigation => unit = "toggleDrawer"

src/Elements.bs.js

@@ -5,9 +5,15 @@ var Header = {};
 
 var HeaderBackground = {};
 
+var HeaderTitle = {};
+
+var HeaderButton = {};
+
 var HeaderBackButton = {};
 
 exports.Header = Header;
 exports.HeaderBackground = HeaderBackground;
+exports.HeaderTitle = HeaderTitle;
+exports.HeaderButton = HeaderButton;
 exports.HeaderBackButton = HeaderBackButton;
 /* No side effect */