@gorhom/bottom-sheet

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.

README

React Native Bottom Sheet

A performant interactive bottom sheet with fully configurable options 🚀

---

Features

• 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.
• Support React Navigation integration.
• Compatible with Reanimated v1 & v2.
• Compatible with Expo.
• Accessibility support.
• Written in TypeScript.
• Read more.

Getting Started

Check out the documentation website.

Versioning

This library been written in 2 versions of Reanimated, and kept both implementation in 2 separate branches:

• v2 | branch | changelog : written with Reanimated v1 & compatible with Reanimated v2.

• v4 | branch | changelog : written with Reanimated v2.

I highly recommend all v3 users to upgrade to v4 which provides more stability and all latest features.

Author

• Mo Gorhom

Contributors

Thanks goes to these wonderful people (emoji key):

These people have helped to improve the library, but DO NOT maintain it.

Vojtech Novak 💻

kickbk 🐛 ⚠️

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

---