https://github.com/adebayoileri/universal-bottom-sheet
✨ Bottom Sheet component powered by Gorhom Bottom Sheet + Vaul for native & web platforms.
https://github.com/adebayoileri/universal-bottom-sheet
bottom-sheet modal react react-native sheet universal universal-react
Last synced: 6 days ago
JSON representation
✨ Bottom Sheet component powered by Gorhom Bottom Sheet + Vaul for native & web platforms.
- Host: GitHub
- URL: https://github.com/adebayoileri/universal-bottom-sheet
- Owner: adebayoileri
- Created: 2024-06-14T11:13:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-10-09T20:30:50.000Z (9 months ago)
- Last Synced: 2026-03-07T03:58:40.464Z (4 months ago)
- Topics: bottom-sheet, modal, react, react-native, sheet, universal, universal-react
- Language: TypeScript
- Homepage: https://universal-bottom-sheet-web.vercel.app
- Size: 22.6 MB
- Stars: 55
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Universal Bottom Sheet
A bottom sheet component that combines [Gorhom Bottom Sheet](https://github.com/gorhom/react-native-bottom-sheet) and [Vaul](https://github.com/emilkowalski/vaul) for seamless and responsive experience across both mobile and web.
> **Note:** This is not a standalone package. It is a wrapper around Gorhom Bottom Sheet and Vaul for use across both mobile and web. You need to install Gorhom Bottom Sheet and Vaul separately to use this component.
### Installation
I recommend following the [installation guide](https://ui.gorhom.dev/components/bottom-sheet/) for Gorhom's Bottom Sheet
```bash
npm install @gorhom/bottom-sheet@^4
```
or
```bash
yarn add @gorhom/bottom-sheet@^4
```
### Peer Dependencies
Make sure to install the following peer dependencies
```bash
npm install react-native-reanimated react-native-gesture-handler
```
or
```bash
yarn add react-native-reanimated react-native-gesture-handler
```
or with expo
```bash
npx expo install react-native-reanimated react-native-gesture-handler
```
### Web Support
Make sure to install the following dependencies
```bash
npm install vaul
```
or
```bash
yarn add vaul
```
### Styling with NativeWind (Optional)
This example uses [NativeWind](https://www.nativewind.dev/v4/overview/) for styling. You can use any other styling library of your choice.
Follow the installation guide [here](https://www.nativewind.dev/v4/getting-started/react-native)
### Usage
An example usage of component is shown below:
The `ui/bottom-sheet` module exports the following components:
- `BottomSheetModal`
- `BottomSheetModalProvider`
- `BottomSheetView`
- `BottomSheetTrigger`
- `BottomSheetHandle`
- `BottomSheetScrollView`
The files can be found in the [`ui/bottom-sheet`](https://github.com/adebayoileri/universal-bottom-sheet/tree/main/packages/ui/bottom-sheet) directory. Copy the files to your project and import them as shown below:
```tsx
"use client";
import React, { useCallback, useMemo, useRef } from "react";
import { Text } from "ui/text";
import { View } from "ui/view";
import {
BottomSheetModal,
BottomSheetView,
BottomSheetTrigger,
BottomSheetHandle,
} from "ui/bottom-sheet";
import { Pressable, Platform } from "react-native";
import { useSharedValue } from "react-native-reanimated";
export function Home() {
const [isOpen, setIsOpen] = React.useState(false);
const animatedIndex = useSharedValue(0);
const animatedPosition = useSharedValue(0);
// ref
const bottomSheetModalRef = useRef(null);
// bottomSheetModalRef
console.log({ bottomSheetModalRef });
// variables
const snapPoints = useMemo(() => [600, "20%", "50%", "70%", "95%"], []);
// callbacks
const handlePresentModalPress = useCallback(() => {
// bottomSheetWebRef.current?.focus();
if (isOpen) {
bottomSheetModalRef.current?.dismiss();
setIsOpen(false);
} else {
bottomSheetModalRef.current?.present();
setIsOpen(true);
}
}, [isOpen]);
const handleSheetChanges = useCallback((index: number) => {
console.log("handleSheetChanges", index);
}, []);
return (
{Platform.OS !== "web" && ( // Use this condition if you want to control the modal from outside for only mobile
Present Modal
)}
(
)}
>
{Platform.OS === "web" && (
<>
Present Modal
>
)}
{Platform.OS === "web" && (
)}
Awesome 🎉
);
}
```
### Author
#### [Adebayo Ilerioluwa](https://github.com/adebayoileri)