react-native-popify 0.1.0

package/src/PopifyToast.js

@@ -0,0 +1,302 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  Platform,
+  PanResponder,
+} from 'react-native';
+
+const TOAST_CONFIG = {
+  success: { color: '#00C853', icon: '✓', bg: '#F1FBF4', darkBg: '#152E1B' },
+  error: { color: '#FF3D71', icon: '✕', bg: '#FFF2F2', darkBg: '#2E1520' },
+  warning: { color: '#FFAA00', icon: '!', bg: '#FFFBF0', darkBg: '#2E2815' },
+  info: { color: '#3366FF', icon: 'i', bg: '#F0F4FF', darkBg: '#151E2E' },
+};
+
+const PopifyToast = ({
+  visible = false,
+  type = 'info',
+  message = '',
+  title,
+  position = 'top', // 'top' | 'bottom'
+  duration = 3000,
+  onClose,
+  showProgress = true,
+  showIcon = true,
+  theme = 'light',
+  style,
+  customIcon,
+}) => {
+  const config = TOAST_CONFIG[type] || TOAST_CONFIG.info;
+  const isDark = theme === 'dark';
+
+  const translateY = useRef(
+    new Animated.Value(position === 'top' ? -150 : 150)
+  ).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const scaleX = useRef(new Animated.Value(0.9)).current;
+  const progressAnim = useRef(new Animated.Value(1)).current;
+  const timerRef = useRef(null);
+
+  // Swipe to dismiss
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gs) =>
+        Math.abs(gs.dy) > 10 &&
+        ((position === 'top' && gs.dy < 0) ||
+          (position === 'bottom' && gs.dy > 0)),
+      onPanResponderMove: (_, gs) => {
+        translateY.setValue(gs.dy);
+      },
+      onPanResponderRelease: (_, gs) => {
+        if (Math.abs(gs.dy) > 40) {
+          dismiss();
+        } else {
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            tension: 60,
+            friction: 10,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  const dismiss = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: position === 'top' ? -150 : 150,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start(() => onClose && onClose());
+  }, [position, onClose, translateY, opacity]);
+
+  const animateIn = useCallback(() => {
+    translateY.setValue(position === 'top' ? -150 : 150);
+    opacity.setValue(0);
+    scaleX.setValue(0.9);
+    progressAnim.setValue(1);
+
+    Animated.parallel([
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 50,
+        friction: 8,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.spring(scaleX, {
+        toValue: 1,
+        useNativeDriver: true,
+        tension: 50,
+        friction: 8,
+      }),
+    ]).start();
+
+    if (showProgress && duration > 0) {
+      Animated.timing(progressAnim, {
+        toValue: 0,
+        duration: duration,
+        useNativeDriver: false,
+      }).start();
+    }
+
+    if (duration > 0) {
+      timerRef.current = setTimeout(dismiss, duration);
+    }
+  }, [
+    position,
+    duration,
+    showProgress,
+    dismiss,
+    translateY,
+    opacity,
+    scaleX,
+    progressAnim,
+  ]);
+
+  useEffect(() => {
+    if (visible) {
+      animateIn();
+    } else {
+      dismiss();
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [visible, animateIn, dismiss]);
+
+  if (!visible) return null;
+
+  const bgColor = isDark ? config.darkBg : '#FFFFFF';
+  const textColor = isDark ? '#F0F0F5' : '#1A1A2E';
+  const subColor = isDark ? '#A0A0B0' : '#6B6B80';
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      style={[
+        styles.container,
+        position === 'top' ? styles.top : styles.bottom,
+        {
+          backgroundColor: bgColor,
+          opacity,
+          transform: [{ translateY }, { scaleX }],
+          borderLeftColor: config.color,
+          ...Platform.select({
+            ios: {
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 8 },
+              shadowOpacity: 0.15,
+              shadowRadius: 16,
+            },
+            android: { elevation: 12 },
+          }),
+        },
+        isDark && styles.containerDark,
+        style,
+      ]}
+    >
+      <View style={styles.row}>
+        {/* Icon */}
+        {showIcon && (
+          <View style={[styles.iconCircle, { backgroundColor: config.color }]}>
+            {customIcon || <Text style={styles.iconText}>{config.icon}</Text>}
+          </View>
+        )}
+
+        {/* Content */}
+        <View style={styles.content}>
+          {title && (
+            <Text style={[styles.title, { color: textColor }]}>{title}</Text>
+          )}
+          <Text
+            style={[styles.message, { color: title ? subColor : textColor }]}
+            numberOfLines={2}
+          >
+            {message}
+          </Text>
+        </View>
+
+        {/* Close */}
+        <TouchableOpacity
+          style={styles.closeBtn}
+          onPress={dismiss}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <Text style={[styles.closeBtnText, { color: subColor }]}>✕</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Progress Bar */}
+      {showProgress && duration > 0 && (
+        <View style={styles.progressWrap}>
+          <Animated.View
+            style={[
+              styles.progressBar,
+              {
+                backgroundColor: config.color,
+                width: progressAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0%', '100%'],
+                }),
+              },
+            ]}
+          />
+        </View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    maxWidth: 500,
+    alignSelf: 'center',
+    borderRadius: 18,
+    overflow: 'hidden',
+    borderLeftWidth: 5,
+  },
+  top: {
+    top: Platform.OS === 'ios' ? 60 : 40,
+  },
+  bottom: {
+    bottom: Platform.OS === 'ios' ? 50 : 30,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 14,
+    paddingRight: 10,
+  },
+  iconCircle: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  iconText: {
+    color: '#FFF',
+    fontSize: 18,
+    fontWeight: '900',
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '800',
+    marginBottom: 2,
+    letterSpacing: 0.2,
+  },
+  message: {
+    fontSize: 14,
+    lineHeight: 19,
+    letterSpacing: 0.1,
+  },
+  closeBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 8,
+  },
+  closeBtnText: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  progressWrap: {
+    height: 3,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+  },
+  progressBar: {
+    height: 3,
+  },
+  containerDark: {
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+});
+
+export default PopifyToast;

package/src/index.js

@@ -0,0 +1,2 @@
+export { default as PopifyAlert } from './PopifyAlert.js';
+export { default as PopifyToast } from './PopifyToast.js';