Context
PR #1165 migrated BottomSheetDialog from the RNGH v1 API (PanGestureHandler / useAnimatedGestureHandler) to the RNGH v2 API (GestureDetector / Gesture.Pan()), required by the upgrade to react-native-gesture-handler ~2.28.0 and react-native-reanimated ~4.1.1.
Three follow-up items were identified during review:
1. panGestureHandlerProps type is semantically stale
BottomSheetDialog.types.ts still derives BottomSheetDialogPanGestureHandlerProps from the v1 PanGestureHandlerProps type:
import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
type BottomSheetDialogPanGestureHandlerProps = Omit<
PanGestureHandlerProps,
'enabled' | 'onGestureEvent'
>;
PanGestureHandlerProps is the old JSX component's props type. The implementation only actually forwards ~18 specific properties via applyPanGestureProps. A custom type explicitly listing only the supported properties would be more accurate and remove the implicit dependency on the v1 type.
2. combinedSheetStyle has a stale useMemo dependency
const combinedSheetStyle = useMemo(
() => [...sheetStyle, animatedSheetStyle],
[sheetStyle], // animatedSheetStyle missing from deps
);
animatedSheetStyle is missing from the dependency array. This doesn't cause visible bugs because Reanimated drives animated style updates directly on the UI thread, bypassing React's render cycle — so the memo isn't doing useful work. The array could be inlined or the memo removed entirely.
3. Evaluate replacing the custom implementation with @gorhom/bottom-sheet
The current BottomSheetDialog is a ~380 line custom implementation that re-implements what @gorhom/bottom-sheet already provides: gesture detection, animation, keyboard avoidance, safe area handling, and swipe-to-dismiss. The storybook app already has it as a devDependency.
Adopting it would dramatically simplify the component but requires:
- Adding it as a peer dependency (consumers would need to install it)
- Evaluating API compatibility / migration path
- A dedicated PR with its own scope
Context
PR #1165 migrated
BottomSheetDialogfrom the RNGH v1 API (PanGestureHandler/useAnimatedGestureHandler) to the RNGH v2 API (GestureDetector/Gesture.Pan()), required by the upgrade toreact-native-gesture-handler~2.28.0 andreact-native-reanimated~4.1.1.Three follow-up items were identified during review:
1.
panGestureHandlerPropstype is semantically staleBottomSheetDialog.types.tsstill derivesBottomSheetDialogPanGestureHandlerPropsfrom the v1PanGestureHandlerPropstype:PanGestureHandlerPropsis the old JSX component's props type. The implementation only actually forwards ~18 specific properties viaapplyPanGestureProps. A custom type explicitly listing only the supported properties would be more accurate and remove the implicit dependency on the v1 type.2.
combinedSheetStylehas a staleuseMemodependencyanimatedSheetStyleis missing from the dependency array. This doesn't cause visible bugs because Reanimated drives animated style updates directly on the UI thread, bypassing React's render cycle — so the memo isn't doing useful work. The array could be inlined or the memo removed entirely.3. Evaluate replacing the custom implementation with
@gorhom/bottom-sheetThe current
BottomSheetDialogis a ~380 line custom implementation that re-implements what@gorhom/bottom-sheetalready provides: gesture detection, animation, keyboard avoidance, safe area handling, and swipe-to-dismiss. The storybook app already has it as a devDependency.Adopting it would dramatically simplify the component but requires: