fix: react-native-screens integration

Author: janicduplessis

package.json

@@ -47,8 +47,8 @@
     "@react-navigation/native": "^6.0.10",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.1",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "0.67.8",
+    "@types/react": "^18.2.15",
+    "@types/react-native": "^0.72.2",
     "commitlint": "^17.0.2",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^8.5.0",
@@ -59,13 +59,15 @@
     "prettier": "^2.6.2",
     "react": "17.0.2",
     "react-native": "0.68.2",
+    "react-native-screens": "^3.22.1",
     "react-native-builder-bob": "^0.18.2",
     "release-it": "^15.0.0",
     "typescript": "^4.7.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-screens": "*",
     "@react-navigation/native": "*",
     "@gorhom/bottom-sheet": "*"
   },

src/BottomSheetView.tsx

@@ -7,6 +7,7 @@ import {
 } from '@gorhom/bottom-sheet';
 import { ParamListBase, useTheme } from '@react-navigation/native';
 import * as React from 'react';
+import { FullWindowOverlay } from 'react-native-screens';
 import type {
   BottomSheetDescriptorMap,
   BottomSheetNavigationConfig,
@@ -121,45 +122,47 @@ export function BottomSheetView({ state, descriptors }: Props) {
     <>
       {firstScreen.render()}
       {shouldRenderProvider.current && (
-        <BottomSheetModalProvider>
-          {state.routes.slice(1).map((route) => {
-            const { options, navigation, render } = descriptors[route.key];
-
-            const {
-              index,
-              backgroundStyle,
-              handleIndicatorStyle,
-              snapPoints = animatedSnapPoints.value,
-              ...sheetProps
-            } = options;
-
-            return (
-              <BottomSheetModalScreen
-                key={route.key}
-                // Make sure index is in range, it could be out if snapToIndex is persisted
-                // and snapPoints is changed.
-                index={Math.min(
-                  route.snapToIndex ?? index ?? 0,
-                  snapPoints.length - 1,
-                )}
-                contentHeight={animatedContentHeight}
-                handleHeight={animatedHandleHeight}
-                snapPoints={snapPoints}
-                navigation={navigation}
-                backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
-                handleIndicatorStyle={[
-                  themeHandleIndicatorStyle,
-                  handleIndicatorStyle,
-                ]}
-                {...sheetProps}
-              >
-                <RNBottomSheetView onLayout={handleContentLayout}>
-                  {render()}
-                </RNBottomSheetView>
-              </BottomSheetModalScreen>
-            );
-          })}
-        </BottomSheetModalProvider>
+        <FullWindowOverlay>
+          <BottomSheetModalProvider>
+            {state.routes.slice(1).map((route) => {
+              const { options, navigation, render } = descriptors[route.key];
+
+              const {
+                index,
+                backgroundStyle,
+                handleIndicatorStyle,
+                snapPoints = animatedSnapPoints.value,
+                ...sheetProps
+              } = options;
+
+              return (
+                <BottomSheetModalScreen
+                  key={route.key}
+                  // Make sure index is in range, it could be out if snapToIndex is persisted
+                  // and snapPoints is changed.
+                  index={Math.min(
+                    route.snapToIndex ?? index ?? 0,
+                    snapPoints.length - 1,
+                  )}
+                  contentHeight={animatedContentHeight}
+                  handleHeight={animatedHandleHeight}
+                  snapPoints={snapPoints}
+                  navigation={navigation}
+                  backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
+                  handleIndicatorStyle={[
+                    themeHandleIndicatorStyle,
+                    handleIndicatorStyle,
+                  ]}
+                  {...sheetProps}
+                >
+                  <RNBottomSheetView onLayout={handleContentLayout}>
+                    {render()}
+                  </RNBottomSheetView>
+                </BottomSheetModalScreen>
+              );
+            })}
+          </BottomSheetModalProvider>
+        </FullWindowOverlay>
       )}
     </>
   );

yarn.lock

@@ -1925,6 +1925,14 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
+"@react-native/virtualized-lists@^0.72.4":
+  version "0.72.6"
+  resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.72.6.tgz#375f88a1371927d803afad8d8a0ede3261464030"
+  integrity sha512-JhT6ydu35LvbSKdwnhWDuGHMOwM0WAh9oza/X8vXHA8ELHRyQ/4p8eKz/bTQcbQziJaaleUURToGhFuCtgiMoA==
+  dependencies:
+    invariant "^2.2.4"
+    nullthrows "^1.1.1"
+
 "@react-navigation/core@^6.2.1":
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.2.1.tgz#90459f9afd25b71a9471b0706ebea2cdd2534fc4"
@@ -2176,11 +2184,12 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-native@0.67.8":
-  version "0.67.8"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.8.tgz#edaaa0527b835fffbfc34c09874722b6e4a4d1f3"
-  integrity sha512-xA8rYiTHvO6RoZv/LFnmEeqRuhA2y34mGB8zX3bGHe/pCt9jEStUPyUO4q1KcDc9GiGIOBD8ArfRtThprAjSfQ==
+"@types/react-native@^0.72.2":
+  version "0.72.2"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.72.2.tgz#27c931a899c555b28e20cdd12e570b017808de96"
+  integrity sha512-/eEjr04Zqo7mTMszuSdrLx90+j5nWhDMMOgtnKZfAYyV3RwmlpSb7F17ilmMMxZWJY81n/JZ4e6wdhMJFpjrCg==
   dependencies:
+    "@react-native/virtualized-lists" "^0.72.4"
     "@types/react" "*"
 
 "@types/react@*":
@@ -2192,10 +2201,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@~17.0.21":
-  version "17.0.45"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.45.tgz#9b3d5b661fd26365fefef0e766a1c6c30ccf7b3f"
-  integrity sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==
+"@types/react@^18.2.15":
+  version "18.2.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.15.tgz#14792b35df676c20ec3cf595b262f8c615a73066"
+  integrity sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -7911,6 +7920,11 @@ react-devtools-core@^4.23.0:
     shell-quote "^1.6.1"
     ws "^7"
 
+react-freeze@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
+  integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
+
 "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -7977,6 +7991,14 @@ react-native-redash@^16.1.1:
     normalize-svg-path "^1.0.1"
     parse-svg-path "^0.1.2"
 
+react-native-screens@^3.22.1:
+  version "3.22.1"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.22.1.tgz#b0eb0696dbf1f9a852061cc71c0f8cdb95ed8e53"
+  integrity sha512-ffzwUdVKf+iLqhWSzN5DXBm0s2w5sN0P+TaHHPAx42LT7+DT0g8PkHT1QDvxpR5vCEPSS1i3EswyVK4HCuhTYg==
+  dependencies:
+    react-freeze "^1.0.0"
+    warn-once "^0.1.0"
+
 [email protected]:
   version "0.68.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.68.2.tgz#07547cd31bb9335a7fa4135cfbdc24e067142585"
@@ -9524,6 +9546,11 @@ walker@^1.0.7, walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
+warn-once@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
+  integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"