MCPcopy Index your code
hub / github.com/gorhom/react-native-bottom-sheet

github.com/gorhom/react-native-bottom-sheet @v5.2.14 sqlite

repository ↗ · DeepWiki ↗ · release v5.2.14 ↗
250 symbols 788 edges 204 files 12 documented · 5%
README

React Native Bottom Sheet

Reanimated v3 version Reanimated v2 version Reanimated v1 version

license npm runs with expo

NPM Downloads

A performant interactive bottom sheet with fully configurable options 🚀

React Native Bottom Sheet

Features

  • ⭐️ Support React Native Web, read more.
  • ⭐️ Dynamic Sizing, read more.
  • ⭐️ Support FlashList, read more.
  • Modal presentation view, Bottom Sheet Modal.
  • Smooth gesture interactions & snapping animations.
  • Seamless keyboard handling for iOS & Android.
  • Support pull to refresh for scrollables.
  • Support FlatList, SectionList, ScrollView & View scrolling interactions, read more.
  • Support React Navigation Integration, read more.
  • Compatible with Reanimated v1-3.
  • Compatible with Expo.
  • Accessibility support.
  • Written in TypeScript.
  • Read more.

Getting Started

Check out the documentation website.

Versioning

This library been written in 3 versions of Reanimated, and kept all implementation in separate branches:

  • v5 | branch | changelog : written with Reanimated v3 & Gesture Handler v2.

  • v4 (not maintained) | branch | changelog : written with Reanimated v2.

  • v2 (not maintained) | branch | changelog : written with Reanimated v1 & compatible with Reanimated v2.

I highly recommend to use v5 which provides more stability with all latest features.

Author

Sponsor & Support

To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter @gorhom.

License

MIT

Mo Gorhom Mo Gorhom

Extension points exported contracts — how you extend this code

FlashListProps (Interface)
* Minimal subset of FlashListProps needed for BottomSheetFlashList. * Defined locally to avoid requiring @shopify/flash
src/components/bottomSheetScrollable/BottomSheetFlashList.tsx
ScrollComponentInternals (Interface)
* Type bridge for accessing undocumented React Native scroll component internals. * These properties exist at runtime b
src/utilities/findNodeHandle.web.ts
TimingConfig (Interface)
* this is needed to avoid TS4023 * https://github.com/microsoft/TypeScript/issues/5711
src/hooks/useBottomSheetTimingConfigs.ts
CustomFooterProps (Interface)
(no doc)
example/src/components/customFooter/CustomFooter.tsx
BottomSheetMethods (Interface)
(no doc)
src/types.d.ts
BottomSheetInternalContextType (Interface)
(no doc)
src/contexts/internal.ts
BottomSheetBackgroundProps (Interface)
(no doc)
src/components/bottomSheetBackground/types.d.ts
PrintOptions (Interface)
(no doc)
src/utilities/logger.ts

Core symbols most depended-on inside this repo

print
called by 26
src/utilities/logger.ts
close
called by 19
mock.js
useBottomSheetInternal
called by 19
src/hooks/useBottomSheetInternal.ts
expand
called by 16
mock.js
collapse
called by 16
mock.js
present
called by 10
mock.js
dismiss
called by 10
mock.js
snapToIndex
called by 8
mock.js

Shape

Function 143
Interface 66
Method 27
Enum 10
Class 4

Languages

TypeScript100%

Modules by API surface

mock.js31 symbols
src/components/bottomSheetScrollable/types.d.ts16 symbols
src/constants.ts9 symbols
src/hooks/useScrollHandler.web.ts6 symbols
example/src/screens/integrations/flashlist/TweetContent.tsx6 symbols
src/types.d.ts5 symbols
example/src/screens/integrations/flashlist/FlashListExample.tsx5 symbols
example/src/components/contactList/ContactList.tsx5 symbols
src/utilities/logger.ts3 symbols
src/hooks/useAnimatedKeyboard.ts3 symbols
src/components/bottomSheetModal/types.d.ts3 symbols
src/components/bottomSheetFooter/types.d.ts3 symbols

Dependencies from manifests, versioned

@babel/core7.25.2 · 1×
@babel/plugin-proposal-export-namespace-from7.18.9 · 1×
@biomejs/biome2.4.10 · 1×
@commitlint/cli19.8.1 · 1×
@commitlint/config-conventional19.8.1 · 1×
@docusaurus/core3.7.0 · 1×
@docusaurus/faster3.7.0 · 1×
@docusaurus/module-type-aliases3.7.0 · 1×
@docusaurus/plugin-google-gtag3.7.0 · 1×
@docusaurus/preset-classic3.7.0 · 1×
@docusaurus/tsconfig3.7.0 · 1×
@docusaurus/types3.7.0 · 1×

For agents

$ claude mcp add react-native-bottom-sheet \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact