react-native-fast-animate 0.1.0

package/src/index.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef, useMemo, memo } from 'react';
+import { Animated } from 'react-native';
+import { getAnimationConfig, getAnimationStyle } from './animations';
+import type {
+  AnimateViewProps,
+  AnimateTextProps,
+  AnimateImageProps,
+  BaseAnimateProps,
+} from './types';
+
+/**
+ * Shared hook for animation logic
+ */
+const useFastAnimate = (props: BaseAnimateProps) => {
+  const {
+    type = 'fadeIn',
+    duration = 500,
+    delay = 0,
+    infinite = false,
+    autoStart = true,
+    useNativeDriver = true,
+    damping = 10,
+    stiffness = 100,
+  } = props;
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const animatedStyle = useMemo(() => {
+    return getAnimationStyle(type, animatedValue);
+  }, [type, animatedValue]);
+
+  useEffect(() => {
+    let timeoutId: any;
+
+    if (autoStart) {
+      const run = () => {
+        animatedValue.setValue(0);
+        const animation = getAnimationConfig(
+          type,
+          animatedValue,
+          duration,
+          useNativeDriver,
+          damping,
+          stiffness
+        );
+
+        if (infinite) {
+          Animated.loop(animation).start();
+        } else {
+          animation.start();
+        }
+      };
+
+      if (delay > 0) {
+        timeoutId = setTimeout(run, delay);
+      } else {
+        run();
+      }
+    }
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+      animatedValue.stopAnimation();
+    };
+  }, [
+    type,
+    infinite,
+    autoStart,
+    delay,
+    duration,
+    useNativeDriver,
+    damping,
+    stiffness,
+    animatedValue,
+  ]);
+
+  return animatedStyle;
+};
+
+/**
+ * AnimateView Component
+ */
+export const AnimateView: React.FC<AnimateViewProps> = memo((props) => {
+  const animatedStyle = useFastAnimate(props);
+  const { style, children, ...rest } = props;
+  return (
+    <Animated.View style={[style, animatedStyle]} {...rest}>
+      {children}
+    </Animated.View>
+  );
+});
+
+/**
+ * AnimateText Component
+ */
+export const AnimateText: React.FC<AnimateTextProps> = memo((props) => {
+  const animatedStyle = useFastAnimate(props);
+  const { style, children, ...rest } = props;
+  return (
+    <Animated.Text style={[style, animatedStyle]} {...rest}>
+      {children}
+    </Animated.Text>
+  );
+});
+
+/**
+ * AnimateImage Component
+ */
+export const AnimateImage: React.FC<AnimateImageProps> = memo((props) => {
+  const animatedStyle = useFastAnimate(props);
+  const { style, ...rest } = props;
+  // @ts-ignore - Animated.Image has complex style types
+  return <Animated.Image style={[style, animatedStyle]} {...rest} />;
+});
+
+// Default export and namespace support
+const FastAnimate = Object.assign(AnimateView, {
+  View: AnimateView,
+  Text: AnimateText,
+  Image: AnimateImage,
+});
+
+export default FastAnimate;
+export * from './types';
+export * from './animations';

package/src/types.ts

@@ -0,0 +1,327 @@
+import type { ViewProps, TextProps, ImageProps } from 'react-native';
+
+export type AnimationType =
+  | 'fadeIn'
+  | 'fadeInUp'
+  | 'fadeInDown'
+  | 'fadeInLeft'
+  | 'fadeInRight'
+  | 'fadeInTopLeft'
+  | 'fadeInTopRight'
+  | 'fadeInBottomLeft'
+  | 'fadeInBottomRight'
+  | 'fadeOut'
+  | 'fadeOutUp'
+  | 'fadeOutDown'
+  | 'fadeOutLeft'
+  | 'fadeOutRight'
+  | 'fadeOutTopLeft'
+  | 'fadeOutTopRight'
+  | 'fadeOutBottomLeft'
+  | 'fadeOutBottomRight'
+  | 'slideInUp'
+  | 'slideInDown'
+  | 'slideInLeft'
+  | 'slideInRight'
+  | 'slideInTopLeft'
+  | 'slideInTopRight'
+  | 'slideInBottomLeft'
+  | 'slideInBottomRight'
+  | 'slideOutUp'
+  | 'slideOutDown'
+  | 'slideOutLeft'
+  | 'slideOutRight'
+  | 'slideOutTopLeft'
+  | 'slideOutTopRight'
+  | 'slideOutBottomLeft'
+  | 'slideOutBottomRight'
+  | 'zoomIn'
+  | 'zoomInUp'
+  | 'zoomInDown'
+  | 'zoomInLeft'
+  | 'zoomInRight'
+  | 'zoomInTopLeft'
+  | 'zoomInTopRight'
+  | 'zoomInBottomLeft'
+  | 'zoomInBottomRight'
+  | 'zoomOut'
+  | 'zoomOutUp'
+  | 'zoomOutDown'
+  | 'zoomOutLeft'
+  | 'zoomOutRight'
+  | 'zoomOutTopLeft'
+  | 'zoomOutTopRight'
+  | 'zoomOutBottomLeft'
+  | 'zoomOutBottomRight'
+  | 'backInUp'
+  | 'backInDown'
+  | 'backInLeft'
+  | 'backInRight'
+  | 'backOutUp'
+  | 'backOutDown'
+  | 'backOutLeft'
+  | 'backOutRight'
+  | 'bounce'
+  | 'bounceIn'
+  | 'bounceInUp'
+  | 'bounceInDown'
+  | 'bounceInLeft'
+  | 'bounceInRight'
+  | 'bounceOut'
+  | 'bounceOutUp'
+  | 'bounceOutDown'
+  | 'bounceOutLeft'
+  | 'bounceOutRight'
+  | 'pulse'
+  | 'pulseAlt'
+  | 'shake'
+  | 'shakeX'
+  | 'shakeY'
+  | 'headShake'
+  | 'swing'
+  | 'tada'
+  | 'wobble'
+  | 'jello'
+  | 'heartBeat'
+  | 'flash'
+  | 'rubberBand'
+  | 'flip'
+  | 'flipInX'
+  | 'flipInY'
+  | 'flipOutX'
+  | 'flipOutY'
+  | 'rotateIn'
+  | 'rotateInDownLeft'
+  | 'rotateInDownRight'
+  | 'rotateInUpLeft'
+  | 'rotateInUpRight'
+  | 'rotateOut'
+  | 'rotateOutDownLeft'
+  | 'rotateOutDownRight'
+  | 'rotateOutUpLeft'
+  | 'rotateOutUpRight'
+  | 'lightSpeedInRight'
+  | 'lightSpeedInLeft'
+  | 'lightSpeedOutRight'
+  | 'lightSpeedOutLeft'
+  | 'rollIn'
+  | 'rollOut'
+  | 'jackInTheBox'
+  | 'hinge'
+  | 'spiralIn'
+  | 'spiralOut'
+  | 'focusIn'
+  | 'focusOut'
+  | 'focusInLeft'
+  | 'focusInRight'
+  | 'focusInUp'
+  | 'focusInDown'
+  | 'cornerInTopLeft'
+  | 'cornerInTopRight'
+  | 'cornerInBottomLeft'
+  | 'cornerInBottomRight'
+  | 'cornerOutTopLeft'
+  | 'cornerOutTopRight'
+  | 'cornerOutBottomLeft'
+  | 'cornerOutBottomRight'
+  | 'perspectiveFlipX'
+  | 'perspectiveFlipY'
+  | 'doorOpenLeft'
+  | 'doorOpenRight'
+  | 'doorCloseLeft'
+  | 'doorCloseRight'
+  | 'stretch'
+  | 'stretchX'
+  | 'stretchY'
+  | 'skewIn'
+  | 'skewOut'
+  | 'skewInUp'
+  | 'skewInDown'
+  | 'perspectiveRotate'
+  | 'wave'
+  | 'bounceManual'
+  | 'blink'
+  | 'expandUp'
+  | 'expandDown'
+  | 'expandLeft'
+  | 'expandRight'
+  | 'squeezeX'
+  | 'squeezeY'
+  | 'wiggle'
+  | 'shiver'
+  | 'shutterIn'
+  | 'shutterOut'
+  | 'contractIn'
+  | 'contractOut'
+  | 'puffIn'
+  | 'puffOut'
+  | 'flingInLeft'
+  | 'flingInRight'
+  | 'flingInUp'
+  | 'flingInDown'
+  | 'float'
+  | 'beat'
+  | 'bounceInTopLeft'
+  | 'bounceInTopRight'
+  | 'bounceInBottomLeft'
+  | 'bounceInBottomRight'
+  | 'zoomInRotateLeft'
+  | 'zoomInRotateRight'
+  | 'swingRotate'
+  | 'perspectiveSlideInLeft'
+  | 'perspectiveSlideInRight'
+  | 'tiltLeft'
+  | 'tiltRight'
+  | 'squash'
+  | 'vibrate'
+  | 'sway'
+  | 'floatLeft'
+  | 'floatRight'
+  | 'newspaper'
+  | 'popIn'
+  | 'popOut'
+  | 'popInUp'
+  | 'popInDown'
+  | 'popInLeft'
+  | 'popInRight'
+  | 'popOutUp'
+  | 'popOutDown'
+  | 'popOutLeft'
+  | 'popOutRight'
+  | 'skateInLeft'
+  | 'skateInRight'
+  | 'skateOutLeft'
+  | 'skateOutRight'
+  | 'drip'
+  | 'dropIn'
+  | 'dropOut'
+  | 'hangIn'
+  | 'hangOut'
+  | 'revealUp'
+  | 'revealDown'
+  | 'revealLeft'
+  | 'revealRight'
+  | 'vibrateFast'
+  | 'vibrateSlow'
+  | 'jitter'
+  | 'glitch'
+  | 'glitchSlow'
+  | 'pulseFast'
+  | 'pulseSlow'
+  | 'heartBeatFast'
+  | 'heartBeatSlow'
+  | 'shimmer'
+  | 'shimmerSlow'
+  | 'blinkFast'
+  | 'blinkSlow'
+  | 'bounceInfinite'
+  | 'rotateInfinite'
+  | 'slideInfinite'
+  | 'flipInfinite'
+  | 'flipInfiniteX'
+  | 'flipInfiniteY'
+  | 'swingInfinite'
+  | 'wobbleInfinite'
+  | 'pulseInfinite'
+  | 'jelloInfinite'
+  | 'tiltInTop'
+  | 'tiltInBottom'
+  | 'tiltInLeft'
+  | 'tiltInRight'
+  | 'tiltOutTop'
+  | 'tiltOutBottom'
+  | 'tiltOutLeft'
+  | 'tiltOutRight'
+  | 'scaleIn'
+  | 'scaleOut'
+  | 'scaleInX'
+  | 'scaleInY'
+  | 'scaleOutX'
+  | 'scaleOutY'
+  | 'spinIn'
+  | 'spinOut'
+  | 'spinClockwise'
+  | 'spinCounterClockwise'
+  | 'zoomInRotate'
+  | 'zoomOutRotate'
+  | 'fallIn'
+  | 'fallOut'
+  | 'raiseIn'
+  | 'raiseOut'
+  | 'bounceTop'
+  | 'bounceBottom'
+  | 'bounceLeft'
+  | 'bounceRight'
+  | 'dance'
+  | 'jerk'
+  | 'panic'
+  | 'calm'
+  | 'ghost'
+  | 'smoke'
+  | 'expandUpAlt'
+  | 'expandDownAlt'
+  | 'expandLeftAlt'
+  | 'expandRightAlt'
+  | 'contractUp'
+  | 'contractDown'
+  | 'contractLeft'
+  | 'contractRight'
+  | 'floatUp'
+  | 'floatDown'
+  | 'driftLeft'
+  | 'driftRight'
+  | 'orbit'
+  | 'satellite'
+  | 'ufo'
+  | 'alien'
+  | 'asteroid'
+  | 'flashFast'
+  | 'flashSlow'
+  | 'rubberBandFast'
+  | 'rubberBandSlow'
+  | 'jelloFast'
+  | 'jelloSlow'
+  | 'tadaFast'
+  | 'tadaSlow'
+  | 'perspectiveSlideInUp'
+  | 'perspectiveSlideInDown'
+  | 'perspectiveSlideOutLeft'
+  | 'perspectiveSlideOutRight'
+  | 'foldIn'
+  | 'foldOut'
+  | 'unfoldIn'
+  | 'unfoldOut'
+  | 'rollInLeft'
+  | 'rollInRight'
+  | 'rollOutLeft'
+  | 'rollOutRight'
+  | 'bounceInRotate'
+  | 'bounceOutRotate'
+  | 'skewInTop'
+  | 'skewInBottom'
+  | 'skewOutTop'
+  | 'skewOutBottom';
+
+export interface BaseAnimateProps {
+  type?: AnimationType;
+  duration?: number;
+  delay?: number;
+  infinite?: boolean;
+  autoStart?: boolean;
+  useNativeDriver?: boolean;
+  damping?: number;
+  stiffness?: number;
+}
+
+export interface AnimateViewProps extends ViewProps, BaseAnimateProps {
+  children?: React.ReactNode;
+}
+
+export interface AnimateTextProps extends TextProps, BaseAnimateProps {
+  children?: React.ReactNode;
+}
+
+export interface AnimateImageProps extends ImageProps, BaseAnimateProps {}
+
+// Keep this for backward compatibility if needed
+export interface FastAnimateProps extends AnimateViewProps {}