Skip to content

BottomSheetDialog: follow-up improvements after RNGH v2 migration #1181

@georgewrmarshall

Description

@georgewrmarshall

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions