react-native-micro-interactions/lib/module/animations/drop_in.js

Effortlessly enhance your React Native components with subtle micro-interactions and animations.

"use strict";

import { useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
import { filterDropInAnimOptions } from "../utils/animOptionsFilter.js";
import { useCallback } from "react";
export const dropIn = (config, props) => {
  const animationOptions = filterDropInAnimOptions(config, props);
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(50);
  const runIndividualAnimation = useCallback(() => {
    opacity.value = 0;
    translateY.value = 50;
    if (animationOptions.withBounce) {
      translateY.value = withSpring(0, {
        damping: animationOptions.damping
      });
      opacity.value = withTiming(1, {
        duration: animationOptions.duration
      });
    } else {
      opacity.value = withTiming(1, {
        duration: animationOptions.duration
      });
      translateY.value = withTiming(0, {
        duration: animationOptions.duration
      });
    }
  }, [animationOptions, opacity, translateY]);
  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      transform: [{
        translateY: translateY.value
      }]
    };
  }, [opacity, translateY]);
  return {
    animatedStyle,
    runIndividualAnimation
  };
};
//# sourceMappingURL=drop_in.js.map