What is @gorhom/bottom-sheet?
@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.
What are @gorhom/bottom-sheet's main functionalities?
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;
```
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.
React Native Bottom Sheet
A performant interactive bottom sheet with fully configurable options 🚀
Features
Getting Started
Check out the documentation website.
Versioning
This library been written in 2 versions of Reanimated
, and kept both implementation in 3 separate branches:
I highly recommend all v3
users to upgrade to v4
which provides more stability and all latest features.
Author
Contributors
Thanks goes to these wonderful people (emoji key):
License
MIT
Liked the library? 😇