@amitsolanki1409/react-native-toast-message
Version:
A customizable and lightweight toast component for React Native.
130 lines (127 loc) • 4.09 kB
JavaScript
import React, { useEffect, useState } from "react";
import { View, Text, Animated, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
const { width } = Dimensions.get("window");
const ToastService = ({ title, message, type = "success", position = "top", duration = 3000, onClose, titleStyle, messageStyle, containerStyle, Icon, alertColor, }) => {
const [fadeAnim] = useState(new Animated.Value(0));
useEffect(() => {
// Fade In Animation
Animated.timing(fadeAnim, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
// Auto Close after duration
const timer = setTimeout(() => {
handleClose();
}, duration);
return () => clearTimeout(timer);
}, []);
const handleClose = () => {
Animated.timing(fadeAnim, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start(() => onClose && onClose());
};
const getBackgroundColor = () => {
switch (type) {
case "success":
return "#4CAF50";
case "error":
return "#F44336";
case "warning":
return "#FFC107";
case "info":
return "#2196F3";
default:
return "#2196F3";
}
};
const getPositionStyle = () => {
const screenHeight = Dimensions.get("window").height;
switch (position) {
case "top":
return { top: 40 };
case "center":
return { top: screenHeight * 0.45 };
case "bottom":
return { bottom: 10 };
default:
return { bottom: 10 };
}
};
return (<Animated.View style={[
styles.toastContainer,
getPositionStyle(),
{ opacity: fadeAnim },
containerStyle, // Custom container style
]}>
{/* Left Section - Icon with Background */}
<View style={[styles.iconContainer, { backgroundColor: alertColor || getBackgroundColor() }]}>
{Icon}
</View>
{/* Right Section - Title & Message */}
<View style={styles.textContainer}>
<Text style={[styles.toastTitle, titleStyle]}>
{title || (type ? type.charAt(0).toUpperCase() + type.slice(1) : '')}
</Text>
<Text style={[styles.toastMessage, messageStyle]}>{message}</Text>
{/* Close Button */}
<TouchableOpacity style={styles.closeButton} onPress={handleClose}>
<Text style={{ fontSize: 18, color: '#333' }}>X</Text>
</TouchableOpacity>
</View>
</Animated.View>);
};
const styles = StyleSheet.create({
toastContainer: {
flexDirection: "row",
alignItems: "stretch",
position: "absolute",
left: width * 0.05,
right: width * 0.05,
borderRadius: 8,
zIndex: 1000,
elevation: 5,
overflow: "hidden",
alignSelf: "center",
borderWidth: 0.5,
borderColor: "rgba(0,0,0,0.5)",
},
iconContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
},
textContainer: {
flex: 5,
backgroundColor: "#fff",
paddingVertical: 10,
paddingHorizontal: 10,
borderTopRightRadius: 8,
borderBottomRightRadius: 8,
position: "relative",
},
toastTitle: {
fontWeight: 'bold',
fontSize: 16,
color: 'black',
textAlign: "left",
},
toastMessage: {
fontSize: 14,
color: '#5E5E5E',
textAlign: "left",
marginTop: 4,
},
closeButton: {
position: "absolute",
top: 5,
right: 5,
padding: 5,
color: '#5E5E5E',
},
});
export default ToastService;