From d41eda227e76b89432164ec8dc5cc1ebd5f638ee Mon Sep 17 00:00:00 2001 From: stropho <3704482+stropho@users.noreply.github.com> Date: Sun, 30 Apr 2023 15:33:18 +0200 Subject: [PATCH 01/26] chore: fixed types (#1123)(by @stropho) * fix: react 18 types * fix: allow providing whatever version of react types the library consumer needs as optional peer dependecies --- package.json | 10 ++++++ src/components/bottomSheet/types.d.ts | 4 +-- src/components/bottomSheetFooter/types.d.ts | 6 ++-- .../bottomSheetModal/BottomSheetModal.tsx | 34 +++++++++++-------- src/components/bottomSheetModal/types.d.ts | 4 +-- src/hooks/useBottomSheetDynamicSnapPoints.ts | 7 +++- src/hooks/useStableCallback.ts | 2 +- 7 files changed, 44 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 362ad2e9f..ac4475d0a 100644 --- a/package.json +++ b/package.json @@ -67,11 +67,21 @@ "typescript": "^4.2.4" }, "peerDependencies": { + "@types/react": "*", + "@types/react-native": "*", "react": "*", "react-native": "*", "react-native-gesture-handler": ">=1.10.1", "react-native-reanimated": ">=2.2.0" }, + "peerDependenciesMeta": { + "@types/react-native": { + "optional": true + }, + "@types/react": { + "optional": true + } + }, "react-native-builder-bob": { "source": "src", "output": "lib", diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts index c489981e1..7b514cf16 100644 --- a/src/components/bottomSheet/types.d.ts +++ b/src/components/bottomSheet/types.d.ts @@ -283,9 +283,9 @@ export interface BottomSheetProps footerComponent?: React.FC; /** * A scrollable node or normal view. - * @type React.ReactNode[] | React.ReactNode + * @type (() => React.ReactElement) | React.ReactNode[] | React.ReactNode */ - children: (() => React.ReactNode) | React.ReactNode[] | React.ReactNode; + children: (() => React.ReactElement) | React.ReactNode[] | React.ReactNode; //#endregion //#region private diff --git a/src/components/bottomSheetFooter/types.d.ts b/src/components/bottomSheetFooter/types.d.ts index f523065f7..14c52e86d 100644 --- a/src/components/bottomSheetFooter/types.d.ts +++ b/src/components/bottomSheetFooter/types.d.ts @@ -1,4 +1,4 @@ -import type { ReactNode } from 'react'; +import type { ReactElement, ReactNode } from 'react'; import { ViewStyle } from 'react-native'; import type Animated from 'react-native-reanimated'; @@ -31,7 +31,7 @@ export interface BottomSheetDefaultFooterProps extends BottomSheetFooterProps { /** * Component to be placed in the footer. * - * @type {ReactNode | ReactNode[]} + * @type {ReactNode | ReactNode[] | (() => ReactElement)} */ - children?: ReactNode | ReactNode[]; + children?: ReactNode | ReactNode[] | (() => ReactElement); } diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index e0070c5ce..8ee4f05c7 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -142,30 +142,36 @@ const BottomSheetModalComponent = forwardRef< } bottomSheetRef.current?.snapToPosition(...args); }, []); - const handleExpand = useCallback((...args) => { + const handleExpand = useCallback((...args) => { if (minimized.current) { return; } bottomSheetRef.current?.expand(...args); }, []); - const handleCollapse = useCallback((...args) => { - if (minimized.current) { - return; - } - bottomSheetRef.current?.collapse(...args); - }, []); - const handleClose = useCallback((...args) => { + const handleCollapse = useCallback( + (...args) => { + if (minimized.current) { + return; + } + bottomSheetRef.current?.collapse(...args); + }, + [] + ); + const handleClose = useCallback((...args) => { if (minimized.current) { return; } bottomSheetRef.current?.close(...args); }, []); - const handleForceClose = useCallback((...args) => { - if (minimized.current) { - return; - } - bottomSheetRef.current?.forceClose(...args); - }, []); + const handleForceClose = useCallback( + (...args) => { + if (minimized.current) { + return; + } + bottomSheetRef.current?.forceClose(...args); + }, + [] + ); //#endregion //#region bottom sheet modal methods diff --git a/src/components/bottomSheetModal/types.d.ts b/src/components/bottomSheetModal/types.d.ts index 9d104e74b..fc1d90817 100644 --- a/src/components/bottomSheetModal/types.d.ts +++ b/src/components/bottomSheetModal/types.d.ts @@ -44,10 +44,10 @@ export interface BottomSheetModalProps /** * A scrollable node or normal view. - * @type React.ReactNode[] | React.ReactNode + * @type React.ReactNode[] | React.ReactNode | (({ data: any }?) => React.ReactElement) */ children: - | (({ data: any }?) => React.ReactNode) + | (({ data: any }?) => React.ReactElement) | React.ReactNode[] | React.ReactNode; } diff --git a/src/hooks/useBottomSheetDynamicSnapPoints.ts b/src/hooks/useBottomSheetDynamicSnapPoints.ts index a1c25735d..5e19bd683 100644 --- a/src/hooks/useBottomSheetDynamicSnapPoints.ts +++ b/src/hooks/useBottomSheetDynamicSnapPoints.ts @@ -39,13 +39,18 @@ export const useBottomSheetDynamicSnapPoints = ( ); }, []); + type HandleContentLayoutProps = { + nativeEvent: { + layout: { height: number }; + }; + }; // callbacks const handleContentLayout = useCallback( ({ nativeEvent: { layout: { height }, }, - }) => { + }: HandleContentLayoutProps) => { animatedContentHeight.value = height; }, [animatedContentHeight] diff --git a/src/hooks/useStableCallback.ts b/src/hooks/useStableCallback.ts index a868620d5..1c788ab72 100644 --- a/src/hooks/useStableCallback.ts +++ b/src/hooks/useStableCallback.ts @@ -8,7 +8,7 @@ type Callback = (...args: any[]) => any; export const useStableCallback = (callback: Callback) => { const callbackRef = useRef(); const memoCallback = useCallback( - (...args) => callbackRef.current && callbackRef.current(...args), + (...args: any) => callbackRef.current && callbackRef.current(...args), [] ); useEffect(() => { From 9c5af584516690cb5143caabb7722e0c2340cc57 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 30 Apr 2023 15:45:49 +0200 Subject: [PATCH 02/26] fix(BottomSheetScrollView): updated scroll responders props type (#1335)(by @eps1lon) * fix(BottomSheetScrollView): Scroll responder types use mixin * chore: removed unused import --------- Co-authored-by: gorhom --- src/components/bottomSheetScrollable/types.d.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/bottomSheetScrollable/types.d.ts b/src/components/bottomSheetScrollable/types.d.ts index 2822dbafc..f5763681c 100644 --- a/src/components/bottomSheetScrollable/types.d.ts +++ b/src/components/bottomSheetScrollable/types.d.ts @@ -6,7 +6,6 @@ import type { RefObject, } from 'react'; import type { - ScrollView, VirtualizedListProps, ScrollViewProps, FlatListProps, @@ -15,6 +14,7 @@ import type { View, ScrollViewComponent, NodeHandle, + ScrollResponderMixin, } from 'react-native'; import type Animated from 'react-native-reanimated'; import type { ScrollEventsHandlersHookType } from '../../types'; @@ -114,7 +114,7 @@ export interface BottomSheetFlatListMethods { /** * Provides a handle to the underlying scroll responder. */ - getScrollResponder: () => ReactNode | null | undefined; + getScrollResponder: () => ScrollResponderMixin | null | undefined; /** * Provides a reference to the underlying host component @@ -175,7 +175,7 @@ export interface BottomSheetScrollViewMethods { * implement this method so that they can be composed while providing access * to the underlying scroll responder's methods. */ - getScrollResponder(): ReactNode; + getScrollResponder(): ScrollResponderMixin; getScrollableNode(): any; @@ -231,7 +231,7 @@ export interface BottomSheetSectionListMethods { /** * Provides a handle to the underlying scroll responder. */ - getScrollResponder(): ScrollView | undefined; + getScrollResponder(): ScrollResponderMixin | undefined; /** * Provides a handle to the underlying scroll node. From 94cf11eb43f9cc2a356da7e7967ec63baf390a74 Mon Sep 17 00:00:00 2001 From: gorhom Date: Sun, 30 Apr 2023 15:50:45 +0200 Subject: [PATCH 03/26] fix: fixed keyboard dismissing issue with Reanimated v3 (#1346)(by @janicduplessis) * Fix reanimated freezing Keyboard module --- .../customGestureHandling/useCustomGestureEventsHandlers.ts | 4 +++- src/hooks/useGestureEventsHandlersDefault.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts b/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts index c9b80c4a5..a171012ed 100644 --- a/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts +++ b/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts @@ -12,6 +12,8 @@ import { } from '@gorhom/bottom-sheet'; import { useGestureTranslationY } from './GestureTranslationContext'; +const dismissKeyboardOnJs = runOnJS(Keyboard.dismiss); + export const useCustomGestureEventsHandlers = () => { // hooks const gestureTranslationY = useGestureTranslationY(); @@ -266,7 +268,7 @@ export const useCustomGestureEventsHandlers = () => { absoluteY > WINDOW_HEIGHT - animatedKeyboardHeight.value ) ) { - runOnJS(Keyboard.dismiss)(); + dismissKeyboardOnJs(); } } diff --git a/src/hooks/useGestureEventsHandlersDefault.tsx b/src/hooks/useGestureEventsHandlersDefault.tsx index b44bfa510..a0b759ca8 100644 --- a/src/hooks/useGestureEventsHandlersDefault.tsx +++ b/src/hooks/useGestureEventsHandlersDefault.tsx @@ -21,6 +21,8 @@ type GestureEventContextType = { isScrollablePositionLocked: boolean; }; +const dismissKeyboardOnJs = runOnJS(Keyboard.dismiss); + export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType = () => { //#region variables @@ -296,7 +298,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType = absoluteY > WINDOW_HEIGHT - animatedKeyboardHeight.value ) ) { - runOnJS(Keyboard.dismiss)(); + dismissKeyboardOnJs(); } } From 2e558d13fdb52a83d5b465779ec3517fcfb131c2 Mon Sep 17 00:00:00 2001 From: gorhom Date: Sun, 30 Apr 2023 16:29:05 +0200 Subject: [PATCH 04/26] chore: release v4.4.6 --- CHANGELOG.md | 29 ++++++++++++++++++++++++++++- package.json | 2 +- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2975b1c59..785bb913f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,33 @@ ## Changelog -### [v4.4.5](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.4...v4.4.5) - +### [v4.4.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.0...v4.4.6) - + +#### Fixes + +- fixed keyboard dismissing issue with Reanimated v3 (#1346)(by @janicduplessis) ([`94cf11e`](https://github.com/gorhom/react-native-bottom-sheet/commit/94cf11eb43f9cc2a356da7e7967ec63baf390a74)) +- (BottomSheetScrollView): updated scroll responders props type (#1335)(by @eps1lon) ([`9c5af58`](https://github.com/gorhom/react-native-bottom-sheet/commit/9c5af584516690cb5143caabb7722e0c2340cc57)) + +#### Chores And Housekeeping + +- fixed types (#1123)(by @stropho) ([`d41eda2`](https://github.com/gorhom/react-native-bottom-sheet/commit/d41eda227e76b89432164ec8dc5cc1ebd5f638ee)) + +### [v5.0.0-alpha.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.5...v5.0.0-alpha.0) - 18 March 2023 + +#### New Features + +- added web support (#1150) ([`a996b4a`](https://github.com/gorhom/react-native-bottom-sheet/commit/a996b4aa68139136ec75e0921025d235471c838d)) +- rewrite gesture apis with gesture handler 2 (#1126) ([`6a4d296`](https://github.com/gorhom/react-native-bottom-sheet/commit/6a4d2967684b01e28f23b1b35afbb4cc4dabaf1d)) + +#### Fixes + +- (#1119): fixed race condition between onmount and keyboard animations ([`a1ec74d`](https://github.com/gorhom/react-native-bottom-sheet/commit/a1ec74dbbc85476bb39f3637e9a97214e0cad9a0)) +- correctly check for non-null object (#1122)(by @stropho) ([`54abf0c`](https://github.com/gorhom/react-native-bottom-sheet/commit/54abf0c0832d1451dfe11be212fc5f938ff5c5fd)) + +#### Chores And Housekeeping + +- updated reanimated to v3 (#1324) ([`4829316`](https://github.com/gorhom/react-native-bottom-sheet/commit/4829316beeff95c9e2efa5fbfdfcf7ef37b4af60)) + +### [v4.4.5](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.4...v4.4.5) - 19 September 2022 #### Refactoring and Updates diff --git a/package.json b/package.json index ac4475d0a..4e95e62b8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gorhom/bottom-sheet", - "version": "4.4.5", + "version": "4.4.6", "description": "A performant interactive bottom sheet with fully configurable options 🚀", "main": "lib/commonjs/index", "module": "lib/module/index", From 235466fef552f2cf7cbbafb06029cdd879624606 Mon Sep 17 00:00:00 2001 From: beka <40486471+beqramo@users.noreply.github.com> Date: Sun, 4 Jun 2023 15:36:15 +0100 Subject: [PATCH 05/26] fix: crash on swipe down (#1367)(by @beqramo) * fix: crash on swipe down * fix: keyboard dismiss on JS thread * fix: call the keyboard dismiss method --------- Co-authored-by: Mo Gorhom --- src/hooks/useGestureEventsHandlersDefault.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useGestureEventsHandlersDefault.tsx b/src/hooks/useGestureEventsHandlersDefault.tsx index a0b759ca8..43b7ee876 100644 --- a/src/hooks/useGestureEventsHandlersDefault.tsx +++ b/src/hooks/useGestureEventsHandlersDefault.tsx @@ -21,7 +21,7 @@ type GestureEventContextType = { isScrollablePositionLocked: boolean; }; -const dismissKeyboardOnJs = runOnJS(Keyboard.dismiss); +const dismissKeyboard = Keyboard.dismiss export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType = () => { @@ -298,7 +298,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType = absoluteY > WINDOW_HEIGHT - animatedKeyboardHeight.value ) ) { - dismissKeyboardOnJs(); + runOnJS(dismissKeyboard)(); } } From 92ad84283afb389ee23768f0c29e7808af4b6b0c Mon Sep 17 00:00:00 2001 From: Mo Gorhom Date: Sun, 4 Jun 2023 17:38:56 +0200 Subject: [PATCH 06/26] fix: resume close animation when container gets resized (#1374) (#1392) --- src/components/bottomSheet/BottomSheet.tsx | 30 +++++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index b16644070..3b1264fb6 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/src/components/bottomSheet/BottomSheet.tsx @@ -679,6 +679,7 @@ const BottomSheetComponent = forwardRef( currentPosition: animatedPosition.value, position, velocity, + animatedContainerHeight: animatedContainerHeight.value, }, }); @@ -1291,6 +1292,31 @@ const BottomSheetComponent = forwardRef( const _previousSnapPoints = _previousResult?.snapPoints; const _previousContainerHeight = _previousResult?.containerHeight; + let nextPosition; + let animationConfig; + let animationSource = ANIMATION_SOURCE.SNAP_POINT_CHANGE; + + /** + * if the bottom sheet is closing and the container gets resized, + * then we restart the closing animation to the new position. + */ + if ( + animatedAnimationState.value === ANIMATION_STATE.RUNNING && + animatedNextPositionIndex.value === -1 && + _previousContainerHeight !== containerHeight + ) { + animationSource = ANIMATION_SOURCE.CONTAINER_RESIZE; + animationConfig = { + duration: 0, + }; + animateToPosition( + containerHeight, + animationSource, + 0, + animationConfig + ); + } + if ( JSON.stringify(snapPoints) === JSON.stringify(_previousSnapPoints) || !isLayoutCalculated.value || @@ -1308,10 +1334,6 @@ const BottomSheetComponent = forwardRef( }, }); - let nextPosition; - let animationConfig; - let animationSource = ANIMATION_SOURCE.SNAP_POINT_CHANGE; - /** * if snap points changed while sheet is animating, then * we stop the animation and animate to the updated point. From f25cec28b17467c0f7eea5d84cafe653023cdf57 Mon Sep 17 00:00:00 2001 From: gorhom Date: Sun, 4 Jun 2023 17:45:35 +0200 Subject: [PATCH 07/26] chore: release v4.4.7 --- CHANGELOG.md | 30 +++++++++++++++++++++++++++--- package.json | 2 +- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 785bb913f..9f2efa3fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,17 +1,30 @@ ## Changelog -### [v4.4.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.0...v4.4.6) - +### [v4.4.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.1...v4.4.7) - #### Fixes +- resume close animation when container gets resized (#1374) (#1392) ([`92ad842`](https://github.com/gorhom/react-native-bottom-sheet/commit/92ad84283afb389ee23768f0c29e7808af4b6b0c)) - fixed keyboard dismissing issue with Reanimated v3 (#1346)(by @janicduplessis) ([`94cf11e`](https://github.com/gorhom/react-native-bottom-sheet/commit/94cf11eb43f9cc2a356da7e7967ec63baf390a74)) - (BottomSheetScrollView): updated scroll responders props type (#1335)(by @eps1lon) ([`9c5af58`](https://github.com/gorhom/react-native-bottom-sheet/commit/9c5af584516690cb5143caabb7722e0c2340cc57)) +- crash on swipe down (#1367)(by @beqramo) ([`235466f`](https://github.com/gorhom/react-native-bottom-sheet/commit/235466fef552f2cf7cbbafb06029cdd879624606)) #### Chores And Housekeeping - fixed types (#1123)(by @stropho) ([`d41eda2`](https://github.com/gorhom/react-native-bottom-sheet/commit/d41eda227e76b89432164ec8dc5cc1ebd5f638ee)) -### [v5.0.0-alpha.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.5...v5.0.0-alpha.0) - 18 March 2023 +### [v5.0.0-alpha.1](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.0...v5.0.0-alpha.1) - 30 April 2023 + +#### Fixes + +- (BottomSheetScrollView): updated scroll responders props type (#1335)(by @eps1lon) ([`e42fafc`](https://github.com/gorhom/react-native-bottom-sheet/commit/e42fafcc492d01665c296bf551a6a264eb866fc5)) +- fixed keyboard dismissing issue with Reanimated v3 (#1346)(by @janicduplessis) ([`1d1a464`](https://github.com/gorhom/react-native-bottom-sheet/commit/1d1a46489bede1d3f119df2fb6f467e778461c39)) + +#### Chores And Housekeeping + +- fixed types (#1123)(by @stropho) ([`b440964`](https://github.com/gorhom/react-native-bottom-sheet/commit/b44096451d4fed81be7f08b0edf638e4a1c42ccd)) + +### [v5.0.0-alpha.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.6...v5.0.0-alpha.0) - 18 March 2023 #### New Features @@ -21,12 +34,23 @@ #### Fixes - (#1119): fixed race condition between onmount and keyboard animations ([`a1ec74d`](https://github.com/gorhom/react-native-bottom-sheet/commit/a1ec74dbbc85476bb39f3637e9a97214e0cad9a0)) -- correctly check for non-null object (#1122)(by @stropho) ([`54abf0c`](https://github.com/gorhom/react-native-bottom-sheet/commit/54abf0c0832d1451dfe11be212fc5f938ff5c5fd)) #### Chores And Housekeeping - updated reanimated to v3 (#1324) ([`4829316`](https://github.com/gorhom/react-native-bottom-sheet/commit/4829316beeff95c9e2efa5fbfdfcf7ef37b4af60)) +### [v4.4.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.5...v4.4.6) - 30 April 2023 + +#### Fixes + +- fixed keyboard dismissing issue with Reanimated v3 (#1346)(by @janicduplessis) ([`94cf11e`](https://github.com/gorhom/react-native-bottom-sheet/commit/94cf11eb43f9cc2a356da7e7967ec63baf390a74)) +- (BottomSheetScrollView): updated scroll responders props type (#1335)(by @eps1lon) ([`9c5af58`](https://github.com/gorhom/react-native-bottom-sheet/commit/9c5af584516690cb5143caabb7722e0c2340cc57)) +- correctly check for non-null object (#1122)(by @stropho) ([`54abf0c`](https://github.com/gorhom/react-native-bottom-sheet/commit/54abf0c0832d1451dfe11be212fc5f938ff5c5fd)) + +#### Chores And Housekeeping + +- fixed types (#1123)(by @stropho) ([`d41eda2`](https://github.com/gorhom/react-native-bottom-sheet/commit/d41eda227e76b89432164ec8dc5cc1ebd5f638ee)) + ### [v4.4.5](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.4...v4.4.5) - 19 September 2022 #### Refactoring and Updates diff --git a/package.json b/package.json index 4e95e62b8..a34ecc319 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gorhom/bottom-sheet", - "version": "4.4.6", + "version": "4.4.7", "description": "A performant interactive bottom sheet with fully configurable options 🚀", "main": "lib/commonjs/index", "module": "lib/module/index", From ea03e78f40d2c5c028467ebf6f1959fb5381b93d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Kueny?= Date: Fri, 23 Jun 2023 21:00:01 +0200 Subject: [PATCH 08/26] fix: updated scrollables mocks with ReactNative list equivalent (#1394)(by @gkueny) --- mock.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/mock.js b/mock.js index d4c85a791..70131c143 100644 --- a/mock.js +++ b/mock.js @@ -9,6 +9,7 @@ */ const React = require('react'); +const ReactNative = require('react-native'); const NOOP = () => {}; const NOOP_VALUE = { value: 0 }; @@ -104,10 +105,10 @@ const useBottomSheetDynamicSnapPoints = () => ({ module.exports = { BottomSheetView: BottomSheetComponent, - BottomSheetScrollView: BottomSheetComponent, - BottomSheetSectionList: BottomSheetComponent, - BottomSheetFlatList: BottomSheetComponent, - BottomSheetVirtualizedList: BottomSheetComponent, + BottomSheetScrollView: ReactNative.ScrollView, + BottomSheetSectionList: ReactNative.SectionList, + BottomSheetFlatList: ReactNative.FlatList, + BottomSheetVirtualizedList: ReactNative.VirtualizedList, BottomSheetModalProvider, BottomSheetModal, From 1ecad692d9477f7c7f8d7f54fcf7f990aabe5a04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Fri, 23 Jun 2023 21:13:21 +0200 Subject: [PATCH 09/26] fix(bottom-sheet-modal): added container component prop to modal (#1309)(by @magrinj) * fix: bottom sheet modal appear behind native views * feat: add bottomSheetWrapper prop to specify a custom wrapper component * fix: edit regardless of the comments --- .../bottomSheetModal/BottomSheetModal.tsx | 37 ++++++++++--------- src/components/bottomSheetModal/types.d.ts | 8 ++++ 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index 8ee4f05c7..d41a13590 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -45,6 +45,7 @@ const BottomSheetModalComponent = forwardRef< snapPoints, enablePanDownToClose = true, animateOnMount = true, + containerComponent: ContainerComponent = React.Fragment, // callbacks onChange: _providedOnChange, @@ -375,23 +376,25 @@ const BottomSheetModalComponent = forwardRef< handleOnUpdate={handlePortalRender} handleOnUnmount={handlePortalOnUnmount} > - : Content - } - $modal={true} - /> + + : Content + } + $modal={true} + /> + ) : null; }); diff --git a/src/components/bottomSheetModal/types.d.ts b/src/components/bottomSheetModal/types.d.ts index fc1d90817..bc1e71a4e 100644 --- a/src/components/bottomSheetModal/types.d.ts +++ b/src/components/bottomSheetModal/types.d.ts @@ -35,6 +35,14 @@ export interface BottomSheetModalProps */ enableDismissOnClose?: boolean; + /** + * 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 + */ + containerComponent?: React.ComponentType>; + // callbacks /** * Callback when the modal dismissed. From 218e006a4a015625fcf424b99f432319daf88aad Mon Sep 17 00:00:00 2001 From: beka <40486471+beqramo@users.noreply.github.com> Date: Sat, 15 Jul 2023 11:26:27 +0100 Subject: [PATCH 10/26] fix: updated containerOffset top value to default to 0 (#1420)(by @beqramo) * fix: keyboard on focus * fix: updated containerOffset top value to default to 0 --------- Co-authored-by: Mo Gorhom --- src/components/bottomSheetContainer/BottomSheetContainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/src/components/bottomSheetContainer/BottomSheetContainer.tsx index 9d42ef185..54eab00b6 100644 --- a/src/components/bottomSheetContainer/BottomSheetContainer.tsx +++ b/src/components/bottomSheetContainer/BottomSheetContainer.tsx @@ -49,12 +49,12 @@ function BottomSheetContainerComponent({ containerRef.current?.measure( (_x, _y, _width, _height, _pageX, pageY) => { containerOffset.value = { - top: pageY, + top: pageY ?? 0, left: 0, right: 0, bottom: Math.max( 0, - WINDOW_HEIGHT - (pageY + height + (StatusBar.currentHeight ?? 0)) + WINDOW_HEIGHT - ((pageY ?? 0) + height + (StatusBar.currentHeight ?? 0)) ), }; } From 6a5034cd83c24db65a12444ba8d9e949fd64f316 Mon Sep 17 00:00:00 2001 From: Dmitry Koplyarov Date: Wed, 6 Sep 2023 08:56:08 +0100 Subject: [PATCH 11/26] fix(BottomSheetTextInput): reset shouldHandleKeyboardEvents on unmount (#1495)(by @koplyarov) --- .../bottomSheetTextInput/BottomSheetTextInput.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx b/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx index eae09f7d4..d5c8727e0 100644 --- a/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx +++ b/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx @@ -1,4 +1,4 @@ -import React, { memo, useCallback, forwardRef } from 'react'; +import React, { memo, useCallback, forwardRef, useEffect } from 'react'; import { TextInput } from 'react-native-gesture-handler'; import { useBottomSheetInternal } from '../../hooks'; import type { BottomSheetTextInputProps } from './types'; @@ -9,6 +9,13 @@ const BottomSheetTextInputComponent = forwardRef< >(({ onFocus, onBlur, ...rest }, ref) => { //#region hooks const { shouldHandleKeyboardEvents } = useBottomSheetInternal(); + + useEffect(() => { + return () => { + // Reset the flag on unmount + shouldHandleKeyboardEvents.value = false; + }; + }, [shouldHandleKeyboardEvents]); //#endregion //#region callbacks From 43de6d7b95e941b3a977ecf39f887ee5c78ce6eb Mon Sep 17 00:00:00 2001 From: gorhom Date: Wed, 6 Sep 2023 10:03:37 +0200 Subject: [PATCH 12/26] chore: release v4.4.8 --- CHANGELOG.md | 33 +++++++++++++++++++++++++++++++-- package.json | 2 +- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f2efa3fb..6db663d0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,18 +1,40 @@ ## Changelog -### [v4.4.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.1...v4.4.7) - +### [v4.4.8](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.3...v4.4.8) - #### Fixes - resume close animation when container gets resized (#1374) (#1392) ([`92ad842`](https://github.com/gorhom/react-native-bottom-sheet/commit/92ad84283afb389ee23768f0c29e7808af4b6b0c)) +- (bottom-sheet-modal): added container component prop to modal (#1309)(by @magrinj) ([`1ecad69`](https://github.com/gorhom/react-native-bottom-sheet/commit/1ecad692d9477f7c7f8d7f54fcf7f990aabe5a04)) +- (BottomSheetTextInput): reset shouldHandleKeyboardEvents on unmount (#1495)(by @koplyarov) ([`6a5034c`](https://github.com/gorhom/react-native-bottom-sheet/commit/6a5034cd83c24db65a12444ba8d9e949fd64f316)) +- updated scrollables mocks with ReactNative list equivalent (#1394)(by @gkueny) ([`ea03e78`](https://github.com/gorhom/react-native-bottom-sheet/commit/ea03e78f40d2c5c028467ebf6f1959fb5381b93d)) - fixed keyboard dismissing issue with Reanimated v3 (#1346)(by @janicduplessis) ([`94cf11e`](https://github.com/gorhom/react-native-bottom-sheet/commit/94cf11eb43f9cc2a356da7e7967ec63baf390a74)) - (BottomSheetScrollView): updated scroll responders props type (#1335)(by @eps1lon) ([`9c5af58`](https://github.com/gorhom/react-native-bottom-sheet/commit/9c5af584516690cb5143caabb7722e0c2340cc57)) +- updated containerOffset top value to default to 0 (#1420)(by @beqramo) ([`218e006`](https://github.com/gorhom/react-native-bottom-sheet/commit/218e006a4a015625fcf424b99f432319daf88aad)) - crash on swipe down (#1367)(by @beqramo) ([`235466f`](https://github.com/gorhom/react-native-bottom-sheet/commit/235466fef552f2cf7cbbafb06029cdd879624606)) #### Chores And Housekeeping - fixed types (#1123)(by @stropho) ([`d41eda2`](https://github.com/gorhom/react-native-bottom-sheet/commit/d41eda227e76b89432164ec8dc5cc1ebd5f638ee)) +### [v5.0.0-alpha.3](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.2...v5.0.0-alpha.3) - 25 June 2023 + +#### Fixes + +- resume close animation when container gets resized (#1374) (#1392) ([`1f69625`](https://github.com/gorhom/react-native-bottom-sheet/commit/1f69625e180fcec4d8d3dec436f8d5bb4eba476b)) +- (bottom-sheet-modal): added container component prop to modal (#1309)(by @magrinj) ([`67e1e09`](https://github.com/gorhom/react-native-bottom-sheet/commit/67e1e09acbc0e96e435a0c2247fa1e0bc19f91aa)) +- updated scrollables mocks with ReactNative list equivalent (#1394)(by @gkueny) ([`630f87f`](https://github.com/gorhom/react-native-bottom-sheet/commit/630f87ff6bd19c4dfc071783139c938eda3baf6c)) + +#### Chores And Housekeeping + +- updated react native and other deps (#1412) ([`549e461`](https://github.com/gorhom/react-native-bottom-sheet/commit/549e461530a91e1d7c95a5178bd2238ebf84df86)) + +### [v5.0.0-alpha.2](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.1...v5.0.0-alpha.2) - 4 June 2023 + +#### Fixes + +- crash on swipe down (#1367)(by @beqramo) ([`3ccbefc`](https://github.com/gorhom/react-native-bottom-sheet/commit/3ccbefc4d16558867d518f7e0306fbb4d1dbdbeb)) + ### [v5.0.0-alpha.1](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.0...v5.0.0-alpha.1) - 30 April 2023 #### Fixes @@ -24,7 +46,7 @@ - fixed types (#1123)(by @stropho) ([`b440964`](https://github.com/gorhom/react-native-bottom-sheet/commit/b44096451d4fed81be7f08b0edf638e4a1c42ccd)) -### [v5.0.0-alpha.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.6...v5.0.0-alpha.0) - 18 March 2023 +### [v5.0.0-alpha.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.7...v5.0.0-alpha.0) - 18 March 2023 #### New Features @@ -39,6 +61,13 @@ - updated reanimated to v3 (#1324) ([`4829316`](https://github.com/gorhom/react-native-bottom-sheet/commit/4829316beeff95c9e2efa5fbfdfcf7ef37b4af60)) +### [v4.4.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.6...v4.4.7) - 4 June 2023 + +#### Fixes + +- resume close animation when container gets resized (#1374) (#1392) ([`92ad842`](https://github.com/gorhom/react-native-bottom-sheet/commit/92ad84283afb389ee23768f0c29e7808af4b6b0c)) +- crash on swipe down (#1367)(by @beqramo) ([`235466f`](https://github.com/gorhom/react-native-bottom-sheet/commit/235466fef552f2cf7cbbafb06029cdd879624606)) + ### [v4.4.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.4.5...v4.4.6) - 30 April 2023 #### Fixes diff --git a/package.json b/package.json index a34ecc319..9b8756752 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gorhom/bottom-sheet", - "version": "4.4.7", + "version": "4.4.8", "description": "A performant interactive bottom sheet with fully configurable options 🚀", "main": "lib/commonjs/index", "module": "lib/module/index", From 7330c7c7e6a72aa3353fb83fd2b86543ad42b199 Mon Sep 17 00:00:00 2001 From: Mo Gorhom Date: Sun, 10 Sep 2023 10:43:55 +0200 Subject: [PATCH 13/26] feat: added dynamic sizing (#1513)(with @Eli-Nathan & @ororsatti) * feat: added dynamic sizing * chore: updated dynamic sizing example * chore: removed commented code * chore: added deprecated tag to useBottomSheetDynamicSnapPoints * chore: added extra description for snap points prop --- .../advanced/DynamicSnapPointExample.tsx | 21 +----- .../screens/modal/DynamicSnapPointExample.tsx | 22 +----- src/components/bottomSheet/BottomSheet.tsx | 46 ++++++++---- src/components/bottomSheet/constants.ts | 2 + src/components/bottomSheet/types.d.ts | 18 ++++- .../createBottomSheetScrollableComponent.tsx | 17 +++++ .../bottomSheetView/BottomSheetView.tsx | 37 ++++++++-- src/contexts/internal.ts | 1 + src/hooks/useBottomSheetDynamicSnapPoints.ts | 10 ++- src/hooks/useNormalizedSnapPoints.ts | 72 +++++++++++++------ src/hooks/usePropsValidator.ts | 20 ++++-- src/utilities/normalizeSnapPoint.ts | 5 +- 12 files changed, 178 insertions(+), 93 deletions(-) diff --git a/example/app/src/screens/advanced/DynamicSnapPointExample.tsx b/example/app/src/screens/advanced/DynamicSnapPointExample.tsx index fb9340225..8c3e63ecf 100644 --- a/example/app/src/screens/advanced/DynamicSnapPointExample.tsx +++ b/example/app/src/screens/advanced/DynamicSnapPointExample.tsx @@ -1,26 +1,16 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; import { View, StyleSheet, Text } from 'react-native'; -import BottomSheet, { - BottomSheetView, - useBottomSheetDynamicSnapPoints, -} from '@gorhom/bottom-sheet'; +import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { Button } from '../../components/button'; const DynamicSnapPointExample = () => { // state const [count, setCount] = useState(0); - const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []); // hooks const { bottom: safeBottomArea } = useSafeAreaInsets(); const bottomSheetRef = useRef(null); - const { - animatedHandleHeight, - animatedSnapPoints, - animatedContentHeight, - handleContentLayout, - } = useBottomSheetDynamicSnapPoints(initialSnapPoints); // callbacks const handleIncreaseContentPress = useCallback(() => { @@ -59,16 +49,11 @@ const DynamicSnapPointExample = () => {