react-native-toast-kit/dist/toast.js

A customizable toast/snackbar notification library for React Native

import React, { useEffect, useRef } from 'react';
import { Animated, StyleSheet, } from 'react-native';
import ToastCard from './toastCard';
var Toast = function (_a) {
    var message = _a.message, _b = _a.msgColor, msgColor = _b === void 0 ? '#000' : _b, msgStyle = _a.msgStyle, _c = _a.subMessage, subMessage = _c === void 0 ? '' : _c, _d = _a.subMsgColor, subMsgColor = _d === void 0 ? '#333' : _d, subMsgStyle = _a.subMsgStyle, borderColor = _a.borderColor, bgColor = _a.bgColor, _e = _a.borderWidth, borderWidth = _e === void 0 ? 1 : _e, _f = _a.borderRadius, borderRadius = _f === void 0 ? 12 : _f, icon = _a.icon, _g = _a.iconPosition, iconPosition = _g === void 0 ? 'center' : _g, _h = _a.iconSpacing, iconSpacing = _h === void 0 ? 12 : _h, type = _a.type, _j = _a.duration, duration = _j === void 0 ? 300 : _j, _k = _a.position, position = _k === void 0 ? 'bottom' : _k, _l = _a.slideDirection, slideDirection = _l === void 0 ? 'none' : _l, onClose = _a.onClose, _m = _a.actionText, actionText = _m === void 0 ? '' : _m, actionTextStyle = _a.actionTextStyle, _o = _a.actionTextColor, actionTextColor = _o === void 0 ? '' : _o, onActionPress = _a.onActionPress, _p = _a.autoDismiss, autoDismiss = _p === void 0 ? true : _p, _q = _a.variant, variant = _q === void 0 ? "solid" : _q, customToast = _a.customToast;
    var translateX = useRef(new Animated.Value(slideDirection === 'left' ? -300 : 300)).current;
    var translateY = useRef(new Animated.Value(position === 'top' ? -100 : 100)).current;
    var initialX = slideDirection === 'left' ? -300 :
        slideDirection === 'right' ? 300 : 0;
    var initialY = position === 'top' ? -100 :
        position === 'bottom' ? 100 : 0;
    useEffect(function () {
        var enterAnimation = Animated.parallel([Animated.timing(translateX, {
                toValue: 0,
                duration: 300,
                useNativeDriver: true,
            }),
            Animated.timing(translateY, {
                toValue: 0,
                duration: 300,
                useNativeDriver: true,
            })]);
        var exitAnimation = Animated.parallel([
            Animated.timing(translateX, {
                toValue: initialX,
                duration: 300,
                useNativeDriver: true,
            }),
            Animated.timing(translateY, {
                toValue: initialY,
                duration: 300,
                useNativeDriver: true,
            })
        ]);
        var animationSequence = autoDismiss ? Animated.sequence([
            enterAnimation,
            Animated.delay(duration),
            exitAnimation
        ])
            :
                Animated.sequence([
                    enterAnimation,
                    Animated.delay(duration),
                ]);
        animationSequence.start(function () {
            if (autoDismiss) {
                onClose === null || onClose === void 0 ? void 0 : onClose();
            }
        });
    }, []);
    var getTransformStyle = function () {
        if (position == "center" && slideDirection === 'none') {
            return;
        }
        if (slideDirection === 'left' || slideDirection === 'right' || position === 'center') {
            return {
                transform: [
                    { translateX: translateX },
                ],
            };
        }
        else if (slideDirection === 'none') {
            return {
                transform: [
                    { translateY: translateY },
                ],
            };
        }
        ;
    };
    var toastComponent = customToast !== null && customToast !== void 0 ? customToast : (<ToastCard message={message} subMessage={subMessage} type={type} icon={icon} iconPosition={iconPosition} iconSpacing={iconSpacing} msgColor={msgColor} msgStyle={msgStyle} subMsgColor={subMsgColor} subMsgStyle={subMsgStyle} borderColor={borderColor} bgColor={bgColor} borderWidth={borderWidth} borderRadius={borderRadius} actionText={actionText} actionTextColor={actionTextColor} actionTextStyle={actionTextStyle} onActionPress={onActionPress} onClose={onClose} variant={variant} autoDismiss={autoDismiss}/>);
    return (<Animated.View style={[
            styles.toast,
            getTransformStyle(),
            {
                top: position === 'top' ? 20 : undefined,
                bottom: position === 'bottom' ? 20 : undefined,
            },
        ]}>
      {toastComponent}

    </Animated.View>);
};
var styles = StyleSheet.create({
    toast: {
        position: 'absolute',
        borderRadius: 8,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    message: {
        color: '#fff',
        fontSize: 16,
        flex: 1,
    },
    action: {
        color: '#fff',
        fontWeight: 'bold',
        marginLeft: 12,
    },
});
export default Toast;