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

1npm install react-native-expo-bottomsheet
2# or
3yarn add react-native-expo-bottomsheet

🧪 Example Usage

1import { Text, TouchableOpacity, View } from "react-native";
2import React from "react";
3import { BottomSheet, BottomSheetHandle } from "react-native-expo-bottomsheet";
4
5const Example = () => {
6  const refBottomSheet = React.useRef<BottomSheetHandle>(null);
7  return (
8    <View
9      style={{
10        marginTop: 100,
11        flexDirection: "column",
12        alignItems: "center",
13        justifyContent: "center",
14        gap: 20,
15      }}
16    >
17      <Text
18        style={{
19          fontWeight: "bold",
20          fontSize: 30,
21          fontStyle: "italic",
22        }}
23      >
24        BottomSheetUse
25      </Text>
26      <TouchableOpacity
27        style={{
28          backgroundColor: "green",
29          width: "90%",
30          alignSelf: "center",
31          borderRadius: 20,
32        }}
33        onPress={() => refBottomSheet.current?.open()}
34      >
35        <Text
36          style={{
37            color: "white",
38            paddingVertical: 10,
39            textAlign: "center",
40          }}
41        >
42          Open BottomSheet
43        </Text>
44      </TouchableOpacity>
45
46      <BottomSheet
47        ref={refBottomSheet}
48        height={400}
49        draggable
50        dragOnContent
51        openDuration={350}
52        closeDuration={300}
53        mainContainer={{
54          borderTopRightRadius: 30,
55          borderTopLeftRadius: 30,
56          backgroundColor: "white",
57        }}
58        wrapperColors={{ backgroundColor: "rgba(0,0,0,0.5)" }}
59      >
60        <View>
61          <Text
62            style={{
63              fontSize: 20,
64              fontWeight: "400",
65              marginHorizontal: 20,
66              textAlign: "center",
67            }}
68          >
69            Your Content
70          </Text>
71        </View>
72      </BottomSheet>
73    </View>
74  );
75};
76
77export 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()