@amit327/react-native-bottom-modal

A bottom sheet–style modal for React Native: controlled with isVisible and onClose, title, scrollable body, backdrop tap to dismiss, and a drag handle — pull down on the handle/title area past a threshold (or fling) to close, with a short slide-out animation.

Requirements

• React >= 17
• React Native >= 0.70

Installation

npm install @amit327/react-native-bottom-modal

yarn add @amit327/react-native-bottom-modal

Peer dependencies (react, react-native) should already be installed in your app.

TypeScript

Types ship with the package (dist/*.d.ts, types in package.json). You do not need @types/... on DefinitelyTyped.

Usage

import React, { useState } from "react";
import { View, Button, Text } from "react-native";
import BottomModal from "@amit327/react-native-bottom-modal";

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

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

      <BottomModal
        isVisible={visible}
        title="Options"
        onClose={() => setVisible(false)}
        containerStyle={{ height: 280 }}
      >
        <Text>Scrollable content goes here.</Text>
        <Button title="Close" onPress={() => setVisible(false)} />
      </BottomModal>
    </View>
  );
}

• Set isVisible={true} to open; false to close (often from state).
• onClose runs when the user taps the dimmed area, drags the handle/title strip down far enough (or with enough downward velocity), or presses Android back (onRequestClose).
• Use containerStyle to change sheet height (default 200) or other layout.

API

Props

| Prop | Type | Description | |------|------|-------------| | isVisible | boolean | Whether the modal is shown. | | title | string | Header text above the scroll area. | | children | ReactNode | Body content inside a ScrollView. | | onClose | () => void | Backdrop press and Android back. | | containerStyle | StyleProp<ViewStyle> | Optional styles for the white sheet (e.g. height, maxHeight). |

Named exports

import BottomModal, { type BottomModalProps } from "@amit327/react-native-bottom-modal";

Migrating from 1.0.x

Earlier versions used a ref with open() / close(). 1.1.0 uses isVisible / onClose only. Replace ref calls with state:

const [open, setOpen] = useState(false);
<BottomModal isVisible={open} title="Hello" onClose={() => setOpen(false)} />

Local development (test before publish)

From your app:

{
  "dependencies": {
    "@amit327/react-native-bottom-modal": "file:../path/to/my-bottom-modal-lib"
  }
}

Run npm run build in the library folder first (file: does not run prepublishOnly). Then:

npm install
npx react-native start --reset-cache

License

MIT