React Native: How to implement a custom toast notification in React Native?

1import { Animated, View, Text, StyleSheet } from "react-native";
2
3function Toast({ message, visible, onHide }) {
4  const opacity = useRef(new Animated.Value(0)).current;
5
6  useEffect(() => {
7    if (visible) {
8      Animated.sequence([
9        Animated.timing(opacity, {
10          toValue: 1,
11          duration: 300,
12          useNativeDriver: true,
13        }),
14        Animated.delay(2000),
15        Animated.timing(opacity, {
16          toValue: 0,
17          duration: 300,
18          useNativeDriver: true,
19        }),
20      ]).start(() => onHide());
21    }
22  }, [visible]);
23
24  if (!visible) return null;
25
26  return (
27    <Animated.View style={[styles.toast, { opacity }]}>
28      <Text style={styles.message}>{message}</Text>
29    </Animated.View>
30  );
31}
32
33const styles = StyleSheet.create({
34  toast: {
35    position: "absolute",
36    bottom: 100,
37    alignSelf: "center",
38    backgroundColor: "#333",
39    paddingHorizontal: 20,
40    paddingVertical: 12,
41    borderRadius: 8,
42  },
43  message: { color: "white" },
44});

1npm install react-native-toast-message