react-native-popify 0.1.0

package/src/PopifyAlert.js

@@ -0,0 +1,809 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Platform,
+} from 'react-native';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// ─── Type Configs ────────────────────────────────────────────
+const TYPE_CONFIG = {
+  success: { color: '#00C853', bg: '#F1FBF4', icon: '✓' },
+  error: { color: '#FF3D71', bg: '#FFF2F2', icon: '✕' },
+  warning: { color: '#FFAA00', bg: '#FFFBF0', icon: '!' },
+  info: { color: '#3366FF', bg: '#F0F4FF', icon: 'i' },
+};
+
+const DARK_BG = {
+  success: '#152E1B',
+  error: '#2E1520',
+  warning: '#2E2815',
+  info: '#151E2E',
+};
+
+const PARTICLE_COUNT = 10;
+
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+
+// ─── Animated Pressable Button ──────────────────────────────
+const PressableButton = ({
+  onPress,
+  style,
+  textStyle,
+  label,
+  color,
+  outline,
+}) => {
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  return (
+    <AnimatedTouchable
+      activeOpacity={0.85}
+      onPressIn={() =>
+        Animated.spring(scaleAnim, {
+          toValue: 0.93,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 4,
+        }).start()
+      }
+      onPressOut={() =>
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          speed: 20,
+          bounciness: 10,
+        }).start()
+      }
+      onPress={onPress}
+      style={[
+        btnStyles.base,
+        outline
+          ? [btnStyles.outline, { borderColor: color }]
+          : {
+              backgroundColor: color,
+              ...Platform.select({
+                ios: {
+                  shadowColor: color,
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowOpacity: 0.3,
+                  shadowRadius: 8,
+                },
+                android: { elevation: 6 },
+              }),
+            },
+        { transform: [{ scale: scaleAnim }] },
+        style,
+      ]}
+    >
+      <Text style={[btnStyles.text, outline && { color: color }, textStyle]}>
+        {label}
+      </Text>
+    </AnimatedTouchable>
+  );
+};
+
+const btnStyles = StyleSheet.create({
+  base: {
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 110,
+  },
+  text: {
+    color: '#FFF',
+    fontSize: 15,
+    fontWeight: '700',
+    letterSpacing: 0.3,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+  },
+});
+
+// ─── PopifyAlert ────────────────────────────────────────────
+const PopifyAlert = ({
+  visible = false,
+  type = 'info',
+  title,
+  message,
+  onClose,
+  buttons = [],
+  // Style overrides
+  titleStyle,
+  messageStyle,
+  containerStyle,
+  overlayStyle,
+  // Animation
+  animationType = 'spring', // 'spring' | 'slideUp' | 'fadeIn'
+  duration = 350,
+  // Features
+  autoClose = false,
+  autoCloseDuration = 3000,
+  showCloseButton = true,
+  showIcon = true,
+  showParticles = false,
+  customIcon,
+  // Layout
+  buttonLayout = 'auto', // 'horizontal' | 'vertical' | 'auto'
+  // Theme
+  theme = 'light', // 'light' | 'dark'
+  // Custom renders
+  renderHeader,
+  renderFooter,
+}) => {
+  const config = TYPE_CONFIG[type] || TYPE_CONFIG.info;
+  const isDark = theme === 'dark';
+
+  // ── Animated values ──
+  const overlayAnim = useRef(new Animated.Value(0)).current;
+  const cardScale = useRef(new Animated.Value(0.6)).current;
+  const cardOpacity = useRef(new Animated.Value(0)).current;
+  const cardTranslateY = useRef(new Animated.Value(60)).current;
+  const iconScale = useRef(new Animated.Value(0)).current;
+  const iconRotate = useRef(new Animated.Value(0)).current;
+  const progressAnim = useRef(new Animated.Value(1)).current;
+  const contentOpacity = useRef(new Animated.Value(0)).current;
+  const contentTranslateY = useRef(new Animated.Value(15)).current;
+
+  // Per-button anims (max 6)
+  const btnAnims = useRef(
+    Array.from({ length: 6 }, () => new Animated.Value(0))
+  ).current;
+
+  // Particles
+  const particles = useRef(
+    Array.from({ length: PARTICLE_COUNT }, () => ({
+      x: new Animated.Value(0),
+      y: new Animated.Value(0),
+      opacity: new Animated.Value(0),
+      scale: new Animated.Value(0),
+    }))
+  ).current;
+
+  const autoCloseRef = useRef(null);
+
+  // ── Reset ──
+  const reset = useCallback(() => {
+    overlayAnim.setValue(0);
+    cardScale.setValue(0.6);
+    cardOpacity.setValue(0);
+    cardTranslateY.setValue(animationType === 'slideUp' ? 120 : 60);
+    iconScale.setValue(0);
+    iconRotate.setValue(0);
+    progressAnim.setValue(1);
+    contentOpacity.setValue(0);
+    contentTranslateY.setValue(15);
+    btnAnims.forEach((a) => a.setValue(0));
+    particles.forEach((p) => {
+      p.x.setValue(0);
+      p.y.setValue(0);
+      p.opacity.setValue(0);
+      p.scale.setValue(0);
+    });
+  }, [
+    animationType,
+    overlayAnim,
+    cardScale,
+    cardOpacity,
+    cardTranslateY,
+    iconScale,
+    iconRotate,
+    progressAnim,
+    contentOpacity,
+    contentTranslateY,
+    btnAnims,
+    particles,
+  ]);
+
+  // ── Animate In ──
+  const animateIn = useCallback(() => {
+    reset();
+
+    // Overlay
+    Animated.timing(overlayAnim, {
+      toValue: 1,
+      duration: 280,
+      useNativeDriver: true,
+    }).start();
+
+    // Card
+    const springCfg = { tension: 55, friction: 8, useNativeDriver: true };
+    const timingCfg = { duration, useNativeDriver: true };
+    const isSpring = animationType !== 'fadeIn';
+
+    const mkAnim = (anim, toValue) =>
+      isSpring
+        ? Animated.spring(anim, { toValue, ...springCfg })
+        : Animated.timing(anim, { toValue, ...timingCfg });
+
+    Animated.parallel([
+      mkAnim(cardScale, 1),
+      mkAnim(cardTranslateY, 0),
+      Animated.timing(cardOpacity, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    // Content fade-in
+    setTimeout(() => {
+      Animated.parallel([
+        Animated.timing(contentOpacity, {
+          toValue: 1,
+          duration: 280,
+          useNativeDriver: true,
+        }),
+        Animated.spring(contentTranslateY, {
+          toValue: 0,
+          tension: 60,
+          friction: 10,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }, 150);
+
+    // Icon bounce
+    setTimeout(() => {
+      Animated.spring(iconScale, {
+        toValue: 1,
+        tension: 35,
+        friction: 5,
+        useNativeDriver: true,
+      }).start();
+
+      Animated.timing(iconRotate, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true,
+      }).start();
+    }, 250);
+
+    // Buttons stagger
+    setTimeout(() => {
+      Animated.stagger(
+        70,
+        btnAnims.slice(0, buttons.length).map((anim) =>
+          Animated.spring(anim, {
+            toValue: 1,
+            tension: 55,
+            friction: 9,
+            useNativeDriver: true,
+          })
+        )
+      ).start();
+    }, 300);
+
+    // Particles burst
+    if (showParticles) {
+      setTimeout(() => {
+        const pAnims = particles.map((p, i) => {
+          const angle =
+            (i / PARTICLE_COUNT) * 2 * Math.PI + Math.random() * 0.3;
+          const radius = 45 + Math.random() * 35;
+          return Animated.parallel([
+            Animated.timing(p.x, {
+              toValue: Math.cos(angle) * radius,
+              duration: 650,
+              useNativeDriver: true,
+            }),
+            Animated.timing(p.y, {
+              toValue: Math.sin(angle) * radius,
+              duration: 650,
+              useNativeDriver: true,
+            }),
+            Animated.sequence([
+              Animated.timing(p.opacity, {
+                toValue: 1,
+                duration: 80,
+                useNativeDriver: true,
+              }),
+              Animated.timing(p.opacity, {
+                toValue: 0,
+                duration: 570,
+                useNativeDriver: true,
+              }),
+            ]),
+            Animated.sequence([
+              Animated.spring(p.scale, {
+                toValue: 1.8,
+                tension: 80,
+                friction: 5,
+                useNativeDriver: true,
+              }),
+              Animated.timing(p.scale, {
+                toValue: 0,
+                duration: 450,
+                useNativeDriver: true,
+              }),
+            ]),
+          ]);
+        });
+        Animated.stagger(35, pAnims).start();
+      }, 450);
+    }
+
+    // Auto close
+    if (autoClose && onClose) {
+      Animated.timing(progressAnim, {
+        toValue: 0,
+        duration: autoCloseDuration,
+        useNativeDriver: false,
+      }).start();
+      autoCloseRef.current = setTimeout(onClose, autoCloseDuration);
+    }
+  }, [
+    animationType,
+    autoClose,
+    autoCloseDuration,
+    showParticles,
+    buttons.length,
+    reset,
+    overlayAnim,
+    cardScale,
+    cardTranslateY,
+    cardOpacity,
+    contentOpacity,
+    contentTranslateY,
+    iconScale,
+    iconRotate,
+    btnAnims,
+    particles,
+    progressAnim,
+    onClose,
+    duration,
+  ]);
+
+  // ── Animate Out ──
+  const animateOut = useCallback(() => {
+    if (autoCloseRef.current) clearTimeout(autoCloseRef.current);
+
+    Animated.parallel([
+      Animated.timing(overlayAnim, {
+        toValue: 0,
+        duration: 180,
+        useNativeDriver: true,
+      }),
+      Animated.timing(cardScale, {
+        toValue: 0.6,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(cardOpacity, {
+        toValue: 0,
+        duration: 180,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [overlayAnim, cardScale, cardOpacity]);
+
+  useEffect(() => {
+    if (visible) animateIn();
+    else animateOut();
+    return () => {
+      if (autoCloseRef.current) clearTimeout(autoCloseRef.current);
+    };
+  }, [visible, animateIn, animateOut]);
+
+  // ── Derived ──
+  const iconSpin = iconRotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const layout =
+    buttonLayout === 'auto'
+      ? buttons.length <= 2
+        ? 'horizontal'
+        : 'vertical'
+      : buttonLayout;
+
+  const cardBg = isDark ? DARK_BG[type] || '#1A1A2E' : '#FFFFFF';
+  const titleColor = isDark ? '#F0F0F5' : '#1A1A2E';
+  const msgColor = isDark ? '#A0A0B0' : '#6B6B80';
+
+  const particleColors = [
+    config.color,
+    config.color + 'CC',
+    config.color + '99',
+    config.color + '66',
+    '#FFD700',
+  ];
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="none"
+      statusBarTranslucent
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <Animated.View
+          style={[
+            styles.overlay,
+            { opacity: overlayAnim },
+            isDark && styles.overlayDark,
+            overlayStyle,
+          ]}
+        >
+          <TouchableWithoutFeedback>
+            <Animated.View
+              style={[
+                styles.card,
+                {
+                  backgroundColor: cardBg,
+                  opacity: cardOpacity,
+                  transform: [
+                    { scale: cardScale },
+                    { translateY: cardTranslateY },
+                  ],
+                },
+                isDark && styles.cardDark,
+                containerStyle,
+              ]}
+            >
+              {/* ── Header Banner ── */}
+              <View style={[styles.banner, { backgroundColor: config.color }]}>
+                <View style={styles.bannerShine} />
+                <View style={styles.bannerDots}>
+                  {[0.15, 0.08, 0.12].map((op, i) => (
+                    <View
+                      key={i}
+                      style={[
+                        styles.bannerDot,
+                        {
+                          opacity: op,
+                          width: 40 + i * 30,
+                          height: 40 + i * 30,
+                          borderRadius: 20 + i * 15,
+                          left: -10 + i * 80,
+                          top: -10 + i * 5,
+                        },
+                      ]}
+                    />
+                  ))}
+                </View>
+                {renderHeader && renderHeader()}
+              </View>
+
+              {/* ── Close Button ── */}
+              {showCloseButton && onClose && (
+                <TouchableOpacity
+                  style={styles.closeBtn}
+                  onPress={onClose}
+                  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+                >
+                  <Text style={styles.closeBtnText}>✕</Text>
+                </TouchableOpacity>
+              )}
+
+              {/* ── Icon ── */}
+              {showIcon && (
+                <View style={styles.iconWrap}>
+                  <Animated.View
+                    style={[
+                      styles.iconCircleOuter,
+                      {
+                        backgroundColor: cardBg,
+                        transform: [{ scale: iconScale }],
+                      },
+                    ]}
+                  >
+                    <Animated.View
+                      style={[
+                        styles.iconCircle,
+                        {
+                          backgroundColor: config.color,
+                          transform: [{ rotate: iconSpin }],
+                          ...Platform.select({
+                            ios: {
+                              shadowColor: config.color,
+                              shadowOffset: { width: 0, height: 6 },
+                              shadowOpacity: 0.45,
+                              shadowRadius: 14,
+                            },
+                            android: { elevation: 14 },
+                          }),
+                        },
+                      ]}
+                    >
+                      <View style={styles.iconRing}>
+                        {customIcon || (
+                          <Text style={styles.iconChar}>{config.icon}</Text>
+                        )}
+                      </View>
+                    </Animated.View>
+                  </Animated.View>
+
+                  {/* Particles */}
+                  {showParticles &&
+                    particles.map((p, i) => (
+                      <Animated.View
+                        key={i}
+                        style={[
+                          styles.particle,
+                          {
+                            width: 7 + (i % 3) * 2,
+                            height: 7 + (i % 3) * 2,
+                            backgroundColor:
+                              particleColors[i % particleColors.length],
+                            opacity: p.opacity,
+                            transform: [
+                              { translateX: p.x },
+                              { translateY: p.y },
+                              { scale: p.scale },
+                            ],
+                          },
+                        ]}
+                      />
+                    ))}
+                </View>
+              )}
+
+              {/* ── Content ── */}
+              <Animated.View
+                style={[
+                  styles.content,
+                  {
+                    opacity: contentOpacity,
+                    transform: [{ translateY: contentTranslateY }],
+                  },
+                ]}
+              >
+                {title && (
+                  <Text
+                    style={[styles.title, { color: titleColor }, titleStyle]}
+                  >
+                    {title}
+                  </Text>
+                )}
+                {message && (
+                  <Text
+                    style={[styles.message, { color: msgColor }, messageStyle]}
+                  >
+                    {message}
+                  </Text>
+                )}
+              </Animated.View>
+
+              {/* ── Buttons ── */}
+              {buttons.length > 0 && (
+                <View
+                  style={[
+                    styles.btnWrap,
+                    layout === 'horizontal' && styles.btnWrapRow,
+                  ]}
+                >
+                  {buttons.map((btn, idx) => {
+                    const anim = btnAnims[idx];
+                    return (
+                      <Animated.View
+                        key={idx}
+                        style={[
+                          layout === 'horizontal'
+                            ? styles.btnItemHorizontal
+                            : styles.btnItemVertical,
+                          {
+                            opacity: anim,
+                            transform: [
+                              {
+                                translateY: anim.interpolate({
+                                  inputRange: [0, 1],
+                                  outputRange: [18, 0],
+                                }),
+                              },
+                            ],
+                          },
+                        ]}
+                      >
+                        {/* <PressableButton
+                          label={btn.label}
+                          onPress={btn.onPress}
+                          color={btn.color || config.color}
+                          outline={btn.outline}
+                          style={btn.style}
+                          textStyle={btn.textStyle}
+                        /> */}
+                      </Animated.View>
+                    );
+                  })}
+                </View>
+              )}
+
+              {/* ── Auto-close Progress ── */}
+              {autoClose && (
+                <View style={styles.progressWrap}>
+                  <Animated.View
+                    style={[
+                      styles.progressBar,
+                      {
+                        backgroundColor: config.color,
+                        width: progressAnim.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: ['0%', '100%'],
+                        }),
+                      },
+                    ]}
+                  />
+                </View>
+              )}
+
+              {/* ── Footer ── */}
+              {renderFooter && (
+                <View style={styles.footer}>{renderFooter()}</View>
+              )}
+            </Animated.View>
+          </TouchableWithoutFeedback>
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+// ─── Styles ─────────────────────────────────────────────────
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(15,15,35,0.55)',
+    padding: 20,
+  },
+  card: {
+    width: Math.min(SCREEN_WIDTH - 48, 380),
+    borderRadius: 28,
+    overflow: 'hidden',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 24 },
+        shadowOpacity: 0.2,
+        shadowRadius: 32,
+      },
+      android: { elevation: 28 },
+    }),
+  },
+  banner: {
+    height: 85,
+    overflow: 'hidden',
+  },
+  bannerShine: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255,255,255,0.12)',
+  },
+  bannerDots: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  bannerDot: {
+    position: 'absolute',
+    backgroundColor: '#FFF',
+  },
+  closeBtn: {
+    position: 'absolute',
+    top: 14,
+    right: 14,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: 'rgba(0,0,0,0.18)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  closeBtnText: {
+    color: '#FFF',
+    fontSize: 13,
+    fontWeight: '800',
+  },
+  iconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: -38,
+    height: 76,
+    zIndex: 5,
+  },
+  iconCircleOuter: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 4,
+  },
+  iconCircle: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconRing: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    borderWidth: 2.5,
+    borderColor: 'rgba(255,255,255,0.35)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconChar: {
+    color: '#FFF',
+    fontSize: 28,
+    fontWeight: '900',
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  content: {
+    paddingHorizontal: 26,
+    paddingTop: 14,
+    paddingBottom: 6,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '800',
+    textAlign: 'center',
+    marginBottom: 8,
+    letterSpacing: 0.2,
+  },
+  message: {
+    fontSize: 15,
+    textAlign: 'center',
+    lineHeight: 22,
+    letterSpacing: 0.15,
+  },
+  btnWrap: {
+    paddingHorizontal: 22,
+    paddingTop: 14,
+    paddingBottom: 22,
+  },
+  btnWrapRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  progressWrap: {
+    height: 4,
+    backgroundColor: 'rgba(0,0,0,0.06)',
+    borderBottomLeftRadius: 28,
+    borderBottomRightRadius: 28,
+    overflow: 'hidden',
+  },
+  progressBar: {
+    height: 4,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 18,
+  },
+  overlayDark: {
+    backgroundColor: 'rgba(0,0,0,0.8)',
+  },
+  cardDark: {
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+  particle: {
+    position: 'absolute',
+    borderRadius: 5,
+  },
+  btnItemHorizontal: {
+    flex: 1,
+    marginHorizontal: 5,
+  },
+  btnItemVertical: {
+    width: '100%',
+    marginVertical: 5,
+  },
+});
+
+export default PopifyAlert;