react-native-bottom-panel

Demo

A customizable bottom sheet modal component for React Native with smooth animations and gesture support.

Installation

npm install react-native-bottom-panel

Dependencies

This package requires the following peer dependencies:

npm install react-native-reanimated

Follow the react-native-reanimated installation guide to complete the setup.

Usage

Basic Usage

import React, { useRef } from "react";
import { View, Text, Button } from "react-native";
import BottomSheetModal, {
  BottomSheetModalRef,
} from "react-native-bottom-panel";

const App = () => {
  const bottomSheetRef = useRef<BottomSheetModalRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <Button
        title="Open Sheet"
        onPress={() => bottomSheetRef.current?.open()}
      />

      <BottomSheetModal ref={bottomSheetRef}>
        <View style={{ padding: 20 }}>
          <Text>Bottom Sheet Content</Text>
        </View>
      </BottomSheetModal>
    </View>
  );
};

With ScrollView

import React, { useRef } from "react";
import { ScrollView, Text } from "react-native";
import BottomSheetModal, {
  BottomSheetModalRef,
} from "react-native-bottom-panel";

const App = () => {
  const bottomSheetRef = useRef<BottomSheetModalRef>(null);

  return (
    <BottomSheetModal ref={bottomSheetRef}>
      {(onScrollEndDrag) => (
        <ScrollView onScrollEndDrag={onScrollEndDrag}>
          <Text>Scrollable content...</Text>
        </ScrollView>
      )}
    </BottomSheetModal>
  );
};

Props

| Prop | Type | Default | Description | | ---------------------- | --------------------------------------------------------------------- | ---------------------- | ------------------------------------------------- | | children | React.ReactNode \| ((onScrollEndDrag: Function) => React.ReactNode) | `` | Content to render inside the bottom sheet | | initialState | 'open' \| 'closed' | 'closed' | Initial state of the bottom sheet | | maxHeight | number | 50% of screen height | Maximum height of the bottom sheet | | minHeight | number | 50 | Minimum height of the bottom sheet when collapsed | | animationDuration | number | 500 | Animation duration in milliseconds | | onOpen | () => void | () => null | Callback fired when the sheet opens | | onClose | () => void | () => null | Callback fired when the sheet closes | | containerStyle | ViewStyle | {} | Style for the main container | | contentWrapperStyle | ViewStyle | {} | Style for the content wrapper | | innerContentStyle | ViewStyle | {} | Style for the inner content | | handleContainerStyle | ViewStyle | {} | Style for the handle container | | handleStyle | ViewStyle | {} | Style for the drag handle | | headerComponent | () => React.ReactNode | undefined | Custom header component |

Ref Methods

The component exposes the following methods through ref:

| Method | Description | | -------------- | ---------------------------------- | | open() | Opens the bottom sheet | | close() | Closes the bottom sheet | | toggle() | Toggles the bottom sheet state | | isExpanded() | Returns the current expanded state |

Features

• Smooth animations using Reanimated
• Gesture support for opening/closing
• Keyboard handling
• Android back button support
• Customizable styling
• ScrollView integration
• TypeScript support

License

MIT