https://github.com/m-julius/react-native-modal-bottom-alert
This package for react native, bottom alert with animation
https://github.com/m-julius/react-native-modal-bottom-alert
alert bottom-alert lottie-react-native react react-native react-native-alert react-native-modal
Last synced: 8 months ago
JSON representation
This package for react native, bottom alert with animation
- Host: GitHub
- URL: https://github.com/m-julius/react-native-modal-bottom-alert
- Owner: M-Julius
- Created: 2021-01-27T14:47:18.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-04T09:19:58.000Z (over 5 years ago)
- Last Synced: 2025-06-23T18:08:07.021Z (11 months ago)
- Topics: alert, bottom-alert, lottie-react-native, react, react-native, react-native-alert, react-native-modal
- Language: JavaScript
- Homepage:
- Size: 3.29 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-modal-bottom-alert
## Getting Started
- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Set Global](#set-global-alert)
- [Props](#props)
## Installation
```bash
$ yarn add react-native-modal-bottom-alert lottie-react-native
```
Or
```bash
$ npm install react-native-modal-bottom-alert lottie-react-native --save
```
## Basic Usage
```javascript
import { BottomAlert } from 'react-native-modal-bottom-alert';
onOpenAlert() {
this.modalBottom.onOpenAlert('info', 'This Title', 'This Message Example Info')
}
onOpenAlertButtonPressed() {
// onOpenAlert parameters: type, title, message, function
// parameter type: 'success', 'info', 'error'
// parameter title: 'string'
// parameter message: 'string'
// parameter action: function, default null'
this.modalBottom.onOpenAlert('error', 'This Title', 'This Message Example Error', () => console.log('This Button Try Again Pressed'))
}
return (
<>
this.onOpenAlert()}
/>
this.onOpenAlertButtonPressed()}
/>
this.modalBottom = ref}
/>
>
)
```
## Set Global Alert
### 1. Add Modal Bottom Alert on Root App
```js
// Root.js
import store from './reduxStore';
import React from 'react';
import { Provider } from 'react-redux';
import { useRefBottomAlert, BottomAlert } from 'react-native-modal-bottom-alert'; // Add This For Set Alert
let App = () => (
);
const Root = () => (
{/* Add This on root app */}
useRefBottomAlert(ref) }/>
);
```
### 2. Add on your screen or other function
```js
// Screen.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { showBottomAlert } from 'react-native-modal-bottom-alert'; // Add This On Your Screen For Call Alert
export default class App extends Component {
onOpenAlert() {
showBottomAlert('info', 'This Title', 'This Message Example Info', () => this.onDonePress())
}
onDonePress = () => {
console.log('Pressed')
}
render() {
return (
Modal Bottom Alert example
this.onOpenAlert()}
/>
showBottomAlert('error', 'This Title', 'This Message Example Error')}
/>
showBottomAlert('success', 'This Title', 'This Message Example Success')}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
```
## Props
### Basic
| Prop | Type | Description | Default |
| :----------------------- | :-------: | :--------------------------------------------: | :------ |
| statusBarTranslucent | `boolean` | Status Bar Translucent | false |
| loopAnimation | `boolean` | Animation Loop For Lottie Icon | false |
### Styling
| Prop | Type | Description | Default |
| :--------------------- | :------: | :--------------------------: | :------ |
| styleTextTitle | `object` | Text Title Style | - |
| styleTextMessage | `object` | Text Message Style | - |
| styleTextButton | `object` | Text Button Style | - |
| styleButton | `object` | Button Style | - |
| styleContainerAlert | `object` | Container Style Alert | - |