react-native-bottom-alert
Version:
Minimal bottom alert for React Native.
63 lines (48 loc) • 3.74 kB
Markdown
# react-native-bottom-alert
`react-native-bottom-alert` is a customizable React Native component that displays a smooth, bottom-aligned alert dialog with optional loader and action button. It supports automatic dismissal and flexible color theming.
## Demo
## Installation
```bash
npm i react-native-bottom-alert
```
## Usage
```tsx
import BottomAlert from "react-native-bottom-alert";
<BottomAlert
visible={modalVisible}
duration={4000}
autoHide={true}
showLoader={false}
colors={{
buttonTextColor: "#532f91",
buttonBgColor: "#f8f3ff",
backgroundColor: "#f8f3ff",
descriptionTextColor: "#6f7795",
}}
/>;
```
## Props
| Prop | Type | Default | Description |
| --------------- | ------------ | ------------------------------------ | ----------------------------------------------------------------------------- |
| `visible` | `boolean` | **Required** | Controls visibility of the alert. |
| `title` | `string` | `"Operation Completed Successfully"` | The main title text displayed in the alert. |
| `description` | `string` | `undefined` | Optional description text below the title. |
| `buttonText` | `string` | `"Close"` | Text displayed on the action button. |
| `onButtonPress` | `() => void` | `undefined` | Callback invoked when the action button is pressed or auto-hide triggers. |
| `duration` | `number` | `3000` | Duration (in milliseconds) before auto-hide triggers (if `autoHide` is true). |
| `autoHide` | `boolean` | `true` | Whether the alert should automatically dismiss after `duration`. |
| `showLoader` | `boolean` | `true` | Whether to show a loading spinner next to the alert content. |
| `colors` | `object` | See **Default Colors** | Object to customize colors of various alert elements. See below for details. |
### `colors` prop shape
All colors are optional; unspecified colors fall back to these defaults:
| Color Key | Type | Default | Description |
| ---------------------- | -------- | --------- | -------------------------------------------------------------------------------------------- |
| `buttonTextColor` | `string` | `#532f91` | Color used for the title text, button text, and the loader spinner. |
| `buttonBgColor` | `string` | `#f8f3ff` | Background color of the action button. |
| `backgroundColor` | `string` | `#f8f3ff` | Background color of the alert container. |
| `descriptionTextColor` | `string` | `#6f7795` | Color of the optional description text and the button border color (with 10% opacity added). |
- The alert slides in/out from the bottom with smooth animation.
- If `autoHide` is true, the alert auto-dismisses after `duration` milliseconds.
- Action button dismisses alert and triggers `onButtonPress` callback.
- Loader shows to indicate ongoing processes and can be toggled via `showLoader`.