react-native-animated-content-scroll/lib/module/Components/AnimatedContentScroll/AnimatedContentScroll.js

Animated content scroll component for React Native with directional slide-in animations

"use strict";

import { useEffect, useRef } from "react";
import { Animated } from "react-native";
import { jsx as _jsx } from "react/jsx-runtime";
export function AnimatedContentScroll({
  children,
  index = 10,
  direction = "right",
  distance = 50,
  duration = 500,
  margin = 5
}) {
  const opacity = useRef(new Animated.Value(0)).current;
  const translateX = useRef(new Animated.Value(0)).current;
  const translateY = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    // Configurar valores iniciales según la dirección
    const initialValues = getInitialValues(direction, distance);
    translateX.setValue(initialValues.x);
    translateY.setValue(initialValues.y);

    // Ejecutar animación
    const animation = Animated.parallel([Animated.timing(opacity, {
      toValue: 1,
      duration,
      useNativeDriver: true,
      delay: index * 20
    }), Animated.timing(translateX, {
      toValue: 0,
      duration,
      useNativeDriver: true,
      delay: index * 20
    }), Animated.timing(translateY, {
      toValue: 0,
      duration,
      useNativeDriver: true,
      delay: index * 20
    })]);
    animation.start();

    // Cleanup function
    return () => {
      animation.stop();
    };
  }, [opacity, translateX, translateY, index, direction, distance, duration]);

  // Calcular márgenes para reservar espacio (solo horizontales)
  const getContainerMargins = (direction, margin) => {
    switch (direction) {
      case "left":
        return {
          marginLeft: margin
        };
      case "right":
        return {
          marginRight: margin
        };
      case "top":
      case "bottom":
        return {};
      // No agregar márgenes verticales
      default:
        return {};
    }
  };
  return /*#__PURE__*/_jsx(Animated.View, {
    style: {
      overflow: 'visible',
      position: 'relative',
      ...getContainerMargins(direction, margin)
    },
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: {
        opacity,
        position: 'relative',
        transform: [{
          translateX
        }, {
          translateY
        }]
      },
      children: children
    })
  });
}

// Función auxiliar para obtener valores iniciales según la dirección
function getInitialValues(direction, distance) {
  switch (direction) {
    case "left":
      return {
        x: -distance,
        y: 0
      };
    case "right":
      return {
        x: distance,
        y: 0
      };
    case "top":
      return {
        x: 0,
        y: -distance
      };
    case "bottom":
      return {
        x: 0,
        y: distance
      };
    default:
      return {
        x: 0,
        y: 0
      };
  }
}
//# sourceMappingURL=AnimatedContentScroll.js.map