Saltar al contenido principal

Alert

Es un componente versátil de nuestra biblioteca diseñado para mejorar la interacción y la comunicación del usuario dentro de las aplicaciones. Las alertas (Alerts)proporcionan notificaciones inmediatas sobre eventos o actualizaciones importantes, lo que garantiza que los usuarios se mantengan informados. Ingreso rápido (Prompt) guían a los usuarios a través de acciones o decisiones mediante la presentación de mensajes y opciones claras, lo que facilita la fluidez de los recorridos de los usuarios. Con estilos y funcionalidades personalizables, nuestros componentes Alert y Prompt ofrecen una experiencia de usuario perfecta en varias interfaces.

Configuración y personalización

  1. Importa y usa AlertContainer

Necesitamos importar el componente AlertContainer. Normalmente, haría esto en su archivo principal, como App.js o App.tsx.

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

export const App = () => {
return (
<View>
<AlertContainer />
{/* Resto del código de la aplicación */}
</View>
);
};

Propiedades

Puede enviar algunas propiedades opcionales para personalizar sus alertas.

PropiedadDescripciónTipoRequeridoPredeterminado
animationTypeElige la animación con la que aparecerá tu alerta.'none' | 'fade' | 'slide'NO'none'
appearanceElige la apariencia entre claro y oscuro para tu alerta.'light' | 'dark'NOApariencia del dispositivo
personalThemePersonaliza completamente la apariencia de tu alerta.PersonalThemeNOPersonalTheme predeterminado
themeElige el tema entre Android e iOS para tu alerta.'ios' | 'android'NODeterminado por el sistema

PersonalTheme Props

PropiedadDEscripciónTipoRequeridoPredeterminado iOSPredeterminado Android
backgroundColorColor de fondo al rededor de la alerta.rgba colorNOrgba(0,0,0,0.4)rgba(0,0,0,0.4)
backgroundInputColorColor de fondo para el input.stringNOClaro: '#1C1C1E' | Oscuro: '#FFFFFF'Claro: 'transparent' | Oscuro: 'transparent'
cardBackgroundColorColor de la alerta.stringNOClaro: '#EEEEEE' | Oscuro: '#222222'Claro: '#282F2C'| Oscuro: '#FFFFFF'
descriptionColorColor de la descripción de la alerta.stringNOClaro: '#000000' | Oscuro: '#FFFFFF'Claro: '#000000'| Oscuro: '#FFFFFF'
inputBorderColorColor del borde para el input.stringNOClaro: '#C3C3C3' | Oscuro: '#616161'Claro: '#00D982'| Oscuro: '#00D982'
inputColorColor del texto en el input.stringNOClaro: '#000000' | Oscuro: '#FFFFFF'Claro: '#000000' | Oscuro: '#FFFFFF'
lineColorColor del separador de botones -Solo iOS-.stringNOClaro: '#C3C3C3' | Oscuro: '#616161'N/A
placeholderColorColor del texto de marcador de posición en el input.stringNOClaro: '#C3C3C3' | Oscuro: '#666666'Claro: '#C3C3C3' | Oscuro: '#666666'
textButtonColorColor del texto en los botones.stringNOClaro: '#4F87FF' | Oscuro: '#4F87FF'Claro: '#00D982' | Oscuro: '#00D982'
titleColorColor del título de la alerta.stringNOClaro: '#000000' | Oscuro: '#FFFFFF'Claro: '#000000' | Oscuro: '#FFFFFF'

Uso

  1. Uso de componente

Componente Alert

Esta es la típica alerta del sistema con la gran diferencia de que podemos personalizarla y devuelve una promesa con la respuesta del usuario.

Uso Básico

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>
)

Ejemplos

iOS

Android

Con propiedades

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

PropiedadDescripciónTipoRequerido
titleTítulo para la alerta.stringSI
buttonsBotones personalizados para la alerta.Button[]No
cancelColorTextColor para el texto del botón cancelar.stringNo
cancelTextTexto para el botón cancelar.stringNo
confirmColorTextColor para el texto del botón confirmar.stringNo
confirmTextTexto para el botón confirmar.stringNo
iconÍcono de la alerta.'error' | 'info' | 'success' | 'question'No
iconColorColor del ícono.stringNo
showCancelButtonMuestra el botón cancelar.booleanNo

Button props

PropiedadDescripciónTipoRequerido
textTexto del botón.stringSI
textStyleEstilos personalizados para el botón.StyleProp<TextStyle>No
onPressFunción que se ejecuta al presionar el botón.functionNo

Ejemplos con propiedades

iOS

Android

Con ícono

Prompt

Prompt component

Este es el prompt del sistema que podemos usar en iOS, con la gran diferencia de que podemos personalizarlo y devuelve una promesa con el texto introducido por el usuario.

Uso básico

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>
)

Ejemplos

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

PropiedadDescripciónTipoRequerido
titleTítulo para la alerta.stringSI
cancelColorTextColor del texto del botón cancelar.stringNo
cancelTextTexto del botón cancelar.stringNo
confirmColorTextColor del texto del botón confirmar.stringNo
confirmTextTexto del botón confirmar.stringNo
labelEtiqueta para el input -Solo Android-.stringNo
placeholderTexto de ayuda para el input. predeterminado: texto del títulostringNo

Ejemplo con props

iOS

Android