diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index 75a9f9be..8f8a4bde 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/src/components/bottomSheet/BottomSheet.tsx @@ -378,6 +378,14 @@ const BottomSheetComponent = forwardRef( keyboardBehavior, ]); const animatedScrollableState = useDerivedValue(() => { + /** + * if user had disabled content panning gesture, then we unlock + * the scrollable state. + */ + if (!enableContentPanningGesture) { + return SCROLLABLE_STATE.UNLOCKED; + } + /** * if scrollable override state is set, then we just return its value. */ @@ -414,6 +422,7 @@ const BottomSheetComponent = forwardRef( return SCROLLABLE_STATE.LOCKED; }, [ + enableContentPanningGesture, animatedAnimationState.value, animatedKeyboardState.value, animatedScrollableOverrideState.value, @@ -1821,6 +1830,10 @@ const BottomSheetComponent = forwardRef( }, }); } + + const DraggableView = enableContentPanningGesture + ? BottomSheetDraggableView + : Animated.View; return ( @@ -1858,7 +1871,7 @@ const BottomSheetComponent = forwardRef( accessibilityRole={_providedAccessibilityRole ?? undefined} accessibilityLabel={_providedAccessibilityLabel ?? undefined} > - @@ -1869,7 +1882,7 @@ const BottomSheetComponent = forwardRef( footerComponent={footerComponent} /> )} - + { - return Gesture.Simultaneous( - Gesture.Native().shouldCancelWhenOutside(false), - scrollableGesture, + const gesture = useMemo( + () => draggableGesture - ); - }, [draggableGesture, scrollableGesture]); + ? Gesture.Native() + // @ts-ignore + .simultaneousWithExternalGesture( + draggableGesture, + scrollableGesture + ) + .shouldCancelWhenOutside(true) + : undefined, + [draggableGesture, scrollableGesture] + ); + //#endregion // render + if (gesture) { + return ( + + + + ); + } return ( - - - + ); } diff --git a/src/components/bottomSheetScrollable/BottomSheetDraggableScrollable.tsx b/src/components/bottomSheetScrollable/BottomSheetDraggableScrollable.tsx new file mode 100644 index 00000000..92d035a9 --- /dev/null +++ b/src/components/bottomSheetScrollable/BottomSheetDraggableScrollable.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { + GestureDetector, + type SimultaneousGesture, +} from 'react-native-gesture-handler'; + +interface BottomSheetDraggableScrollableProps { + scrollableGesture?: SimultaneousGesture; + children: React.ReactNode; +} + +export function BottomSheetDraggableScrollable({ + scrollableGesture, + children, +}: BottomSheetDraggableScrollableProps) { + if (scrollableGesture) { + return ( + {children} + ); + } + + return children; +} diff --git a/src/components/bottomSheetScrollable/ScrollableContainer.android.tsx b/src/components/bottomSheetScrollable/ScrollableContainer.android.tsx index 85b887fa..1f944e06 100644 --- a/src/components/bottomSheetScrollable/ScrollableContainer.android.tsx +++ b/src/components/bottomSheetScrollable/ScrollableContainer.android.tsx @@ -1,9 +1,7 @@ import React, { forwardRef } from 'react'; -import { - GestureDetector, - type SimultaneousGesture, -} from 'react-native-gesture-handler'; +import type { SimultaneousGesture } from 'react-native-gesture-handler'; import BottomSheetRefreshControl from '../bottomSheetRefreshControl'; +import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable'; import { styles } from './styles'; interface ScrollableContainerProps { @@ -35,17 +33,17 @@ export const ScrollableContainer = forwardRef( ref ) { const Scrollable = ( - + - + ); return onRefresh ? ( {Scrollable} diff --git a/src/components/bottomSheetScrollable/ScrollableContainer.tsx b/src/components/bottomSheetScrollable/ScrollableContainer.tsx index 64a56d7e..ab3bc59b 100644 --- a/src/components/bottomSheetScrollable/ScrollableContainer.tsx +++ b/src/components/bottomSheetScrollable/ScrollableContainer.tsx @@ -1,11 +1,9 @@ import React, { type FC, forwardRef } from 'react'; -import { - GestureDetector, - type SimultaneousGesture, -} from 'react-native-gesture-handler'; +import type { SimultaneousGesture } from 'react-native-gesture-handler'; +import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable'; interface ScrollableContainerProps { - nativeGesture: SimultaneousGesture; + nativeGesture?: SimultaneousGesture; // biome-ignore lint/suspicious/noExplicitAny: 🤷‍♂️ ScrollableComponent: FC; } @@ -16,9 +14,9 @@ export const ScrollableContainer = forwardRef( ref ) { return ( - + - + ); } ); diff --git a/src/components/bottomSheetScrollable/ScrollableContainer.web.tsx b/src/components/bottomSheetScrollable/ScrollableContainer.web.tsx index db6ade49..bfb69554 100644 --- a/src/components/bottomSheetScrollable/ScrollableContainer.web.tsx +++ b/src/components/bottomSheetScrollable/ScrollableContainer.web.tsx @@ -1,9 +1,7 @@ import React, { type ComponentProps, forwardRef, useCallback } from 'react'; -import { - GestureDetector, - type SimultaneousGesture, -} from 'react-native-gesture-handler'; +import type { SimultaneousGesture } from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; +import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable'; interface ScrollableContainerProps { nativeGesture: SimultaneousGesture; @@ -25,12 +23,12 @@ export const ScrollableContainer = forwardRef< [animatedProps] ); return ( - + - + ); }); diff --git a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx index d385b616..47f4a191 100644 --- a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx +++ b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx @@ -64,10 +64,11 @@ export function createBottomSheetScrollableComponent( animatedContentHeight, animatedScrollableState, enableDynamicSizing, + enableContentPanningGesture, } = useBottomSheetInternal(); //#endregion - if (!draggableGesture) { + if (!draggableGesture && enableContentPanningGesture) { throw "'Scrollable' cannot be used out of the BottomSheet!"; } @@ -83,12 +84,14 @@ export function createBottomSheetScrollableComponent( [animatedScrollableState, showsVerticalScrollIndicator] ); - const nativeGesture = useMemo( + const scrollableGesture = useMemo( () => - Gesture.Native() - // @ts-ignore - .simultaneousWithExternalGesture(draggableGesture) - .shouldCancelWhenOutside(false), + draggableGesture + ? Gesture.Native() + // @ts-ignore + .simultaneousWithExternalGesture(draggableGesture) + .shouldCancelWhenOutside(false) + : undefined, [draggableGesture] ); //#endregion @@ -144,7 +147,7 @@ export function createBottomSheetScrollableComponent( return (