React Native + Tailwind CSS Alert

A selection of React Native Alert components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Solid Alert

import { View, Text } from "react-native";
import tailwind from "twrnc";

export default function Alerts() {
  return (
    <View style={tailwind`flex-1 p-8 flex gap-4 items-center justify-center`}>
      <View style={tailwind`w-full p-4 bg-slate-200 rounded-md`}>
        <Text style={tailwind`text-slate-900 font-bold`}>
          Your order is currently being processed
        </Text>
      </View>

      <View style={tailwind`w-full p-4 bg-slate-700 rounded-md`}>
        <Text style={tailwind`text-slate-50 font-bold`}>
          Your order is currently being processed
        </Text>
      </View>

      <View style={tailwind`w-full p-4 bg-emerald-500 rounded-md`}>
        <Text style={tailwind`text-white font-bold`}>
          Your order has been successfully processed
        </Text>
      </View>

      <View style={tailwind`w-full p-4 bg-orange-500 rounded-md`}>
        <Text style={tailwind`text-white font-bold`}>
          High demand - your order may be delayed
        </Text>
      </View>

      <View style={tailwind`w-full p-4 bg-red-500 rounded-md`}>
        <Text style={tailwind`text-white font-bold`}>
          There was a problem processing your order
        </Text>
      </View>
    </View>
  );
}

Bordered Alert

import { View, Text } from 'react-native';
import tailwind from 'twrnc';

export default function Alerts() {
  return (
    <View style={tailwind`flex-1 p-8 flex gap-4 items-center justify-center`}>
      <View style={tailwind`w-full p-4 bg-slate-100 rounded-md border border-slate-200`}>
        <Text style={tailwind`text-slate-900 font-medium`}>
          Your order is currently being processed
        </Text>
      </View>

      <View style={tailwind`w-full p-4 bg-slate-100 rounded-md border border-emerald-200`}>
        <Text style={tailwind`text-emerald-600 font-medium`}>
          Your order has been successfully processed
        </Text>
      </View>

      <View style={tailwind`w-full p-4 bg-slate-100 rounded-md border border-orange-200`}>
        <Text style={tailwind`text-orange-600 font-medium`}>
          High demand - your order may be delayed
        </Text>
      </View>

      <View style={tailwind`w-full p-4 bg-slate-100 rounded-md border border-red-200`}>
        <Text style={tailwind`text-red-600 font-medium`}>
          There was a problem processing your order
        </Text>
      </View>
    </View>
  );
}