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.0.1",
+    "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
   }

src/Core.res

@@ -54,18 +54,33 @@ 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
   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
   external reset: (navigation, navigationState) => unit = "reset"
 
+  @send external preload: (t, string) => unit = "preload"
+  @send
+  external preloadWithParams: (t, string, 'params) => unit = "preload"
+
   @send external isFocused: (navigation, unit) => bool = "isFocused"
 
   @send

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
   }

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 */

src/Elements.res

@@ -13,63 +13,137 @@ module Header = {
     | String(string)
     | Function(headerTitleProps => React.element)
 
-  type headerLeftProps = {
-    tintColor: option<Color.t>,
-    pressColor: option<Color.t>,
-    pressOpacity: option<float>,
-    labelVisible: option<bool>,
-  }
+  type displayMode = [#default | #generic | #minimal]
 
   type headerRightProps = {
     tintColor: option<Color.t>,
     pressColor: option<Color.t>,
     pressOpacity: option<float>,
+    canGoBack: option<bool>,
+  }
+  type headerLeftProps = {
+    ...headerRightProps,
+    displayMode: option<displayMode>,
+    href: option<string>,
   }
 
   type headerBackgroundOptions = {style: option<Style.t>}
 
   type headerTitleAlign = [#left | #center]
 
-  @react.component @module("@react-navigation/elements")
-  external make: (
-    ~title: string=?,
-    ~headerTitle: headerTitle=?,
-    ~headerTitleAlign: headerTitleAlign=?,
-    ~headerTitleAllowFontScaling: bool=?,
-    ~headerTitleStyle: Style.t=?,
-    ~headerTitleContainerStyle: Style.t=?,
-    ~headerLeft: headerLeftProps => React.element=?,
-    ~headerLeftLabelVisible: bool=?,
-    ~headerLeftContainerStyle: Style.t=?,
-    ~headerRight: headerRightProps => React.element=?,
-    ~headerRightContainerStyle: Style.t=?,
-    ~headerPressColor: Color.t=?,
-    ~headerPressOpacity: float=?,
-    ~headerTintColor: Color.t=?,
-    ~headerBackground: headerBackgroundOptions => React.element=?,
-    ~headerBackgroundContainerStyle: Style.t=?,
-    ~headerTransparent: bool=?,
-    ~headerStyle: Style.t=?,
-    ~headerShadowVisible: bool=?,
-    ~headerStatusBarHeight: Style.size=?,
-  ) => React.element = "Header"
+  type inputType = [
+    | #text
+    | #phone
+    | #number
+    | #email
+  ]
+
+  type headerSearchBarOptions = {
+    ref?: TextInputElement.ref,
+    autoCapitalize?: TextInput.autoCapitalize,
+    autoFocus?: bool,
+    cancelButtonText?: string,
+    inputType?: inputType,
+    onBlur?: Event.targetEvent => unit,
+    onChangeText?: string => unit,
+    onClose?: unit => unit,
+    onFocus?: Event.targetEvent => unit,
+    placeholder?: string,
+  }
+
+  type headerCommonOptions = {
+    headerTitle?: headerTitle,
+    headerTitleAlign?: headerTitleAlign,
+    headerLeft?: headerLeftProps => React.element,
+    headerRight?: headerRightProps => React.element,
+    headerTintColor?: Color.t,
+    headerBackground?: headerBackgroundOptions => React.element,
+    headerTransparent?: bool,
+    headerShadowVisible?: bool,
+  }
+
+  type headerOptions = {
+    ...headerCommonOptions,
+    headerTitleStyle?: Style.t,
+    headerTitleAllowFontScaling?: bool,
+    headerTitleContainerStyle?: Style.t,
+    headerLeftContainerStyle?: Style.t,
+    headerRightContainerStyle?: Style.t,
+    headerSearchBarOptions?: headerSearchBarOptions,
+    headerPressColor?: Color.t,
+    headerPressOpacity?: float,
+    headerBackgroundContainerStyle?: Style.t,
+    headerStyle?: Style.t,
+    headerStatusBarHeight?: Style.size,
+  }
+
+  type backProp = {
+    title?: string,
+    href?: string,
+  }
+
+  type props = {
+    ...headerOptions,
+    backProp?: backProp,
+    modal?: bool,
+    layout?: Core.layout,
+    title: string,
+  }
+
+  @module("@react-navigation/elements")
+  external make: React.component<props> = "Header"
 }
 
 module HeaderBackground = {
-  @react.component @module("@react-navigation/elements")
-  external make: (
-    // actually all RN view props
-    ~children: React.element=?,
-  ) => React.element = "HeaderBackground"
+  @module("@react-navigation/elements")
+  external make: React.component<View.props> = "HeaderBackground"
+}
+
+module HeaderTitle = {
+  @module("@react-navigation/elements")
+  external make: React.component<Text.props> = "HeaderTitle"
+}
+
+module HeaderButton = {
+  type headerButtonProps = {
+    tintColor?: Color.t,
+    pressColor?: Color.t,
+    pressOpacity?: float,
+    onPress?: unit => unit,
+    href?: string,
+    disabled?: bool,
+    accessibilityLabel?: string,
+    testID?: string,
+    style?: Style.t,
+  }
+
+  type props = {
+    ...headerButtonProps,
+    children: React.element,
+  }
+
+  @module("@react-navigation/elements")
+  external make: React.component<props> = "HeaderTitle"
 }
 
 module HeaderBackButton = {
-  @react.component @module("@react-navigation/elements")
-  external make: (
-    ~labelVisible: bool=?,
-    ~tintColor: Color.t=?,
-    ~onPress: unit => unit,
-  ) => React.element = "HeaderBackButton"
+  type backImageProps = {tintColor?: Color.t}
+
+  type props = {
+    ...HeaderButton.headerButtonProps,
+    backImage?: backImageProps => React.element,
+    label?: string,
+    truncatedLabel?: string,
+    displayMode?: Header.displayMode,
+    labelStyle?: Style.t,
+    allowFontScaling?: bool,
+    onLabelLayout?: Event.layoutEvent => unit,
+    screenLayout?: Core.layout,
+    titleLayout?: Core.layout,
+  }
+
+  @module("@react-navigation/elements")
+  external make: React.component<props> = "HeaderBackButton"
 }
 
 @module("@react-navigation/elements")