Skip to main content

Alert

Is a versatile component in our library designed to enhance user interaction and communication within applications. Alerts provide immediate notifications about important events or updates, ensuring users stay informed. Prompts guide users through actions or decisions by presenting clear messages and options, facilitating smooth user journeys. With customizable styles and functionalities, our Alert and Prompt components offer a seamless user experience across various interfaces.

Configuration and personalization

  1. Import and use AlertContainer

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

App.tsx
import {AlertContainer} from 'rn-inkpad';

export const App = () => {
return (
<View>
<AlertContainer />
{/* Rest of your app code */}
</View>
);
};

Properties

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

PropDescriptionTypeRequiredDefault
animationTypeChoose the animation with which your alert will appear.'none' | 'fade' | 'slide'NO'none'
appearanceChoose between light and dark appearance for your alert.'light' | 'dark'NODevice appearance
personalThemeCompletely customize how your alert will appear.PersonalThemeNOPersonalTheme defaults
themeChoose the theme between iOS and Android for your alert.'ios' | 'android'NOAuto detect OS

PersonalTheme Props

PropDescriptionTypeRequiredDefault iOSDefault Android
backgroundColorBackground color around your alert.rgba colorNOrgba(0,0,0,0.4)rgba(0,0,0,0.4)
backgroundInputColorBackground color of the text input in the prompt.stringNOLight: '#1C1C1E' | Dark: '#FFFFFF'Light: 'transparent' | Dark: 'transparent'
cardBackgroundColorAlert color.stringNOLight: '#EEEEEE' | Dark: '#222222'Light: '#282F2C'| Dark: '#FFFFFF'
descriptionColorColor of your alert description.stringNOLight: '#000000' | Dark: '#FFFFFF'Light: '#000000'| Dark: '#FFFFFF'
inputBorderColorBorder color for your prompt input.stringNOLight: '#C3C3C3' | Dark: '#616161'Light: '#00D982'| Dark: '#00D982'
inputColorColor of the text input in the prompt.stringNOLight: '#000000' | Dark: '#FFFFFF'Light: '#000000' | Dark: '#FFFFFF'
lineColorColor of the line border to separate buttons -iOS Only-.stringNOLight: '#C3C3C3' | Dark: '#616161'N/A
placeholderColorColor of the placeholder in the prompt.stringNOLight: '#C3C3C3' | Dark: '#666666'Light: '#C3C3C3' | Dark: '#666666'
textButtonColorColor of the text on the buttons.stringNOLight: '#4F87FF' | Dark: '#4F87FF'Light: '#00D982' | Dark: '#00D982'
titleColorColor of your alert title.stringNOLight: '#000000' | Dark: '#FFFFFF'Light: '#000000' | Dark: '#FFFFFF'

Usage

  1. 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

import {Text, TouchableOpacity, View} from  'react-native';
import {Alert} from 'rn-inkpad';

const MyComponent = () => {

const handlePress = () => {
Alert.alert('Title', 'Description')
}

return (
<View>
<TouchableOpacity onPress={handlePress} >
<Text>Open Alert</Text>
</TouchableOpacity>
</View>
)

Examples

iOS

Android

With props

import {Text, TouchableOpacity, View} from  'react-native';
import {Alert} from 'rn-inkpad';

const MyComponent = () => {

const handlePress = async () => {
const response = await Alert.alert({
title: 'Alert',
description: 'Would you like to continue learning how to use React Native alerts?',
showCancelButton: true,
})

console.log(response) // true or false
}

return (
<View>
<TouchableOpacity onPress={handlePress} >
<Text>Open Alert</Text>
</TouchableOpacity>
</View>
)

Alert props

PropDescriptionTypeRequired
titleTitle for your alert.stringYes
buttonsPersonalized buttons for your alert.Button[]No
cancelColorTextCancel button text color.stringNo
cancelTextCancel button text.stringNo
confirmColorTextConfirm button text color.stringNo
confirmTextConfirm button text.stringNo
iconAlert icon.'error' | 'info' | 'success' | 'question'No
iconColorIcon color.stringNo
showCancelButtonShows the cancel button.booleanNo

Button props

PropDescriptionTypeRequired
textButton text.stringYes
textStylePersonalized styles for your text button.StyleProp<TextStyle>No
onPressFunction that is executed when the button is pressed.functionNo

Examples with props

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

import {Text, TouchableOpacity, View} from  'react-native';
import {Alert} from 'rn-inkpad';

const MyComponent = () => {

const handlePress = () => {
const response = await Alert.prompt('Email', 'Please enter your email');

console.log(response) // string | undefined
}

return (
<View>
<TouchableOpacity onPress={handlePress} >
<Text>Open Prompt</Text>
</TouchableOpacity>
</View>
)

Examples

iOS

Android

With props

import {Text, TouchableOpacity, View} from  'react-native';
import {Alert} from 'rn-inkpad';

const MyComponent = () => {

const handlePress = async () => {
const response = await Alert.prompt({
title: 'Prompt',
description: 'Enter your email to continue learning how to use React Native alerts!',
label: 'Email',
placeholder: 'example@example.com',
})

console.log(response) // string | undefined
}

return (
<View>
<TouchableOpacity onPress={handlePress} >
<Text>Open Prompt</Text>
</TouchableOpacity>
</View>
)

Prompt props

PropDescriptionTypeRequired
titleTitle for your alert.stringYes
cancelColorTextCancel button text color.stringNo
cancelTextCancel button text.stringNo
confirmColorTextConfirm button text color.stringNo
confirmTextConfirm button text.stringNo
labelLabel for input -Android only-.stringNo
placeholderInput placeholder. default: title valuestringNo

Examples with props

iOS

Android