react-native-pure-bottom-sheet

A lightweight, zero-dependency, performant drag-to-dismiss bottom sheet for React Native and Expo.

It is built purely on the built-in React Native Animated API and PanResponder, meaning no external gesture handler or animation libraries (like react-native-reanimated or react-native-gesture-handler) are required.

---

Features

• 🚀 Zero Dependencies: Keeps your bundle size small and avoids native dependency conflicts.
• 📱 Expo Compatible: Works out-of-the-box in Expo Go and bare React Native apps.
• 📐 Dynamic Sizing (fitContent): Automatically measures and snaps to fit its children content.
• 🎯 Snap Points: Supports multiple snap points expressed as fractions of screen height (e.g. [0.3, 0.6, 0.9]).
• ⌨️ Keyboard Avoidance: Automatically moves up when the keyboard appears.
• 📜 Built-in ScrollView Integration: Seamless scrolling inside the sheet; drags down to dismiss only when scrolled to the top.
• 🎨 Fully Customizable: Backdrop opacity/color, handle styles, container styling, and spring animations can all be adjusted.

---

Installation

Install the package via npm or yarn:

npm install react-native-pure-bottom-sheet

or

yarn add react-native-pure-bottom-sheet

---

Usage

1. Basic Example

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { BottomSheet } from 'react-native-pure-bottom-sheet';

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Open Bottom Sheet" onPress={() => setVisible(true)} />

      <BottomSheet visible={visible} onClose={() => setVisible(false)}>
        <View style={styles.content}>
          <Text style={styles.title}>Hello from Bottom Sheet!</Text>
          <Text style={styles.text}>Drag me down to dismiss or tap the backdrop.</Text>
        </View>
      </BottomSheet>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    padding: 24,
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
});

2. Custom Snap Points

You can define multiple snap points as fractions of the screen height. For example, [0.3, 0.6, 0.9] represents 30%, 60%, and 90% of the screen height.

<BottomSheet
  visible={visible}
  onClose={() => setVisible(false)}
  snapPoints={[0.3, 0.6, 0.9]}
  initialSnapIndex={1} // Opens at 60% height
>
  <View style={{ padding: 20 }}>
    <Text>Scrollable or drag-to-snap content...</Text>
  </View>
</BottomSheet>

3. Dynamic Auto-Sizing (fitContent)

If you don't know the content height beforehand and want the sheet to auto-fit to its children, set fitContent to true.

<BottomSheet
  visible={visible}
  onClose={() => setVisible(false)}
  fitContent={true}
>
  <View style={{ padding: 24 }}>
    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Dynamic Content</Text>
    <Text>This sheet will size itself perfectly to match this content!</Text>
  </View>
</BottomSheet>

4. Programmatic Control (Imperative Ref)

You can use a React ref to programmatically control the bottom sheet's snapping position or close it.

import React, { useRef, useState } from 'react';
import { View, Button } from 'react-native';
import { BottomSheet, BottomSheetRef } from 'react-native-pure-bottom-sheet';

export default function App() {
  const [visible, setVisible] = useState(false);
  const sheetRef = useRef<BottomSheetRef>(null);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="Open Sheet" onPress={() => setVisible(true)} />

      <BottomSheet
        ref={sheetRef}
        visible={visible}
        onClose={() => setVisible(false)}
        snapPoints={[0.4, 0.8]}
      >
        <View style={{ padding: 20 }}>
          <Button title="Snap to Top (80%)" onPress={() => sheetRef.current?.snapTo(1)} />
          <Button title="Close Programmatically" onPress={() => sheetRef.current?.close()} />
        </View>
      </BottomSheet>
    </View>
  );
}

---

Props

Prop	Type	Default	Description
visible	boolean	Required	Controls the visibility of the bottom sheet.
onClose	() => void	Required	Callback function triggered when the sheet requests to close (backdrop tap or dragged down).
snapPoints	SnapPoint[]	[0.5]	Ordered array of snap points expressed as fractions of screen height (e.g. [0.3, 0.6, 0.9]).
initialSnapIndex	number	0	The index of the snap point the bottom sheet starts at when opened.
enableDragToClose	boolean	true	Enables/disables dragging below the lowest snap point to close the sheet.
closeThreshold	number	0.35	Threshold (fraction of lowest snap height) below which the sheet auto-closes.
showBackdrop	boolean	true	Render a translucent overlay backdrop behind the sheet.
backdropColor	string	'#000000'	Background color of the backdrop.
backdropOpacity	number	0.5	Maximum opacity value for the backdrop (from 0 to 1).
closeOnBackdropPress	boolean	true	Closes the bottom sheet when the backdrop is pressed.
showHandle	boolean	true	Shows the grab handle indicator at the top center of the sheet.
handleColor	string	'#C4C4C4'	Color of the grab handle indicator.
containerStyle	StyleProp<ViewStyle>	undefined	Custom styling for the bottom sheet container wrapper.
contentStyle	StyleProp<ViewStyle>	undefined	Custom styling for the ScrollView content container.
springConfig	{ tension?, friction? }	{ tension: 170, friction: 26 }	Spring animation properties for snap transitions.
avoidKeyboard	boolean	true	Automatically slides the sheet up to prevent inputs from being covered by the keyboard.
fitContent	boolean	false	Dynamically measures the children height and sets the snap point to match it.
onSnap	(index: number) => void	undefined	Callback function triggered when the sheet successfully snaps to a point.

---

Methods (via ref)

Expose these methods by assigning a ref of type BottomSheetRef to the <BottomSheet> component:

• snapTo(index: number): Programmatically animates the bottom sheet to the specified snap point index.
• close(): Programmatically triggers the close animation and invokes onClose.

---

License

This project is licensed under the MIT License.