Glass Toast

1import React, { useEffect, useRef } from 'react';
2import {
3    Text,
4    StyleSheet,
5    Animated,
6    View,
7    Dimensions,
8    Platform
9} from 'react-native';
10
11export type ToastType = 'success' | 'error' | 'info';
12
13interface GlassToastProps {
14    visible: boolean;
15    message: string;
16    type?: ToastType;
17    duration?: number;
18    onDismiss: () => void;
19}
20

import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text, StatusBar, ImageBackground } from 'react-native';
import GlassToast, { ToastType } from './components/GlassToast';

export default function App() {
    const [toast, setToast] = useState<{ visible: boolean; type: ToastType; msg: string }>({
        visible: false,
        type: 'success',
        msg: '',
    });

    const triggerToast = (type: ToastType, msg: string) => {
        setToast({ visible: true, type, msg });
    };

    return (
        <View style={styles.container}>
            <StatusBar barStyle="light-content" />

            {/* Background image helps show off the "Glass" effect */}