A customizable and performant Bottom Sheet component for React Native using Expo.

Installation

Install via npm:

npm install bottom-sheet-john

Usage

Import the component and wrap it in your React Native project:

import BottomSheet from 'bottom-sheet-john';

const { height: screenHeight } = Dimensions.get('window');

export default function App() { const [isVisible, setIsVisible] = useState(false);

return ( <Button title="Open Bottom Sheet" onPress={() => setIsVisible(true)} />

  <BottomSheet
    visible={isVisible}
    onClose={() => setIsVisible(false)}
    height={400} // custom height
    styles={{
      bottomSheet: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: -2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 5,
        padding: 20,
      },
      handle: {
        width: 60,
        height: 5,
        backgroundColor: '#ccc',
        borderRadius: 3,
        alignSelf: 'center',
        marginBottom: 10,
      },
    }}
  >
    <Text style={{ fontSize: 18 }}>Hello from the bottom sheet!</Text>
    <Button title="Close" onPress={() => setIsVisible(false)} />
  </BottomSheet>
</View>

); }

Properties for all progress components

| Prop | Type | Default | Required | Description | |-------------|-----------|-----------|----------|-------------| | visible | boolean | false | ✅ | Controls whether the bottom sheet is open (true) or closed (false). | | onClose | function| — | ❌ | Callback executed after the sheet finishes closing. | | children | node | — | ✅ | The content rendered inside the bottom sheet. | | height | number | 400 | ❌ | Height of the bottom sheet in pixels. | | styles | object | {} | ❌ | Custom style object with optional keys: bottomSheet (container style) and handle (drag indicator style). |