react-native-beautiful-alerts

React Native Beautiful Alerts

An Awesome alerts for your projects
View Demo · Report Bug · Request Feature

Menu

1. Screenshots
2. Getting Started
   • Installation
   • Define app
3. Usage
4. Contributing

Screenshort

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install react-native-beautiful-alerts

Define app

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

import { Provider } from 'react-native-beautiful-alerts'

const App = () => {
	return (
		<Provider>
			<Routes/>
		</Provider>
	)
}

(back to top)

Usage

import { useAlert, ButtonStyle } from 'react-native-beautiful-alerts'

const Component = () => {
	const alert = useAlert()

	// Show Alert Without Buttons
	const showAlertWithoutButtons = () => {
		alert.success({
			title: 'Success!',
			description: 'The description'
		})
		// Available types: error, warning, success
	}
	
	// Show Alert With Buttons
	const showAlertWithButtons = () => {
		alert.message({
			title: 'Title',
			description: 'Select an action',
			buttons: [
				{
					text: 'Click',
					style: ButtonStyle.Regular,
					onPress: () => console.log('Pressed!')
				},
				{
					text: 'Cancel',
					style: ButtonStyle.Cancel,
					onPress: () => console.log('Pressed!')
				},
				{
					text: 'Bold',
					style: ButtonStyle.Bold,
					onPress: () => console.log('Pressed!')
				},
				{
					text: 'Danger',
					style: ButtonStyle.Danger,
					onPress: () => console.log('Pressed!')
				}
			]
		})
	}
	return (
		<View>
			<TouchableOpacity
				onPress={showAlertWithoutButtons}
			>
				<Text>Show Success Alert</Text>
			</TouchableOpacity>
			<TouchableOpacity
				onPress={showAlertWithButtons}
			>
				<Text>Show Alert with Buttons</Text>
			</TouchableOpacity>
		</View>
	)
}

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

(back to top)