@gorhom/bottom-sheet
Advanced tools
A performant interactive bottom sheet with fully configurable options 🚀
@gorhom/bottom-sheet is a performant and customizable bottom sheet component for React Native. It allows developers to create modal-like bottom sheets that can be used for various purposes such as displaying additional content, forms, or actions. The package is highly flexible and supports gestures, animations, and various customization options.
Basic Bottom Sheet
This code demonstrates how to create a basic bottom sheet with three snap points (collapsed, half-expanded, and fully expanded). The bottom sheet can be opened by pressing a button.
```jsx
import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
const App = () => {
const bottomSheetRef = useRef(null);
return (
<View style={{ flex: 1 }}>
<Button title="Open Bottom Sheet" onPress={() => bottomSheetRef.current?.expand()} />
<BottomSheet ref={bottomSheetRef} snapPoints={[0, '50%', '100%']}>
<View style={{ flex: 1, alignItems: 'center' }}>
<Text>Bottom Sheet Content</Text>
</View>
</BottomSheet>
</View>
);
};
export default App;
```Custom Handle Component
This code demonstrates how to use a custom handle component for the bottom sheet. The custom handle can be styled and customized as needed.
```jsx
import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import BottomSheet, { BottomSheetHandle } from '@gorhom/bottom-sheet';
const CustomHandle = () => (
<View style={{ padding: 20, backgroundColor: 'lightgray' }}>
<Text>Custom Handle</Text>
</View>
);
const App = () => {
const bottomSheetRef = useRef(null);
return (
<View style={{ flex: 1 }}>
<Button title="Open Bottom Sheet" onPress={() => bottomSheetRef.current?.expand()} />
<BottomSheet ref={bottomSheetRef} snapPoints={[0, '50%', '100%']} handleComponent={CustomHandle}>
<View style={{ flex: 1, alignItems: 'center' }}>
<Text>Bottom Sheet Content</Text>
</View>
</BottomSheet>
</View>
);
};
export default App;
```Bottom Sheet with FlatList
This code demonstrates how to use a FlatList inside the bottom sheet. This is useful for displaying a list of items within the bottom sheet.
```jsx
import React, { useRef } from 'react';
import { View, Text, Button, FlatList } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
const App = () => {
const bottomSheetRef = useRef(null);
const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
return (
<View style={{ flex: 1 }}>
<Button title="Open Bottom Sheet" onPress={() => bottomSheetRef.current?.expand()} />
<BottomSheet ref={bottomSheetRef} snapPoints={[0, '50%', '100%']}>
<FlatList
data={data}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<View style={{ padding: 20 }}>
<Text>{item}</Text>
</View>
)}
/>
</BottomSheet>
</View>
);
};
export default App;
```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 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 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.
A performant interactive bottom sheet with fully configurable options 🚀
FlatList, SectionList, ScrollView & View scrolling interactions, read more.React Navigation Integration, read more.Reanimated v1-3.Expo.TypeScript.Check out the documentation website.
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
v5which provides more stability with all latest features.
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.
FAQs
A performant interactive bottom sheet with fully configurable options 🚀
The npm package @gorhom/bottom-sheet receives a total of 595,745 weekly downloads. As such, @gorhom/bottom-sheet popularity was classified as popular.
We found that @gorhom/bottom-sheet demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.