react-native-alert-boxes/src/AlertBox.js

A package to easily create different types of alert boxes in React Native.

import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import PropTypes from "prop-types";

const AlertBox = ({ type, message, onConfirm, onCancel }) => {
  const getTypeStyles = () => {
    switch (type) {
      case "success":
        return styles.success;
      case "error":
        return styles.error;
      case "warning":
        return styles.warning;
      default:
        return styles.info;
    }
  };

  return (
    <View style={[styles.container, getTypeStyles()]}>
      <Text style={styles.message}>{message}</Text>
      <View style={styles.buttonContainer}>
        {onConfirm && (
          <TouchableOpacity onPress={onConfirm} style={styles.button}>
            <Text>Confirm</Text>
          </TouchableOpacity>
        )}
        {onCancel && (
          <TouchableOpacity onPress={onCancel} style={styles.button}>
            <Text>Cancel</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

AlertBox.propTypes = {
  type: PropTypes.oneOf(["success", "error", "warning", "info"]),
  message: PropTypes.string.isRequired,
  onConfirm: PropTypes.func,
  onCancel: PropTypes.func,
};

const styles = StyleSheet.create({
  container: { padding: 20, borderRadius: 8 },
  success: { backgroundColor: "#d4edda" },
  error: { backgroundColor: "#f8d7da" },
  warning: { backgroundColor: "#fff3cd" },
  info: { backgroundColor: "#d1ecf1" },
  message: { fontSize: 16 },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 10,
  },
  button: { padding: 10, borderRadius: 5, backgroundColor: "#ccc" },
});

export default AlertBox;