Bottom Sheet
Bottom Sheet
A bottom sheet is a UI panel that slides up from the bottom of the screen, commonly used for displaying additional options, filters, or details without navigating to a new screen.
Installing @gorhom/bottom-sheet
bash
npm install @gorhom/bottom-sheet
Basic Bottom Sheet Setup
javascript
import BottomSheet from '@gorhom/bottom-sheet';
function App() {
const bottomSheetRef = useRef(null);
const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
return (
Bottom Sheet Content
);
}
Opening and Closing Programmatically
javascript
bottomSheetRef.current?.snapToIndex(1);
bottomSheetRef.current?.close();
Customizing the Backdrop
javascript
import { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
Scrollable Content Inside a Bottom Sheet
javascript
import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
Scrollable content inside the sheet
Common Use Cases
- Filter and sort options in e-commerce apps
- Displaying additional item details without full navigation
- Action menus and share sheets
Conclusion
Bottom sheets, implemented using libraries like @gorhom/bottom-sheet, provide a smooth, native-feeling way to present additional content and actions without disrupting the user’s current screen context.
