React Native custom Alert and Prompt

Spanish documentation

Installation

1. Install library

1npm i rn-custom-alert-prompt
2

or

1yarn add rn-custom-alert-prompt

Configuration and personalization

2. Import and use AlertContainer

Now, we need to import the AlertContainer component. Normally you would do this in your input file, such as App.js or App.tsx.

1import {AlertContainer} from 'rn-custom-alert-prompt';
2
3export const App = () => {
4  return (
5    <View>
6      <AlertContainer />
7      {/* Rest of your app code */}
8    </View>
9  );
10};

Properties

You can send some optional properties in order to customize your alerts.

Prop	Description	Type	Default
animationType	Choose the animation with which your alert will appear.	'none' | 'fade' | 'slide'	'none'
appearance	Choose between light and dark appearance for your alert.	'light' | 'dark'	Device appearance
personalTheme	Completely customize how your alert will appear.	PersonalTheme	PersonalTheme defaults
theme	Choose the theme between iOS and Android for your alert.	'ios' | 'android'	Auto detect OS

PersonalTheme Props

Prop	Description	Type	Default iOS	Default Android
backgroundColor	Background color around your alert.	rgba color	rgba(0,0,0,0.4)	rgba(0,0,0,0.4)
backgroundInputColor	Background color of the text input in the prompt.	string	Light: '#1C1C1E' | Dark: '#FFFFFF'	Light: 'transparent' | Dark: 'transparent'
cardBackgroundColor	Alert color.	string	Light: '#EEEEEE' | Dark: '#222222'	Light: '#282F2C'| Dark: '#FFFFFF'
descriptionColor	Color of your alert description.	string	Light: '#000000' | Dark: '#FFFFFF'	Light: '#000000'| Dark: '#FFFFFF'
inputBorderColor	Border color for your prompt input.	string	Light: '#C3C3C3' | Dark: '#616161'	Light: '#00D982'| Dark: '#00D982'
inputColor	Color of the text input in the prompt.	string	Light: '#000000' | Dark: '#FFFFFF'	Light: '#000000' | Dark: '#FFFFFF'
lineColor	Color of the line border to separate buttons -iOS Only-.	string	Light: '#C3C3C3' | Dark: '#616161'	N/A
placeholderColor	Color of the placeholder in the prompt.	string	Light: '#C3C3C3' | Dark: '#666666'	Light: '#C3C3C3' | Dark: '#666666'
textButtonColor	Color of the text on the buttons.	string	Light: '#4F87FF' | Dark: '#4F87FF'	Light: '#00D982' | Dark: '#00D982'
titleColor	Color of your alert title.	string	Light: '#000000' | Dark: '#FFFFFF'	Light: '#000000' | Dark: '#FFFFFF'

Usage

3. Use components

Alert component

This is the typical system alert with the big difference that we can customize it and it returns a promise with the user's response.

Basic usage

1import {Text, TouchableOpacity, View} from  'react-native';
2import {Alert} from  'rn-custom-alert-prompt';
3
4const  MyComponent  = () => {
5
6 const handlePress = () => {
7   Alert.alert('Title', 'Description')
8 }
9
10 return (
11   <View>
12	  <TouchableOpacity onPress={handlePress} >
13        <Text>Open Alert</Text>
14      </TouchableOpacity>
15   </View>
16 )

Examples

iOS

Android

With props

1import {Text, TouchableOpacity, View} from  'react-native';
2import {Alert} from  'rn-custom-alert-prompt';
3
4const  MyComponent  = () => {
5
6 const handlePress = async () => {
7   const response = await Alert.alert({
8     title: 'Alert',
9     description: 'Would you like to continue learning how to use React Native alerts?',
10     showCancelButton: true,
11   })
12
13   console.log(response) // true or false
14 }
15
16 return (
17   <View>
18	  <TouchableOpacity onPress={handlePress} >
19        <Text>Open Alert</Text>
20      </TouchableOpacity>
21   </View>
22 )

Alert props

Prop	Description	Type	Required
title	Title for your alert.	string	Yes
buttons	Personalized buttons for your alert.	Button[]	No
cancelColorText	Cancel button text color.	string	No
cancelText	Cancel button text.	string	No
confirmColorText	Confirm button text color.	string	No
confirmText	Confirm button text.	string	No
icon	Alert icon.	'error' | 'info' | 'success' | 'question'	No
iconColor	Icon color.	string	No
showCancelButton	Shows the cancel button.	boolean	No

Button props

Prop	Description	Type	Required
text	Button text.	string	Yes
textStyle	Personalized styles for your text button.	StyleProp<TextStyle>	No
onPress	Function that is executed when the button is pressed.	function	No

Examples

iOS

Android

With icon

Prompt

Prompt component

This is the system prompt that we can use in iOS, with the big difference that we can customize it and it returns a promise with the text entered by the user.

Basic usage

1import {Text, TouchableOpacity, View} from  'react-native';
2import {Alert} from  'rn-custom-alert-prompt';
3
4const  MyComponent  = () => {
5
6 const handlePress = () => {
7   const response = await  Alert.prompt('Email', 'Please enter your email');
8
9   console.log(response) // string | undefined
10 }
11
12 return (
13   <View>
14	  <TouchableOpacity onPress={handlePress} >
15        <Text>Open Prompt</Text>
16      </TouchableOpacity>
17   </View>
18 )

Examples

iOS

Android

With props

1import {Text, TouchableOpacity, View} from  'react-native';
2import {Alert} from  'rn-custom-alert-prompt';
3
4const  MyComponent  = () => {
5
6 const handlePress = async () => {
7   const response = await Alert.prompt({
8     title: 'Prompt',
9     description: 'Enter your email to continue learning how to use React Native alerts!',
10     label: 'Email',
11     placeholder: 'example@example.com',
12   })
13
14   console.log(response) // string | undefined
15 }
16
17 return (
18   <View>
19	  <TouchableOpacity onPress={handlePress} >
20        <Text>Open Prompt</Text>
21      </TouchableOpacity>
22   </View>
23 )

Prompt props

Prop	Description	Type	Required
title	Title for your alert.	string	Yes
cancelColorText	Cancel button text color.	string	No
cancelText	Cancel button text.	string	No
confirmColorText	Confirm button text color.	string	No
confirmText	Confirm button text.	string	No
label	Label for input -Android only-.	string	No
placeholder	Input placeholder. default: title value	string	No

Examples

iOS

Android

License

This project is licenced under the MIT License.