@masumdev/bottom-sheet v1.0.1

@masumdev/bottom-sheet

A highly customizable and gesture-responsive bottom sheet component for React Native applications.

Demo

Youtube Tutorial

Features

• 🎯 Customizable snap points (10% to 90% of screen height)
• 🎨 Customizable background and backdrop colors
• 📱 iOS and Android back gesture/button handling
• 💫 Smooth animations and gestures using react-native-reanimated
• 🔄 Context-based state management
• 📜 Scrollable content support
• 🔝 Dynamic height adjustment
• 🎯 Title and content management through hooks
• 🛡️ Safe area support

Installation

Prerequisites

Make sure you have these peer dependencies installed in your React Native project:

{
  "react": "^18.3.1",
  "react-native": "^0.76.7",
  "react-native-reanimated": "^3.16.7",
  "react-native-gesture-handler": "^2.20.2",
  "react-native-safe-area-context": "^4.12.0",
  "@react-navigation/native": "^6.x"
}

Using npm

npm install @masumdev/bottom-sheet

Using yarn

yarn add @masumdev/bottom-sheet

Using bun

bun add @masumdev/bottom-sheet

Using pnpm

pnpm add @masumdev/bottom-sheet

Basic Usage

1. Wrap your app with BottomSheetProvider:

import React from 'react';
import { View } from 'react-native';
import { BottomSheetProvider } from '@masumdev/bottom-sheet';

export default function App() {
  return (
    <BottomSheetProvider>
      <View style={{ flex: 1 }}>
        {/* Your app content */}
      </View>
    </BottomSheetProvider>
  );
}

2. Use the useBottomSheet hook in your components:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useBottomSheet } from '@masumdev/bottom-sheet';

export default function MyComponent() {
  const { expand, setContent, setSheetTitle } = useBottomSheet('50%');

  const showProfile = () => {
    setSheetTitle('Profile Details');
    setContent(
      <View>
        <Text>Name: John Doe</Text>
        <Button title="Close" onPress={close} />
      </View>
    );
    expand();
  };

  return (
    <View>
      <Button title="Show Profile" onPress={showProfile} />
    </View>
  );
}

Advanced Usage

Custom Configuration

import { BottomSheetProvider } from '@masumdev/bottom-sheet';

<BottomSheetProvider
  defaultSnapTo="50%"
  maxSnapTo="80%"
  backgroundColor="#F5F5F5"
  backDropColor="rgba(0,0,0,0.7)"
  onStateChange={(isOpen) => console.log('Sheet is open:', isOpen)}
>
  <App />
</BottomSheetProvider>

Dynamic Height Adjustment

import { useBottomSheet } from '@masumdev/bottom-sheet';

const { expand, setContent } = useBottomSheet();

const showHalfSheet = () => {
  setContent(<Text>Half Sheet Content</Text>);
  expand('50%'); // Override default height
};

API Reference

BottomSheetProvider Props

useBottomSheet Hook

The hook returns an object with the following methods:

License

MIT