@masumdev/rn-bottom-sheet

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

Demo

Youtube Tutorial

Features

• 🎯 Customizable snap points (10% to 100% 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"
}

Installing peer dependencies

npm install react react-native react-native-reanimated react-native-gesture-handler react-native-safe-area-context @react-navigation/native

or

yarn add react react-native react-native-reanimated react-native-gesture-handler react-native-safe-area-context @react-navigation/native

or

bun add react react-native react-native-reanimated react-native-gesture-handler react-native-safe-area-context @react-navigation/native

or

pnpm add react react-native react-native-reanimated react-native-gesture-handler react-native-safe-area-context @react-navigation/native

Installing @masumdev/rn-bottom-sheet

npm install @masumdev/rn-bottom-sheet

or

yarn add @masumdev/rn-bottom-sheet

or

bun add @masumdev/rn-bottom-sheet

or

pnpm add @masumdev/rn-bottom-sheet

Basic Usage

1. Wrap your app with BottomSheetProvider:

import { BottomSheetProvider } from '@masumdev/rn-bottom-sheet';
export default function App() {
  return (
    <BottomSheetProvider>
      <YourApp />
    </BottomSheetProvider>
  );
}

2. Import useBottomSheet hook and use it in your components:

import { useBottomSheet } from '@masumdev/rn-bottom-sheet';
import { ScrollView, StyleSheet, View, Text } from 'react-native';

const ScrollableContent = () => {
  const { expand } = useBottomSheet();

  return (
    <ScrollView
      style={styles.scrollView}
      onScrollEndDrag={({ nativeEvent }) => {
        const { contentOffset, contentSize, layoutMeasurement } = nativeEvent;
        const isEndReached = contentOffset.y + layoutMeasurement.height >= contentSize.height;
        if (isEndReached) {
          expand('80%');
        }
      }}>
      {Array.from({ length: 50 }).map((_, index) => (
        <View key={index} style={styles.content}>
          <Text>Scrollable Content {index + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    width: '100%',
  },
  content: {
    padding: 16,
    alignItems: 'center',
  },
});

export default ScrollableContent;

Advanced Usage

Custom Configuration

import { BottomSheetProvider } from '@masumdev/rn-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/rn-bottom-sheet';

const { expand, setContent } = useBottomSheet();

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

API Reference

BottomSheetProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultSnapTo | string | '70%' | Default height of the bottom sheet | | maxSnapTo | string | '100%' | Maximum height the bottom sheet can expand to | | backgroundColor | string | '#FFFFFF' | Background color of the bottom sheet | | backDropColor | string | 'rgba(0,0,0,0.5)' | Color of the backdrop overlay | | onStateChange | function | - | Callback when bottom sheet state changes |

useBottomSheet Hook

The hook returns an object with the following methods:

| Method | Type | Description | |--------|------|-------------| | isOpen | boolean | Current state of the bottom sheet | | isLoading | boolean | Loading state of the bottom sheet | | expand | function | Opens the bottom sheet with optional height | | close | function | Closes the bottom sheet | | toggle | function | Toggles the bottom sheet state | | setContent | function | Sets the content of the bottom sheet | | setSheetTitle | function | Sets the title of the bottom sheet | | setSnapTo | function | Sets the height of the bottom sheet |

License

MIT