react-native-expo-bottomsheet/Readme.md

A lightWeight and customizeble bottom sheet components for React Native Expo support. Includes Smooth animation

# react-native-expo-bottomsheet

A lightweight and customizable bottom sheet component for **React Native**, designed with **Expo support** in mind. Ideal for modals, action sheets, menus, and smooth animations.

---

## ✨ Features

- ⚡ Built for Expo & React Native
- 🎯 Supports animation
- 💅 Customizable content and styling

---

## 🐱‍🏍 Coming Soon

- 🔄 Multiple Snap Points (planned)

---

## 🤳 Best Practices

. if any Error then turn off Terminal run again

---

## 📦 Installation

```bash
npm install react-native-expo-bottomsheet
# or
yarn add react-native-expo-bottomsheet
```

## 🧪 Example Usage

```tsx
import { Text, TouchableOpacity, View } from "react-native";
import React from "react";
import { BottomSheet, BottomSheetHandle } from "react-native-expo-bottomsheet";

const Example = () => {
  const refBottomSheet = React.useRef<BottomSheetHandle>(null);
  return (
    <View
      style={{
        marginTop: 100,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 20,
      }}
    >
      <Text
        style={{
          fontWeight: "bold",
          fontSize: 30,
          fontStyle: "italic",
        }}
      >
        BottomSheetUse
      </Text>
      <TouchableOpacity
        style={{
          backgroundColor: "green",
          width: "90%",
          alignSelf: "center",
          borderRadius: 20,
        }}
        onPress={() => refBottomSheet.current?.open()}
      >
        <Text
          style={{
            color: "white",
            paddingVertical: 10,
            textAlign: "center",
          }}
        >
          Open BottomSheet
        </Text>
      </TouchableOpacity>

      <BottomSheet
        // snapPoints={snapPoints}
        snapPoints={["30%", "50%"]}
        ref={refBottomSheet}
        draggable
        // dragOnContent
        closeOnPressBack={false}
        closeOnPressMask={false}
        wrapperColors={{ backgroundColor: "transparent" }}
        defaultOpen={true}
        showIndicator={true}
        mainContainer={{
          backgroundColor: "white",
          shadowColor: "gray",
          elevation: 20,
          shadowRadius: 10,
          borderTopRightRadius: 0,
          borderTopLeftRadius: 0,
        }}
        useModal={true}
        enableTouchThrough={false}
        // openDuration={310}
        wrapperColors={{ backgroundColor: "rgba(0,0,0,0.5)" }}
      >
        <View>
          <Text
            style={{
              fontSize: 20,
              fontWeight: "400",
              marginHorizontal: 20,
              textAlign: "center",
            }}
          >
            Your Content
          </Text>
        </View>
      </BottomSheet>
    </View>
  );
};

export default Example;
```

## ⚙️ Props

| Prop               | Type              | Default | Description                                                                   |
| ------------------ | ----------------- | ------- | ----------------------------------------------------------------------------- |
| `height`           | `number`          | `300`   | Height of the bottom sheet when open.                                         |
| `draggable`        | `boolean`         | `false` | Allows the bottom sheet to be draggable.                                      |
| `dragOnContent`    | `boolean`         | `false` | Enable dragging the bottom sheet via its content area.                        |
| `openDuration`     | `number`          | `350`   | Duration (ms) of the opening animation.                                       |
| `closeDuration`    | `number`          | `300`   | Duration (ms) of the closing animation.                                       |
| `mainContainer`    | `object`          | `{}`    | Styles applied to the main container (sheet itself).                          |
| `wrapperColors`    | `{ }`             | `{}`    | Style for the dimmed background overlay.                                      |
| `children`         | `React.ReactNode` | —       | Content to display inside the bottom sheet.                                   |
| `ref`              | `React.Ref<>`     | —       | Ref for controlling open/close methods externally.                            |
| `useNativeDriver`  | `boolean`         | `false` | Use the native driver to run smoother animation.                              |
| `customStyles`     | `object`          | `{}`    | Add custom styles to bottom sheet..                                           |
| `mainContainer`    | `object`          | `{}`    | bottomSheet style                                                             |
| `wrapperColors`    | `object`          | `{}`    | bottomSheet wrapper Colors added                                              |
| `customModalProps` | `object`          | `{}`    | add custom props to modal.                                                    |
| `onOpen`           | `function`        | `null`  | Callback function that will be called after the bottom sheet has been opened. |
| `onClose`          | `function`        | `null`  | Callback function that will be called after the bottom sheet has been closed. |

## 🔧 Methods

| Method    | Description                       | Usage                          |
| --------- | --------------------------------- | ------------------------------ |
| `open()`  | The method to open bottom sheet.  | refBottomSheet.current.open()  |
| `close()` | The method to close bottom sheet. | refBottomSheet.current.close() |