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

npm i react-native-bottom-alert

Usage

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.