@phonehtut/react-native-sonner
Version:
A simple and customizable toast notification system for React Native applications
38 lines (37 loc) • 1.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToastItem = ToastItem;
var vector_icons_1 = require("@expo/vector-icons");
var moti_1 = require("moti");
var react_1 = require("react");
var react_native_1 = require("react-native");
var toastStyles = {
success: 'border-l-4 border-green-500',
error: 'border-l-4 border-red-500',
info: 'border-l-4 border-blue-500',
};
var toastIcons = {
success: 'checkmark-circle-outline',
error: 'alert-circle-outline',
info: 'information-circle-outline',
};
function ToastItem(_a) {
var id = _a.id, message = _a.message, _b = _a.type, type = _b === void 0 ? 'info' : _b, onHide = _a.onHide, _c = _a.duration, duration = _c === void 0 ? 3000 : _c;
(0, react_1.useEffect)(function () {
var timeout = setTimeout(function () {
onHide(id);
}, duration);
return function () { return clearTimeout(timeout); };
}, [id]);
return (<moti_1.MotiView from={{ opacity: 0, translateY: 20 }} animate={{ opacity: 1, translateY: 0 }} exit={{ opacity: 0, translateY: 20 }} style={{ marginBottom: 8 }}>
<react_native_1.View className={"flex-row items-center justify-between w-[90vw] mx-auto px-4 py-5 rounded-lg shadow-lg bg-black ".concat(toastStyles[type])}>
<react_native_1.View className="flex-row items-center flex-1">
<vector_icons_1.Ionicons name={toastIcons[type]} size={20} color={type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#3b82f6'} style={{ marginRight: 8 }}/>
<react_native_1.Text className="text-white font-medium flex-1">{message}</react_native_1.Text>
</react_native_1.View>
<react_native_1.Pressable onPress={function () { return onHide(id); }}>
<react_native_1.Text className="text-white ml-4 font-bold">✕</react_native_1.Text>
</react_native_1.Pressable>
</react_native_1.View>
</moti_1.MotiView>);
}