https://github.com/benjamineruvieru/react-native-pushdown-alert
A customizable pushdown alert component for React Native applications.
https://github.com/benjamineruvieru/react-native-pushdown-alert
alert animation dropdown notification notifications pushdown react-native
Last synced: 22 days ago
JSON representation
A customizable pushdown alert component for React Native applications.
- Host: GitHub
- URL: https://github.com/benjamineruvieru/react-native-pushdown-alert
- Owner: benjamineruvieru
- License: mit
- Created: 2025-02-26T16:52:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-29T17:44:38.000Z (10 months ago)
- Last Synced: 2025-10-12T06:56:03.709Z (8 months ago)
- Topics: alert, animation, dropdown, notification, notifications, pushdown, react-native
- Language: TypeScript
- Homepage: https://docs.benjamineruvieru.com/docs/react-native-pushdown-alert
- Size: 1.48 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
React Native Push Down Alert
A customizable pushdown alert component for React Native applications. It provides a simple way to display success, error, and warning notifications with a unique pushdown animation that pushes down the entire content of app to show the notification.
## Features
- Display success, error, and warning notifications.
- Customizable alert appearance and behavior.
- Queue or cancel current alerts based on configuration.
- Supports custom icons and styles.
## Installation
To install the library, use npm or yarn:
```bash
npm install react-native-pushdown-alert
# or
yarn add react-native-pushdown-alert
```
## Usage
Here's a basic example of how to use the react-native-pushdown-alert in your application:
```typescript
import { PushDownAlertPortal, showNotification} from 'react-native-pushdown-alert';
import { View, Button } from 'react-native';
const MyApp = () => {
return (
{
showNotification({
type: 'success',
message: 'Hi a message body',
title: 'Hello World',
});
}}
/>
);
};
const config = {}
const App = () => {
return (
);
};
```
### Step-by-Step Guide
1. Import the Components : Import PushDownAlertPortal and showNotification from the library.
```typescript
import { PushDownAlertPortal } from 'react-native-pushdown-alert';
```
2. Place the Portal : Place the PushDownAlertPortal component as high as possible in your component tree. This ensures that alerts can be displayed over all other components.
```typescript
const App = () => {
return (
{...rest of your app}
);
};
```
3. Trigger Notifications : Use the showNotification function anywhere in your app to trigger alerts. You can call this function in response to events, such as button presses or API responses.
> [!NOTE]
> If a notification is already showing, subsequent `showNotification` calls will be queued based your chosen queuing behavior.
```typescript
showNotification({
type: 'success',
message: 'Hi a message body',
title: 'Hello World',
});
```
## API
### showNotification
- Parameters :
- `type` : Type of the alert ( `success` , `error` , `warning` ).
- `title` : Title of the alert.
- `message` : Message body of the alert.
### PushDownAlertPortal
- Props :
- `config` : Configuration object for customizing alert behavior and appearance.
## Configuration
You can customize the alert behavior and appearance by passing a configuration object to the PushDownAlertPortal component. Here are some of the available options:
- `alertDisplayDuration` : Duration for which the alert is displayed.
- `openAnimationDuration` : Duration of the open animation.
- `closeAnimationDuration` : Duration of the close animation.
- `alertQueueBehaviour` : Determines how alerts are handled when a notification is already showing. Options include:
- `queue` : New alerts are added to a queue and displayed sequentially.
- `cancelCurrent` : The current alert is dismissed, and the new alert is displayed immediately.
- `titleTextStyle` : Custom style for the alert title.
- `messageTextStyle` : Custom style for the alert message.
- `successConfig` , `errorConfig` , `warningConfig` : Custom configurations for each alert type, including icons and background colors.
### Sample Configuration
Here's an example of how you can customize the alert configurations:
```typescript
const config = {
alertDisplayDuration: 4000,
openAnimationDuration: 500,
closeAnimationDuration: 500,
alertQueueBehaviour: 'queue',
titleTextStyle: { fontSize: 18, fontWeight: 'bold', color: '#fff' },
messageTextStyle: { fontSize: 16, color: '#fff' },
successConfig: {
icon: , // Replace with your custom icon component
backgroundColor: '#4CAF50', // Green background for success alerts
},
errorConfig: {
icon: , // Replace with your custom icon component
backgroundColor: '#F44336', // Red background for error alerts
},
warningConfig: {
icon: , // Replace with your custom icon component
backgroundColor: '#FFC107', // Yellow background for warning alerts
},
};
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT