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

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

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

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions