$ show gorhom/react-native-bottom-sheet
This repository is a high-quality, production-ready React Native library for building interactive bottom sheets. It provides a highly customizable component (`BottomSheet`) that supports gesture-driven snapping, dynamic sizing, keyboard handling, and modal presentation. The architecture is built on `react-native-reanimated` for performant animations on the UI thread and `react-native-gesture-handler` for gesture recognition. The library includes a rich set of pre-integrated scrollable components (FlatList, ScrollView, SectionList, VirtualizedList, FlashList), a modal variant (`BottomSheetModal`), and a context-based provider system for managing multiple sheets. The codebase is well-structured with TypeScript, clear separation of concerns, and extensive documentation. It is actively maintained with frequent releases and a large community (9k+ stars). The primary entry point is `src/index.ts`, which exports all components, hooks, and utilities. The library is not an application but a reusable UI component library, and it demonstrates strong engineering practices with reusable patterns like gesture handler providers, animated detent management, and scrollable component factories.
The LLM identified 4 files worth highlighting for reuse:
Implements the default gesture event handlers (pan, over-drag, keyboard dismissal) as Reanimated worklets. This is a self-contained module that encapsulates all gesture logic for the bottom sheet, making it reusable for custom gesture configurations. It demonstrates advanced use of Reanimated's runOnJS and worklet patterns.
A factory function that creates a scrollable component (e.g., BottomSheetFlatList, BottomSheetScrollView) by wrapping a given scrollable component with bottom sheet gesture and scroll handling. This pattern allows easy integration of third-party scrollable libraries (like FlashList) with minimal code duplication. It is a clean, reusable abstraction.
Provides a context-based modal management system using `@gorhom/portal` for rendering modals outside the component tree. It manages the stack of modals, handles dismiss/present/minimize/restore actions, and exposes a clean API via `useBottomSheetModal`. This is a well-isolated pattern for managing multiple modal instances.
Manages the animated snap points (detents) for the bottom sheet, including dynamic sizing based on content height. It uses Reanimated shared values and worklets to compute and animate between snap positions. This hook is self-contained and could be extracted for other animated snapping scenarios.