The "AsyncAlert" library is a powerful tool that allows developers to display alerts or modals asynchronously in their React applications. With a simple and intuitive API, it provides a seamless way to handle user interactions and gather responses from alert dialogs.
The library includes the AlertProvider component, which serves as a context provider for managing the display of alerts. By wrapping your application with AlertProvider, you gain access to the useShowAlert hook, which provides a function for showing alerts.
The showAlert function, provided by the library, enables you to show alerts dynamically by passing in various options such as the title, text, and additional alert data. It returns a promise that resolves to a boolean value indicating the user's response to the alert.
Install react-native-async-alert with npm
npm install react-native-async-alert
with yarn
yarn add react-native-async-alert
Using default alert
Wrap your with in top level files like index.js
or App.js
import {AlertProvider} from 'react-native-async-alert';
import {useShowAlert} from 'react-native-async-alert';
function App() {
return (
<AlertProvider>
<SafeAreaView>
<RemainingContent />
</SafeAreaView>
</AlertProvider>
);
}
import React from 'react';
import Button from 'react-native';
import {useShowAlert} from 'react-native-async-alert';
function ExampleScreen() {
const showAlert = useShowAlert();
return (
...
<Button title={'Show alert'} onPress={async () => {
const result = await showAlert({
title: 'Title',
text: 'text',
});
console.log(result);
}}/>
...
);
}
Creating your custom alert
You need to pass your custom alert to the renderAlert function. Make sure to use the props.
import {AlertProvider} from 'react-native-async-alert';
const renderAlert = ({alertData, visible, onEvent, onClose}) => {
return (
<Modal visible={visible} transparent>
<View style={{backgroundColor: 'white'}}>
<Text style={{color: 'black'}}>{alertData?.text}</Text>
<Text style={{color: 'black'}}>{alertData?.message}</Text>
<Button title="Ok" onPress={() => onEvent('On Ok')} />
<Button
title="close"
onPress={() => {
onClose();
}}
/>
</View>
</Modal>
);
};
function App() {
return (
<AlertProvider renderAlert={renderAlert}>
<SafeAreaView>
<RemainingContent />
</SafeAreaView>
</AlertProvider>
);
}
Then show the alert simply like below
import React from 'react';
import Button from 'react-native';
import {useShowAlert} from 'react-native-async-alert';
function ExampleScreen() {
const showAlert = useShowAlert();
return (
...
<Button title={'Show alert'} onPress={async () => {
const result = await showAlert({
alertData: {
text: "Text",
message: "Message",
// Give any data you want which will send to the alert
},
onEvent: (event) => {
console.log(event);
}
});
console.log(result);
}}/>
...
);
}
Contributions are always welcome!
See CONTRIBUTING.md
for ways to get started.
Please adhere to this project's code of conduct
.
Hi, this is Venkatesh Paithireddy👋. I'm a self learned full stack mobile📱 developer. I like coding Android mostly ❤️. You can contact me at venkypaithireddy@gmail.com