react-native-super-alert
React Native Super Alert is a component where you can use various types of alerts and notifications without having to import the library on all screens..
Installation
npm i react-native-super-alert --save
or
yarn add react-native-super-alert
Load the library in Root file of your application (e.g. app.js)
NOTE: This component will replace the default (alert) action from React Native
Usage
Default alert
After import Super alert in Root of application, you can call the component using the code bellow
Example for default alert without confirm
Loading alert from the corners of screen
Prop | Type | Description | Default |
---|---|---|---|
position (Optional) | string | Using alert in corners (Top, Bottom, Left, Right) | '' |
Using confirm and cancel action
Example
Then create the functions to confirm and cancel action
Note: You can use the confirm params in all alert types
Other types
BottomSheet
Props of BottomSheet
Prop | Type | Description | Default |
---|---|---|---|
bottomSheetHeight (Optional) | number | Alert BottomSheet height | 180 |
Flash Message
Props of Flash Message
Prop | Type | Description | Default |
---|---|---|---|
flashMessageHeight (Optional) | number | Flash Message height | 110 |
option (Optional) | string | Select the Color Scheme (danger,warning,info or success) | '' |
timeout (Optional) | number | Total of seconds to close the alert | 5 |
Example with React Navigation Component
Global Props
Prop | Type | Description | Default |
---|---|---|---|
Type (Optional) | string | Select the type of alert (alert,bottomsheet,flashmessage) | 'alert' |
useNativeDriver (Optional) | boolean | Use native driver | false |
textConfirm (Optional) | string | Button confirm label | 'OK' |
textCancel (Optional) | string | Button cancel label | '' |
Customize Alerts
You can customize the alert according to your theme
Place your style object in the customStyle props
Classes of customization
Prop | Description |
---|---|
container | Customize the container style |
buttonCancel | Customize the button cancel style |
buttonConfirm | Customize the button confirm style |
textButtonCancel | Customize the button cancel label style |
textButtonConfirm | Customize the button confirm label style |
title | Customize the title text style |
message | Customize the message text style |
Example of custom style object
Example App
You can download example app from Example App this link
Author
By Alan Ribeiro