@umituz/react-native-bottom-sheet

Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations.

Installation

npm install @umituz/react-native-bottom-sheet

Peer Dependencies

• react >= 18.2.0
• react-native >= 0.74.0
• @gorhom/bottom-sheet >= 5.0.0
• react-native-gesture-handler >= 2.16.0
• react-native-reanimated >= 3.10.0

Features

• ✅ Preset configurations (small, medium, large, full)
• ✅ Custom snap points (percentage, fixed, dynamic)
• ✅ Backdrop with tap-to-close
• ✅ Keyboard handling (interactive, fillParent, extend)
• ✅ Theme-aware colors
• ✅ Handle indicator
• ✅ Pan down to close
• ✅ Smooth animations with Reanimated v3
• ✅ Offline-compatible (100% client-side)

Usage

Basic Usage

import { BottomSheet, useBottomSheet } from '@umituz/react-native-bottom-sheet';

const MyScreen = () => {
  const { sheetRef, open, close } = useBottomSheet();

  return (
    <>
      <Button onPress={open}>Open Sheet</Button>
      <BottomSheet
        ref={sheetRef}
        preset="medium"
        onClose={() => console.log('Closed')}
      >
        <View>
          <Text>Bottom Sheet Content</Text>
        </View>
      </BottomSheet>
    </>
  );
};

Custom Snap Points

<BottomSheet
  snapPoints={['25%', '50%', '90%']}
  initialIndex={1}
  enableBackdrop
>
  <FilterForm />
</BottomSheet>

Keyboard-Aware Sheet

<BottomSheet
  preset="large"
  keyboardBehavior="fillParent"
>
  <CommentForm />
</BottomSheet>

Presets

• small: 25% height
• medium: 50% height
• large: 75% height
• full: Multi-snap (25%, 50%, 90%)

API

Components

• BottomSheet: Main bottom sheet component

Hooks

• useBottomSheet(): Hook for managing bottom sheet state

License

MIT