From 0df7f5ae8da85d9c78ccd8a14c4039ad05b0566b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 2 Mar 2023 10:42:34 +0100 Subject: [PATCH 1/3] fix: bottom sheet modal appear behind native views --- package.json | 9 ++++- .../bottomSheetModal/BottomSheetModal.tsx | 39 +++++++++++-------- .../fullWindowOverlay/FullWindowOverlay.tsx | 32 +++++++++++++++ src/components/fullWindowOverlay/index.ts | 1 + yarn.lock | 18 +++++++++ 5 files changed, 81 insertions(+), 18 deletions(-) create mode 100644 src/components/fullWindowOverlay/FullWindowOverlay.tsx create mode 100644 src/components/fullWindowOverlay/index.ts diff --git a/package.json b/package.json index a34ecc319..f40b97066 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-native-builder-bob": "^0.18.1", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.8.0", + "react-native-screens": "^3.20.0", "release-it": "^15.4.2", "typescript": "^4.2.4" }, @@ -72,7 +73,13 @@ "react": "*", "react-native": "*", "react-native-gesture-handler": ">=1.10.1", - "react-native-reanimated": ">=2.2.0" + "react-native-reanimated": ">=2.2.0", + "react-native-screens": ">=3.14.0" + }, + "peerDependenciesMeta": { + "react-native-screens": { + "optional": true + } }, "peerDependenciesMeta": { "@types/react-native": { diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index 8ee4f05c7..700c54d69 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -7,8 +7,10 @@ import React, { useRef, useState, } from 'react'; +import { StyleSheet } from 'react-native'; import { Portal, usePortal } from '@gorhom/portal'; import BottomSheet from '../bottomSheet'; +import FullWindowOverlay from '../fullWindowOverlay/FullWindowOverlay'; import { useBottomSheetModalInternal } from '../../hooks'; import { print } from '../../utilities'; import { @@ -375,23 +377,26 @@ const BottomSheetModalComponent = forwardRef< handleOnUpdate={handlePortalRender} handleOnUnmount={handlePortalOnUnmount} > - : Content - } - $modal={true} - /> + {/* FullWindowOverlay will only be used if your project has react-native-screens installed, otherwise children is just returned */} + + : Content + } + $modal={true} + /> + ) : null; }); diff --git a/src/components/fullWindowOverlay/FullWindowOverlay.tsx b/src/components/fullWindowOverlay/FullWindowOverlay.tsx new file mode 100644 index 000000000..63d1ade1f --- /dev/null +++ b/src/components/fullWindowOverlay/FullWindowOverlay.tsx @@ -0,0 +1,32 @@ +import React, { ComponentProps, ReactNode } from 'react'; +import { View, Platform } from 'react-native'; + +// react-native-screens is an optional peer dependency +let RNScreens: { + FullWindowOverlay: React.ComponentType<{ + children: ReactNode; + }>; +} | null = null; +try { + RNScreens = require('react-native-screens'); +} catch {} + +function FullWindowOverlay({ children, ...rest }: ComponentProps) { + // check if react-native-screens is installed + if (!RNScreens) { + return <>{children}; + } + + // avoid warning from react-native-screens saying FullWindowOverlay is only available on iOS + if (Platform.OS === 'android') { + return {children}; + } + + return ( + + {children} + + ); +} + +export default FullWindowOverlay; diff --git a/src/components/fullWindowOverlay/index.ts b/src/components/fullWindowOverlay/index.ts new file mode 100644 index 000000000..632efd089 --- /dev/null +++ b/src/components/fullWindowOverlay/index.ts @@ -0,0 +1 @@ +export { default } from './FullWindowOverlay'; diff --git a/yarn.lock b/yarn.lock index 3ef8206c1..7d9532bba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7733,6 +7733,11 @@ react-devtools-core@^4.0.6: 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, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -7789,6 +7794,14 @@ react-native-reanimated@^2.8.0: setimmediate "^1.0.5" string-hash-64 "^1.0.3" +react-native-screens@^3.20.0: + version "3.20.0" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.20.0.tgz#4d154177395e5541387d9a05bc2e12e54d2fb5b1" + integrity sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg== + dependencies: + react-freeze "^1.0.0" + warn-once "^0.1.0" + react-native@^0.62.2: version "0.62.3" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.62.3.tgz#9a2e96af3dedd0723c8657831eec4ed3c30f3299" @@ -9417,6 +9430,11 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +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" From fa3fd4468c37547733185a65565665e9cec79b13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Mon, 5 Jun 2023 16:15:05 +0200 Subject: [PATCH 2/3] feat: add bottomSheetWrapper prop to specify a custom wrapper component --- CHANGELOG.md | 4 +++ package.json | 9 +----- .../bottomSheetModal/BottomSheetModal.tsx | 8 ++--- src/components/bottomSheetModal/types.d.ts | 7 ++++ .../fullWindowOverlay/FullWindowOverlay.tsx | 32 ------------------- src/components/fullWindowOverlay/index.ts | 1 - yarn.lock | 18 ----------- 7 files changed, 15 insertions(+), 64 deletions(-) delete mode 100644 src/components/fullWindowOverlay/FullWindowOverlay.tsx delete mode 100644 src/components/fullWindowOverlay/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f2efa3fb..dbc10bfc2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## Changelog +## [Unreleased] + +- Add `bottomSheetWrapper` prop for `BottomSheetModal` component (#832)(by @magrinj) + ### [v4.4.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.1...v4.4.7) - #### Fixes diff --git a/package.json b/package.json index f40b97066..a34ecc319 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "react-native-builder-bob": "^0.18.1", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.8.0", - "react-native-screens": "^3.20.0", "release-it": "^15.4.2", "typescript": "^4.2.4" }, @@ -73,13 +72,7 @@ "react": "*", "react-native": "*", "react-native-gesture-handler": ">=1.10.1", - "react-native-reanimated": ">=2.2.0", - "react-native-screens": ">=3.14.0" - }, - "peerDependenciesMeta": { - "react-native-screens": { - "optional": true - } + "react-native-reanimated": ">=2.2.0" }, "peerDependenciesMeta": { "@types/react-native": { diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index 700c54d69..e0214bd14 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -7,10 +7,8 @@ import React, { useRef, useState, } from 'react'; -import { StyleSheet } from 'react-native'; import { Portal, usePortal } from '@gorhom/portal'; import BottomSheet from '../bottomSheet'; -import FullWindowOverlay from '../fullWindowOverlay/FullWindowOverlay'; import { useBottomSheetModalInternal } from '../../hooks'; import { print } from '../../utilities'; import { @@ -47,6 +45,7 @@ const BottomSheetModalComponent = forwardRef< snapPoints, enablePanDownToClose = true, animateOnMount = true, + bottomSheetWrapper: BottomSheetWrapper = React.Fragment, // callbacks onChange: _providedOnChange, @@ -377,8 +376,7 @@ const BottomSheetModalComponent = forwardRef< handleOnUpdate={handlePortalRender} handleOnUnmount={handlePortalOnUnmount} > - {/* FullWindowOverlay will only be used if your project has react-native-screens installed, otherwise children is just returned */} - + - + ) : null; }); diff --git a/src/components/bottomSheetModal/types.d.ts b/src/components/bottomSheetModal/types.d.ts index fc1d90817..58023ad1f 100644 --- a/src/components/bottomSheetModal/types.d.ts +++ b/src/components/bottomSheetModal/types.d.ts @@ -35,6 +35,13 @@ export interface BottomSheetModalProps */ enableDismissOnClose?: boolean; + /** + * Add a custom wrapper like FullWindowOverlay, allow to fix issue like https://github.com/gorhom/react-native-bottom-sheet/issues/832 + * @type React.ComponentType + * @default undefined + */ + bottomSheetWrapper?: React.ComponentType>; + // callbacks /** * Callback when the modal dismissed. diff --git a/src/components/fullWindowOverlay/FullWindowOverlay.tsx b/src/components/fullWindowOverlay/FullWindowOverlay.tsx deleted file mode 100644 index 63d1ade1f..000000000 --- a/src/components/fullWindowOverlay/FullWindowOverlay.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { ComponentProps, ReactNode } from 'react'; -import { View, Platform } from 'react-native'; - -// react-native-screens is an optional peer dependency -let RNScreens: { - FullWindowOverlay: React.ComponentType<{ - children: ReactNode; - }>; -} | null = null; -try { - RNScreens = require('react-native-screens'); -} catch {} - -function FullWindowOverlay({ children, ...rest }: ComponentProps) { - // check if react-native-screens is installed - if (!RNScreens) { - return <>{children}; - } - - // avoid warning from react-native-screens saying FullWindowOverlay is only available on iOS - if (Platform.OS === 'android') { - return {children}; - } - - return ( - - {children} - - ); -} - -export default FullWindowOverlay; diff --git a/src/components/fullWindowOverlay/index.ts b/src/components/fullWindowOverlay/index.ts deleted file mode 100644 index 632efd089..000000000 --- a/src/components/fullWindowOverlay/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FullWindowOverlay'; diff --git a/yarn.lock b/yarn.lock index 7d9532bba..3ef8206c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7733,11 +7733,6 @@ react-devtools-core@^4.0.6: 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, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -7794,14 +7789,6 @@ react-native-reanimated@^2.8.0: setimmediate "^1.0.5" string-hash-64 "^1.0.3" -react-native-screens@^3.20.0: - version "3.20.0" - resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.20.0.tgz#4d154177395e5541387d9a05bc2e12e54d2fb5b1" - integrity sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg== - dependencies: - react-freeze "^1.0.0" - warn-once "^0.1.0" - react-native@^0.62.2: version "0.62.3" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.62.3.tgz#9a2e96af3dedd0723c8657831eec4ed3c30f3299" @@ -9430,11 +9417,6 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" -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" From d55a1210c3bdb41ee47c7be7f188c31a6cb93b76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Tue, 6 Jun 2023 12:07:20 +0200 Subject: [PATCH 3/3] fix: edit regardless of the comments --- CHANGELOG.md | 4 ---- src/components/bottomSheetModal/BottomSheetModal.tsx | 6 +++--- src/components/bottomSheetModal/types.d.ts | 5 +++-- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dbc10bfc2..9f2efa3fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,5 @@ ## Changelog -## [Unreleased] - -- Add `bottomSheetWrapper` prop for `BottomSheetModal` component (#832)(by @magrinj) - ### [v4.4.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.1...v4.4.7) - #### Fixes diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index e0214bd14..d41a13590 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -45,7 +45,7 @@ const BottomSheetModalComponent = forwardRef< snapPoints, enablePanDownToClose = true, animateOnMount = true, - bottomSheetWrapper: BottomSheetWrapper = React.Fragment, + containerComponent: ContainerComponent = React.Fragment, // callbacks onChange: _providedOnChange, @@ -376,7 +376,7 @@ const BottomSheetModalComponent = forwardRef< handleOnUpdate={handlePortalRender} handleOnUnmount={handlePortalOnUnmount} > - + - + ) : null; }); diff --git a/src/components/bottomSheetModal/types.d.ts b/src/components/bottomSheetModal/types.d.ts index 58023ad1f..bc1e71a4e 100644 --- a/src/components/bottomSheetModal/types.d.ts +++ b/src/components/bottomSheetModal/types.d.ts @@ -36,11 +36,12 @@ export interface BottomSheetModalProps enableDismissOnClose?: boolean; /** - * Add a custom wrapper like FullWindowOverlay, allow to fix issue like https://github.com/gorhom/react-native-bottom-sheet/issues/832 + * Add a custom container like FullWindowOverlay + * allow to fix issue like https://github.com/gorhom/react-native-bottom-sheet/issues/832 * @type React.ComponentType * @default undefined */ - bottomSheetWrapper?: React.ComponentType>; + containerComponent?: React.ComponentType>; // callbacks /**