-
Book Overview & Buying
-
Table Of Contents
React and React Native - Sixth Edition
By :
So far, the modal and alert patterns we've explored are designed for brief, blocking interactions — the user must respond before continuing. Bottom sheet modals are a different UI pattern: they slide up from the bottom of the screen and can hold rich, scrollable content such as item details, action menus, or forms. Unlike alerts, they don't completely block the main view, and the user can dismiss them by swiping down. They are one of the most widely used patterns in modern mobile apps.
React Native doesn't ship a built-in bottom sheet component, but the @gorhom/bottom-sheet library provides a polished, gesture-driven implementation that works with Expo. It requires react-native-gesture-handler and react-native-reanimated, both of which you may already have from earlier chapters. Install the library with:
npx expo install @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated
Start with the data model. The Product...