@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 interactions & snapping animations.
• 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:

Version 2

This version is written with Reanimated v1 & compatible with Reanimated v2, this version is located at master branch and its changelog here.

Version 3

This version is written with Reanimated v2 and CAN NOT RUN with Reanimated v1, this version is located at v3 branch and its changelog here.

All new features will be added to Reanimated v2 version, however I will keep maintaining Reanimated v1 version until further notice.

Author

• Mo Gorhom

License

MIT

Liked the library? 😇

---