rn-toastify 1.0.11 → 2.0.0

package/src/components/LoadingToast.js

@@ -1,33 +1,24 @@
-// src/components/ToastHelpers/LoadingToast.js
-import React from 'react';
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import {
-    heightPercentageToDP as hp,
-    widthPercentageToDP as wp,
-} from '../utils/Pixel/Index';
-
-const LoadingToast = ({ message, theme = 'light' }) => {
-    const isDark = theme === 'dark';
-    const bg = isDark ? '#111827' : '#FFFFFF';
-    const indicatorColor = isDark ? '#9CA3AF' : '#6B7280';
-
-    return (
-        <View style={[styles.toast, { backgroundColor: bg }]}>
-            <ActivityIndicator size="small" color={indicatorColor} />
-            {/** <Text style={styles.text}>{message}</Text>  */}
-        </View>
-    );
-}
-const styles = StyleSheet.create({
-    toast: {
-        padding: wp(1),
-        borderRadius: wp(10),
-        backgroundColor: 'white',
-    },
-    text: {
-        fontSize: hp(2.2),
-        color: 'black',
-    },
-});
-
-export default LoadingToast;
+import React from 'react';
+import BaseToast from './BaseToast';
+import { LoadingSpinner } from './icons';
+import { TOAST_COLORS, TOAST_DEFAULTS } from '../utils/theme';
+
+const LoadingToast = ({ title, message, theme = 'light', duration }) => {
+    const isDark = theme === 'dark';
+    const colors = TOAST_COLORS.loading;
+
+    return (
+        <BaseToast
+            icon={<LoadingSpinner size={TOAST_DEFAULTS.iconSize - 2} color={isDark ? colors.iconDark : colors.icon} />}
+            title={title || null}
+            message={message || null}
+            accentColor={colors.accent}
+            toastType="loading"
+            theme={theme}
+            duration={duration}
+            showProgress={false}
+        />
+    );
+};
+
+export default React.memo(LoadingToast);

package/src/components/ProgressBar.js

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withDelay,
+    Easing,
+} from 'react-native-reanimated';
+
+/**
+ * ProgressBar — flush edge-to-edge countdown indicator.
+ * Sits at the very bottom of the toast card, no padding.
+ */
+const ProgressBar = ({ duration, color = '#22C55E', trackColor = 'rgba(0,0,0,0.05)' }) => {
+    const progress = useSharedValue(1);
+    const barOpacity = useSharedValue(0);
+
+    useEffect(() => {
+        if (duration && duration !== Infinity) {
+            barOpacity.value = withDelay(200, withTiming(1, { duration: 250 }));
+            progress.value = withTiming(0, {
+                duration: duration,
+                easing: Easing.linear,
+            });
+        }
+    }, [duration]);
+
+    const barStyle = useAnimatedStyle(() => ({
+        width: `${progress.value * 100}%`,
+        opacity: barOpacity.value,
+    }));
+
+    if (!duration || duration === Infinity) return null;
+
+    return (
+        <Animated.View style={styles.track}>
+            <Animated.View style={[styles.trackBg, { backgroundColor: trackColor }]} />
+            <Animated.View
+                style={[
+                    styles.bar,
+                    { backgroundColor: color },
+                    barStyle,
+                ]}
+            />
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    track: {
+        height: 3,
+        width: '100%',
+        position: 'relative',
+    },
+    trackBg: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    bar: {
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+    },
+});
+
+export default React.memo(ProgressBar);

package/src/components/SuccessToast.js

@@ -1,51 +1,23 @@
-import LottieView from 'lottie-react-native';
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import {
-    heightPercentageToDP as hp,
-    widthPercentageToDP as wp,
-} from '../utils/Pixel/Index';
-
-const SuccessToast = ({ message, theme = 'light' }) => {
-    const isDark = theme === 'dark';
-    const containerBg = isDark ? '#111827' : '#F7F7FC';
-    const textColor = isDark ? '#F3F4F6' : '#064E3B';
-
-    return (
-        <View style={[styles.container, { backgroundColor: containerBg }]}>
-            <LottieView
-                source={require('../../assets/animated_Icon/SuccessAnimation.json')}  // Replace with your success Lottie animation path
-                autoPlay
-                loop={false}
-                style={styles.lottie}
-                speed={1.2}
-            />
-            <Text style={[styles.text, { color: textColor }]}>{message}</Text>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        width: wp(87),
-        height: hp(6.8),
-        paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-            // backgroundColor: '#d2f7d2',
-            backgroundColor: '#F7F7FC',
-        alignItems: 'center',
-        flexDirection: 'row',
-    },
-    text: {
-        fontSize: hp(2.3),
-        color: 'black',
-        fontWeight: '500',
-        paddingHorizontal: wp(3)
-    },
-    lottie: {
-        width: wp(8),
-        height: hp(4),
-    },
-});
-
-export default SuccessToast;
+import React from 'react';
+import BaseToast from './BaseToast';
+import { CheckIcon } from './icons';
+import { TOAST_COLORS, TOAST_DEFAULTS } from '../utils/theme';
+
+const SuccessToast = ({ title, message, theme = 'light', duration }) => {
+    const isDark = theme === 'dark';
+    const colors = TOAST_COLORS.success;
+
+    return (
+        <BaseToast
+            icon={<CheckIcon size={TOAST_DEFAULTS.iconSize} color={isDark ? colors.iconDark : colors.icon} />}
+            title={title || null}
+            message={message || null}
+            accentColor={colors.accent}
+            toastType="success"
+            theme={theme}
+            duration={duration}
+        />
+    );
+};
+
+export default React.memo(SuccessToast);

package/src/components/WarningToast.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import BaseToast from './BaseToast';
+import { WarningIcon } from './icons';
+import { TOAST_COLORS, TOAST_DEFAULTS } from '../utils/theme';
+
+const WarningToast = ({ title, message, theme = 'light', duration }) => {
+    const isDark = theme === 'dark';
+    const colors = TOAST_COLORS.warning;
+
+    return (
+        <BaseToast
+            icon={<WarningIcon size={TOAST_DEFAULTS.iconSize} color={isDark ? colors.iconDark : colors.icon} />}
+            title={title || null}
+            message={message || null}
+            accentColor={colors.accent}
+            toastType="warning"
+            theme={theme}
+            duration={duration}
+        />
+    );
+};
+
+export default React.memo(WarningToast);

package/src/components/icons/CheckIcon.js

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withDelay,
+    withSpring,
+    Easing,
+    interpolate,
+} from 'react-native-reanimated';
+
+/**
+ * CheckIcon — Animated checkmark.
+ * Clean two-stroke design that draws in sequentially.
+ */
+const CheckIcon = ({ size = 22, color = '#16A34A', animated = true }) => {
+    const progress = useSharedValue(animated ? 0 : 1);
+
+    useEffect(() => {
+        if (animated) {
+            progress.value = withDelay(
+                100,
+                withTiming(1, { duration: 450, easing: Easing.out(Easing.cubic) })
+            );
+        }
+    }, [animated]);
+
+    const stroke = Math.max(2, size * 0.12);
+    const shortLen = size * 0.3;
+    const longLen = size * 0.5;
+
+    const leftBarStyle = useAnimatedStyle(() => {
+        const p = interpolate(progress.value, [0, 0.45], [0, 1], 'clamp');
+        return {
+            transform: [{ rotate: '45deg' }, { scaleY: p }],
+            opacity: p,
+        };
+    });
+
+    const rightBarStyle = useAnimatedStyle(() => {
+        const p = interpolate(progress.value, [0.3, 1], [0, 1], 'clamp');
+        return {
+            transform: [{ rotate: '-45deg' }, { scaleY: p }],
+            opacity: p,
+        };
+    });
+
+    return (
+        <View style={[styles.container, { width: size, height: size }]}>
+            <View style={[styles.checkWrap, { width: size * 0.6, height: size * 0.6 }]}>
+                <Animated.View
+                    style={[
+                        {
+                            position: 'absolute',
+                            bottom: 0,
+                            left: 0,
+                            width: stroke,
+                            height: shortLen,
+                            backgroundColor: color,
+                            borderRadius: stroke,
+                            transformOrigin: 'bottom',
+                        },
+                        leftBarStyle,
+                    ]}
+                />
+                <Animated.View
+                    style={[
+                        {
+                            position: 'absolute',
+                            bottom: 0,
+                            left: stroke * 0.4,
+                            width: stroke,
+                            height: longLen,
+                            backgroundColor: color,
+                            borderRadius: stroke,
+                            transformOrigin: 'bottom',
+                        },
+                        rightBarStyle,
+                    ]}
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkWrap: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default React.memo(CheckIcon);

package/src/components/icons/CrossIcon.js

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withDelay,
+    Easing,
+    interpolate,
+} from 'react-native-reanimated';
+
+/**
+ * CrossIcon — Animated X mark.
+ * Two strokes that draw in sequentially with a cross shape.
+ */
+const CrossIcon = ({ size = 22, color = '#DC2626', animated = true }) => {
+    const progress = useSharedValue(animated ? 0 : 1);
+
+    useEffect(() => {
+        if (animated) {
+            progress.value = withDelay(
+                100,
+                withTiming(1, { duration: 400, easing: Easing.out(Easing.cubic) })
+            );
+        }
+    }, [animated]);
+
+    const stroke = Math.max(2, size * 0.12);
+    const barLen = size * 0.5;
+
+    const bar1Style = useAnimatedStyle(() => {
+        const p = interpolate(progress.value, [0, 0.55], [0, 1], 'clamp');
+        return {
+            transform: [{ rotate: '45deg' }, { scaleY: p }],
+            opacity: p,
+        };
+    });
+
+    const bar2Style = useAnimatedStyle(() => {
+        const p = interpolate(progress.value, [0.3, 1], [0, 1], 'clamp');
+        return {
+            transform: [{ rotate: '-45deg' }, { scaleY: p }],
+            opacity: p,
+        };
+    });
+
+    return (
+        <View style={[styles.container, { width: size, height: size }]}>
+            <Animated.View
+                style={[
+                    {
+                        position: 'absolute',
+                        width: stroke,
+                        height: barLen,
+                        backgroundColor: color,
+                        borderRadius: stroke,
+                    },
+                    bar1Style,
+                ]}
+            />
+            <Animated.View
+                style={[
+                    {
+                        position: 'absolute',
+                        width: stroke,
+                        height: barLen,
+                        backgroundColor: color,
+                        borderRadius: stroke,
+                    },
+                    bar2Style,
+                ]}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default React.memo(CrossIcon);

package/src/components/icons/InfoIcon.js

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withDelay,
+    Easing,
+} from 'react-native-reanimated';
+
+/**
+ * InfoIcon — Animated "i" information symbol.
+ * Dot + vertical bar that fade in.
+ */
+const InfoIcon = ({ size = 22, color = '#2563EB', animated = true }) => {
+    const opacity = useSharedValue(animated ? 0 : 1);
+
+    useEffect(() => {
+        if (animated) {
+            opacity.value = withDelay(
+                100,
+                withTiming(1, { duration: 350, easing: Easing.out(Easing.cubic) })
+            );
+        }
+    }, [animated]);
+
+    const contentStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+    }));
+
+    const dotSize = Math.max(3, size * 0.16);
+    const barW = Math.max(2, size * 0.12);
+    const barH = size * 0.35;
+
+    return (
+        <View style={[styles.container, { width: size, height: size }]}>
+            <Animated.View style={[styles.content, contentStyle]}>
+                <View
+                    style={{
+                        width: dotSize,
+                        height: dotSize,
+                        borderRadius: dotSize / 2,
+                        backgroundColor: color,
+                        marginBottom: size * 0.08,
+                    }}
+                />
+                <View
+                    style={{
+                        width: barW,
+                        height: barH,
+                        backgroundColor: color,
+                        borderRadius: barW,
+                    }}
+                />
+            </Animated.View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default React.memo(InfoIcon);

package/src/components/icons/LoadingSpinner.js

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withRepeat,
+    withTiming,
+    Easing,
+} from 'react-native-reanimated';
+
+/**
+ * LoadingSpinner — Smooth spinning arc.
+ * Thin track with a spinning colored arc segment.
+ */
+const LoadingSpinner = ({ size = 22, color = '#7C3AED' }) => {
+    const rotation = useSharedValue(0);
+
+    useEffect(() => {
+        rotation.value = withRepeat(
+            withTiming(360, { duration: 850, easing: Easing.linear }),
+            -1,
+            false
+        );
+    }, []);
+
+    const spinStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+
+    const arcW = Math.max(2, size * 0.11);
+
+    return (
+        <View style={[styles.container, { width: size, height: size }]}>
+            <View
+                style={[
+                    styles.track,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        borderWidth: arcW,
+                        borderColor: color + '20',
+                    },
+                ]}
+            />
+            <Animated.View
+                style={[
+                    styles.arc,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        borderWidth: arcW,
+                        borderColor: 'transparent',
+                        borderTopColor: color,
+                        borderRightColor: color + '50',
+                    },
+                    spinStyle,
+                ]}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    track: {
+        position: 'absolute',
+    },
+    arc: {
+        position: 'absolute',
+    },
+});
+
+export default React.memo(LoadingSpinner);

package/src/components/icons/WarningIcon.js

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withDelay,
+    withSequence,
+    Easing,
+} from 'react-native-reanimated';
+
+/**
+ * WarningIcon — Animated exclamation mark with subtle shake.
+ * Bar + dot that fade in, followed by a quick shake.
+ */
+const WarningIcon = ({ size = 22, color = '#D97706', animated = true }) => {
+    const opacity = useSharedValue(animated ? 0 : 1);
+    const shake = useSharedValue(0);
+
+    useEffect(() => {
+        if (animated) {
+            opacity.value = withDelay(
+                100,
+                withTiming(1, { duration: 350, easing: Easing.out(Easing.cubic) })
+            );
+            shake.value = withDelay(
+                350,
+                withSequence(
+                    withTiming(-2.5, { duration: 40 }),
+                    withTiming(2.5, { duration: 40 }),
+                    withTiming(-1.5, { duration: 40 }),
+                    withTiming(1.5, { duration: 40 }),
+                    withTiming(0, { duration: 40 })
+                )
+            );
+        }
+    }, [animated]);
+
+    const contentStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ translateX: shake.value }],
+    }));
+
+    const barW = Math.max(2, size * 0.12);
+    const barH = size * 0.35;
+    const dotSize = Math.max(3, size * 0.16);
+
+    return (
+        <View style={[styles.container, { width: size, height: size }]}>
+            <Animated.View style={[styles.content, contentStyle]}>
+                <View
+                    style={{
+                        width: barW,
+                        height: barH,
+                        backgroundColor: color,
+                        borderRadius: barW,
+                        marginBottom: size * 0.08,
+                    }}
+                />
+                <View
+                    style={{
+                        width: dotSize,
+                        height: dotSize,
+                        borderRadius: dotSize / 2,
+                        backgroundColor: color,
+                    }}
+                />
+            </Animated.View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default React.memo(WarningIcon);

package/src/components/icons/index.js

@@ -0,0 +1,5 @@
+export { default as CheckIcon } from './CheckIcon';
+export { default as CrossIcon } from './CrossIcon';
+export { default as InfoIcon } from './InfoIcon';
+export { default as WarningIcon } from './WarningIcon';
+export { default as LoadingSpinner } from './LoadingSpinner';