@gorhom/bottom-sheet

React Native Bottom Sheet

A performant interactive bottom sheet with fully configurable options 🚀

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

• Mo Gorhom

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

Similar packages

Other packages similar to @gorhom/bottom-sheet

reanimated-bottom-sheet

reanimated-bottom-sheet is another popular bottom sheet component for React Native. It is built on top of Reanimated and Gesture Handler libraries, providing smooth animations and gesture handling. Compared to @gorhom/bottom-sheet, it offers similar functionalities but may require more setup due to its dependencies on Reanimated and Gesture Handler.

react-native-modalize

react-native-modalize is a highly customizable modal component for React Native that can be used to create bottom sheets. It supports various features such as snapping points, custom handles, and more. While it offers similar functionalities to @gorhom/bottom-sheet, it is more focused on providing a general modal solution rather than just bottom sheets.

react-native-bottom-sheet-behavior

react-native-bottom-sheet-behavior is a library that provides bottom sheet behavior for React Native applications. It is inspired by the BottomSheetBehavior component in Android. This package is more Android-centric and may not offer the same level of customization and performance as @gorhom/bottom-sheet.