Alert

O Alert é uma API em React Native usada para exibir alertas simples para o usuário. Eles são úteis para mostrar mensagens importantes, solicitar confirmações ou fornecer feedback ao usuário. Aqui está um exemplo básico de como usar o Alert em React Native:

import React from 'react';
import { View, Button, Alert, StyleSheet } from 'react-native';

const MeuComponente = () => {
  const mostrarAlerta = () => {
    Alert.alert(
      'Título do Alerta',
      'Mensagem do Alerta',
      [
        {
          text: 'Cancelar',
          onPress: () => console.log('Cancelar Pressionado'),
          style: 'cancel',
        },
        {
          text: 'OK',
          onPress: () => console.log('OK Pressionado'),
        },
      ],
      { cancelable: false }
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Mostrar Alerta" onPress={mostrarAlerta} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MeuComponente;

Neste exemplo, Alert.alert é usado para exibir um alerta com um título, uma mensagem e dois botões: “Cancelar” e “OK”. As funções de retorno de chamada são definidas para lidar com ações quando os botões são pressionados. O cancelable: false impede que o alerta seja fechado pressionando fora dele.

Props Importantes do Alert:

  • title: Título do alerta (string).
  • message: Mensagem do alerta (string).
  • buttons: Um array de objetos de botão com propriedades text, onPress e opcionalmente style (por exemplo, 'cancel' para o botão de cancelamento).
  • cancelable: Se verdadeiro, o alerta pode ser fechado pressionando fora dele (padrão é verdadeiro).

O Alert é uma maneira fácil de interagir com os usuários em situações simples, como confirmações e mensagens informativas. Para interações mais complexas, como formulários de entrada, você pode considerar o uso de bibliotecas de modais personalizadas ou criar seus próprios componentes de modais personalizados em React Native.