react-native-glitter 1.0.1 → 1.0.3

package/README.md

@@ -165,6 +165,7 @@ function ControlledGlitter() {
 | `position` | `'top' \| 'center' \| 'bottom'` | `'center'` | Position where the line shrinks/expands (for shrink/expand modes) |
 | `direction` | `'left-to-right' \| 'right-to-left'` | `'left-to-right'` | Direction of the shimmer animation |
 | `iterations` | `number` | `-1` | Number of animation cycles (-1 for infinite) |
+| `onAnimationStart` | `() => void` | - | Callback when animation starts |
 | `onAnimationComplete` | `() => void` | - | Callback when all iterations complete |
 
 ## Examples
@@ -245,6 +246,7 @@ function ControlledGlitter() {
 // Run 3 times then call onAnimationComplete
 <Glitter 
   iterations={3} 
+  onAnimationStart={() => console.log('Started!')}
   onAnimationComplete={() => console.log('Done!')}
 >
   <View style={styles.box} />

package/lib/module/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useCallback, } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo, memo, } from 'react';
 import { View, Animated, StyleSheet, Easing, } from 'react-native';
 function generateGlitterOpacities(count, peak = 1) {
     const opacities = [];
@@ -48,49 +48,68 @@ function generateVerticalSegments(fadeRatioParam) {
     }
     return segments;
 }
-export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(255, 255, 255, 0.8)', angle = 20, shimmerWidth = 60, active = true, style, easing, mode = 'normal', position = 'center', direction = 'left-to-right', iterations = -1, onAnimationComplete, }) {
+const HEIGHT_MULTIPLIER = 1.5;
+const NORMAL_FADE_RATIO = (HEIGHT_MULTIPLIER - 1) / HEIGHT_MULTIPLIER / 2;
+const ANIMATED_SEGMENTS = generateVerticalSegments(0.25);
+const NORMAL_SEGMENTS = generateVerticalSegments(NORMAL_FADE_RATIO);
+function GlitterComponent({ children, duration = 1500, delay = 400, color = 'rgba(255, 255, 255, 0.8)', angle = 20, shimmerWidth = 60, active = true, style, easing, mode = 'normal', position = 'center', direction = 'left-to-right', iterations = -1, onAnimationStart, onAnimationComplete, }) {
     const animatedValue = useRef(new Animated.Value(0)).current;
     const [containerWidth, setContainerWidth] = useState(0);
     const [containerHeight, setContainerHeight] = useState(0);
     const animationRef = useRef(null);
+    const currentIterationRef = useRef(null);
     const iterationCount = useRef(0);
-    const defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
+    const isAnimatingRef = useRef(false);
+    const defaultEasing = useMemo(() => Easing.bezier(0.4, 0, 0.2, 1), []);
+    const stopAnimation = useCallback(() => {
+        isAnimatingRef.current = false;
+        animationRef.current?.stop();
+        animationRef.current = null;
+        currentIterationRef.current?.stop();
+        currentIterationRef.current = null;
+    }, []);
     const startAnimation = useCallback(() => {
         if (!active || containerWidth === 0)
             return;
+        stopAnimation();
         animatedValue.setValue(0);
         iterationCount.current = 0;
-        const timing = Animated.timing(animatedValue, {
-            toValue: 1,
-            duration,
-            useNativeDriver: true,
-            easing: easing ?? defaultEasing,
-        });
-        const singleIteration = Animated.sequence([timing, Animated.delay(delay)]);
+        isAnimatingRef.current = true;
+        onAnimationStart?.();
+        const createSingleIteration = () => Animated.sequence([
+            Animated.timing(animatedValue, {
+                toValue: 1,
+                duration,
+                useNativeDriver: true,
+                easing: easing ?? defaultEasing,
+            }),
+            Animated.delay(delay),
+        ]);
         const runIteration = () => {
+            if (!isAnimatingRef.current)
+                return;
             animatedValue.setValue(0);
-            singleIteration.start(({ finished }) => {
-                if (finished) {
+            currentIterationRef.current = createSingleIteration();
+            currentIterationRef.current.start(({ finished }) => {
+                if (finished && isAnimatingRef.current) {
                     iterationCount.current += 1;
                     if (iterations === -1 || iterationCount.current < iterations) {
                         runIteration();
                     }
                     else {
+                        isAnimatingRef.current = false;
                         onAnimationComplete?.();
                     }
                 }
             });
         };
         if (iterations === -1) {
-            animationRef.current = Animated.loop(singleIteration);
+            animationRef.current = Animated.loop(createSingleIteration());
             animationRef.current.start();
         }
         else {
             runIteration();
         }
-        return () => {
-            animationRef.current?.stop();
-        };
     }, [
         active,
         containerWidth,
@@ -100,28 +119,29 @@ export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(
         easing,
         defaultEasing,
         iterations,
+        onAnimationStart,
         onAnimationComplete,
+        stopAnimation,
     ]);
     useEffect(() => {
-        const cleanup = startAnimation();
-        return cleanup;
-    }, [startAnimation]);
+        startAnimation();
+        return stopAnimation;
+    }, [startAnimation, stopAnimation]);
     const onLayout = useCallback((event) => {
         const { width, height } = event.nativeEvent.layout;
         setContainerWidth(width);
         setContainerHeight(height);
     }, []);
-    const extraWidth = Math.tan((angle * Math.PI) / 180) * 200;
+    const extraWidth = useMemo(() => Math.tan((angle * Math.PI) / 180) * 200, [angle]);
     const isLeftToRight = direction === 'left-to-right';
-    const translateX = animatedValue.interpolate({
+    const translateX = useMemo(() => animatedValue.interpolate({
         inputRange: [0, 1],
         outputRange: isLeftToRight
             ? [-shimmerWidth - extraWidth, containerWidth + shimmerWidth]
             : [containerWidth + shimmerWidth, -shimmerWidth - extraWidth],
-    });
-    const heightMultiplier = 1.5;
-    const lineHeight = containerHeight * heightMultiplier;
-    const getScaleY = () => {
+    }), [animatedValue, isLeftToRight, shimmerWidth, extraWidth, containerWidth]);
+    const lineHeight = containerHeight * HEIGHT_MULTIPLIER;
+    const scaleY = useMemo(() => {
         if (mode === 'normal') {
             return 1;
         }
@@ -135,62 +155,50 @@ export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(
             inputRange: [0, 1],
             outputRange: [1, 0.01],
         });
-    };
+    }, [mode, animatedValue]);
     const halfHeight = lineHeight / 2;
-    const startOffset = 0;
-    const getTransformOriginOffset = () => {
+    const transformOriginOffset = useMemo(() => {
         if (mode === 'normal' || position === 'center') {
             return 0;
         }
-        if (position === 'top') {
-            return -halfHeight;
-        }
-        else {
-            return halfHeight;
-        }
-    };
-    const layerCount = Math.max(11, Math.round(shimmerWidth / 3));
-    const horizontalOpacities = generateGlitterOpacities(layerCount, 1);
-    const layerWidth = shimmerWidth / layerCount;
-    const normalFadeRatio = (heightMultiplier - 1) / heightMultiplier / 2;
-    const normalSegments = generateVerticalSegments(normalFadeRatio);
-    const animatedSegments = generateVerticalSegments(0.25);
-    const shimmerLayers = horizontalOpacities.map((opacity, index) => ({
+        return position === 'top' ? -halfHeight : halfHeight;
+    }, [mode, position, halfHeight]);
+    const layerCount = useMemo(() => Math.max(11, Math.round(shimmerWidth / 3)), [shimmerWidth]);
+    const layerWidth = useMemo(() => shimmerWidth / layerCount, [shimmerWidth, layerCount]);
+    const horizontalOpacities = useMemo(() => generateGlitterOpacities(layerCount, 1), [layerCount]);
+    const shimmerLayers = useMemo(() => horizontalOpacities.map((opacity, index) => ({
         opacity,
         position: index * layerWidth - shimmerWidth / 2 + layerWidth / 2,
-    }));
-    const scaleY = getScaleY();
-    const transformOriginOffset = getTransformOriginOffset();
+    })), [horizontalOpacities, layerWidth, shimmerWidth]);
     const isAnimated = mode !== 'normal';
-    return (_jsxs(View, { style: [styles.container, style], onLayout: onLayout, children: [children, active && containerWidth > 0 && containerHeight > 0 && (_jsx(Animated.View, { style: [
-                    styles.shimmerContainer,
+    const segments = isAnimated ? ANIMATED_SEGMENTS : NORMAL_SEGMENTS;
+    const shimmerContainerStyle = useMemo(() => [styles.shimmerContainer, { transform: [{ translateX }] }], [translateX]);
+    const rotationWrapperStyle = useMemo(() => [
+        styles.rotationWrapper,
+        {
+            width: shimmerWidth,
+            height: lineHeight,
+            transform: [{ skewX: `${-angle}deg` }],
+        },
+    ], [shimmerWidth, lineHeight, angle]);
+    const getShimmerLineStyle = useCallback((layerPosition) => [
+        styles.shimmerLine,
+        {
+            width: layerWidth + 0.5,
+            height: lineHeight,
+            left: layerPosition,
+            transform: isAnimated
+                ? [
+                    { translateY: transformOriginOffset },
                     {
-                        transform: [{ translateX }],
+                        scaleY: scaleY,
                     },
-                ], pointerEvents: "none", children: _jsx(View, { style: [
-                        styles.rotationWrapper,
-                        {
-                            width: shimmerWidth,
-                            height: lineHeight,
-                            transform: [{ skewX: `${-angle}deg` }],
-                        },
-                    ], children: shimmerLayers.map((layer, layerIndex) => (_jsx(Animated.View, { style: [
-                            styles.shimmerLine,
-                            {
-                                width: layerWidth + 0.5,
-                                height: lineHeight,
-                                left: layer.position,
-                                transform: isAnimated
-                                    ? [
-                                        { translateY: startOffset + transformOriginOffset },
-                                        {
-                                            scaleY: scaleY,
-                                        },
-                                        { translateY: -transformOriginOffset },
-                                    ]
-                                    : [{ translateY: startOffset }],
-                            },
-                        ], children: (isAnimated ? animatedSegments : normalSegments).map((segment, vIndex) => (_jsx(View, { style: [
+                    { translateY: -transformOriginOffset },
+                ]
+                : [],
+        },
+    ], [layerWidth, lineHeight, isAnimated, transformOriginOffset, scaleY]);
+    return (_jsxs(View, { style: [styles.container, style], onLayout: onLayout, children: [children, active && containerWidth > 0 && containerHeight > 0 && (_jsx(Animated.View, { style: shimmerContainerStyle, pointerEvents: "none", children: _jsx(View, { style: rotationWrapperStyle, children: shimmerLayers.map((layer, layerIndex) => (_jsx(Animated.View, { style: getShimmerLineStyle(layer.position), children: segments.map((segment, vIndex) => (_jsx(View, { style: [
                                 styles.segment,
                                 {
                                     height: lineHeight * segment.heightRatio,
@@ -223,4 +231,5 @@ const styles = StyleSheet.create({
         width: '100%',
     },
 });
+export const Glitter = memo(GlitterComponent);
 export default Glitter;

package/lib/typescript/src/index.d.ts

@@ -17,7 +17,9 @@ export interface GlitterProps {
     position?: GlitterPosition;
     direction?: GlitterDirection;
     iterations?: number;
+    onAnimationStart?: () => void;
     onAnimationComplete?: () => void;
 }
-export declare function Glitter({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, direction, iterations, onAnimationComplete, }: GlitterProps): ReactElement;
+declare function GlitterComponent({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, direction, iterations, onAnimationStart, onAnimationComplete, }: GlitterProps): ReactElement;
+export declare const Glitter: import("react").MemoExoticComponent<typeof GlitterComponent>;
 export default Glitter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-glitter",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A beautiful shimmer/glitter effect component for React Native. Add a sparkling diagonal shine animation to any component!",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/index.tsx

@@ -3,6 +3,8 @@ import {
   useRef,
   useState,
   useCallback,
+  useMemo,
+  memo,
   type ReactNode,
   type ReactElement,
 } from 'react';
@@ -36,6 +38,7 @@ export interface GlitterProps {
   position?: GlitterPosition;
   direction?: GlitterDirection;
   iterations?: number;
+  onAnimationStart?: () => void;
   onAnimationComplete?: () => void;
 }
 
@@ -100,7 +103,12 @@ function generateVerticalSegments(fadeRatioParam?: number): VerticalSegment[] {
   return segments;
 }
 
-export function Glitter({
+const HEIGHT_MULTIPLIER = 1.5;
+const NORMAL_FADE_RATIO = (HEIGHT_MULTIPLIER - 1) / HEIGHT_MULTIPLIER / 2;
+const ANIMATED_SEGMENTS = generateVerticalSegments(0.25);
+const NORMAL_SEGMENTS = generateVerticalSegments(NORMAL_FADE_RATIO);
+
+function GlitterComponent({
   children,
   duration = 1500,
   delay = 400,
@@ -114,57 +122,76 @@ export function Glitter({
   position = 'center',
   direction = 'left-to-right',
   iterations = -1,
+  onAnimationStart,
   onAnimationComplete,
 }: GlitterProps): ReactElement {
   const animatedValue = useRef(new Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
   const [containerHeight, setContainerHeight] = useState(0);
-  const animationRef = useRef<{ start: () => void; stop: () => void } | null>(
-    null
-  );
+  const animationRef = useRef<ReturnType<typeof Animated.loop> | null>(null);
+  const currentIterationRef = useRef<ReturnType<
+    typeof Animated.sequence
+  > | null>(null);
   const iterationCount = useRef(0);
+  const isAnimatingRef = useRef(false);
 
-  const defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
+  const defaultEasing = useMemo(() => Easing.bezier(0.4, 0, 0.2, 1), []);
+
+  const stopAnimation = useCallback(() => {
+    isAnimatingRef.current = false;
+    animationRef.current?.stop();
+    animationRef.current = null;
+    currentIterationRef.current?.stop();
+    currentIterationRef.current = null;
+  }, []);
 
   const startAnimation = useCallback(() => {
     if (!active || containerWidth === 0) return;
 
+    stopAnimation();
     animatedValue.setValue(0);
     iterationCount.current = 0;
+    isAnimatingRef.current = true;
 
-    const timing = Animated.timing(animatedValue, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-      easing: easing ?? defaultEasing,
-    });
+    onAnimationStart?.();
 
-    const singleIteration = Animated.sequence([timing, Animated.delay(delay)]);
+    const createSingleIteration = () =>
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration,
+          useNativeDriver: true,
+          easing: easing ?? defaultEasing,
+        }),
+        Animated.delay(delay),
+      ]);
 
     const runIteration = () => {
+      if (!isAnimatingRef.current) return;
+
       animatedValue.setValue(0);
-      singleIteration.start(({ finished }) => {
-        if (finished) {
-          iterationCount.current += 1;
-          if (iterations === -1 || iterationCount.current < iterations) {
-            runIteration();
-          } else {
-            onAnimationComplete?.();
+      currentIterationRef.current = createSingleIteration();
+      currentIterationRef.current.start(
+        ({ finished }: { finished: boolean }) => {
+          if (finished && isAnimatingRef.current) {
+            iterationCount.current += 1;
+            if (iterations === -1 || iterationCount.current < iterations) {
+              runIteration();
+            } else {
+              isAnimatingRef.current = false;
+              onAnimationComplete?.();
+            }
           }
         }
-      });
+      );
     };
 
     if (iterations === -1) {
-      animationRef.current = Animated.loop(singleIteration);
+      animationRef.current = Animated.loop(createSingleIteration());
       animationRef.current.start();
     } else {
       runIteration();
     }
-
-    return () => {
-      animationRef.current?.stop();
-    };
   }, [
     active,
     containerWidth,
@@ -174,13 +201,15 @@ export function Glitter({
     easing,
     defaultEasing,
     iterations,
+    onAnimationStart,
     onAnimationComplete,
+    stopAnimation,
   ]);
 
   useEffect(() => {
-    const cleanup = startAnimation();
-    return cleanup;
-  }, [startAnimation]);
+    startAnimation();
+    return stopAnimation;
+  }, [startAnimation, stopAnimation]);
 
   const onLayout = useCallback((event: LayoutChangeEvent) => {
     const { width, height } = event.nativeEvent.layout;
@@ -188,20 +217,29 @@ export function Glitter({
     setContainerHeight(height);
   }, []);
 
-  const extraWidth = Math.tan((angle * Math.PI) / 180) * 200;
+  const extraWidth = useMemo(
+    () => Math.tan((angle * Math.PI) / 180) * 200,
+    [angle]
+  );
 
   const isLeftToRight = direction === 'left-to-right';
-  const translateX = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: isLeftToRight
-      ? [-shimmerWidth - extraWidth, containerWidth + shimmerWidth]
-      : [containerWidth + shimmerWidth, -shimmerWidth - extraWidth],
-  });
 
-  const heightMultiplier = 1.5;
-  const lineHeight = containerHeight * heightMultiplier;
+  const translateX = useMemo(
+    () =>
+      animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: isLeftToRight
+          ? [-shimmerWidth - extraWidth, containerWidth + shimmerWidth]
+          : [containerWidth + shimmerWidth, -shimmerWidth - extraWidth],
+      }),
+    [animatedValue, isLeftToRight, shimmerWidth, extraWidth, containerWidth]
+  );
+
+  const lineHeight = containerHeight * HEIGHT_MULTIPLIER;
 
-  const getScaleY = (): Animated.AnimatedInterpolation<number> | number => {
+  const scaleY = useMemo(():
+    | Animated.AnimatedInterpolation<number>
+    | number => {
     if (mode === 'normal') {
       return 1;
     }
@@ -217,100 +255,106 @@ export function Glitter({
       inputRange: [0, 1],
       outputRange: [1, 0.01],
     });
-  };
+  }, [mode, animatedValue]);
 
   const halfHeight = lineHeight / 2;
-  const startOffset = 0;
 
-  const getTransformOriginOffset = (): number => {
+  const transformOriginOffset = useMemo((): number => {
     if (mode === 'normal' || position === 'center') {
       return 0;
     }
+    return position === 'top' ? -halfHeight : halfHeight;
+  }, [mode, position, halfHeight]);
 
-    if (position === 'top') {
-      return -halfHeight;
-    } else {
-      return halfHeight;
-    }
-  };
+  const layerCount = useMemo(
+    () => Math.max(11, Math.round(shimmerWidth / 3)),
+    [shimmerWidth]
+  );
 
-  const layerCount = Math.max(11, Math.round(shimmerWidth / 3));
-  const horizontalOpacities = generateGlitterOpacities(layerCount, 1);
-  const layerWidth = shimmerWidth / layerCount;
+  const layerWidth = useMemo(
+    () => shimmerWidth / layerCount,
+    [shimmerWidth, layerCount]
+  );
 
-  const normalFadeRatio = (heightMultiplier - 1) / heightMultiplier / 2;
-  const normalSegments = generateVerticalSegments(normalFadeRatio);
-  const animatedSegments = generateVerticalSegments(0.25);
+  const horizontalOpacities = useMemo(
+    () => generateGlitterOpacities(layerCount, 1),
+    [layerCount]
+  );
 
-  const shimmerLayers = horizontalOpacities.map((opacity, index) => ({
-    opacity,
-    position: index * layerWidth - shimmerWidth / 2 + layerWidth / 2,
-  }));
+  const shimmerLayers = useMemo(
+    () =>
+      horizontalOpacities.map((opacity, index) => ({
+        opacity,
+        position: index * layerWidth - shimmerWidth / 2 + layerWidth / 2,
+      })),
+    [horizontalOpacities, layerWidth, shimmerWidth]
+  );
 
-  const scaleY = getScaleY();
-  const transformOriginOffset = getTransformOriginOffset();
   const isAnimated = mode !== 'normal';
+  const segments = isAnimated ? ANIMATED_SEGMENTS : NORMAL_SEGMENTS;
+
+  const shimmerContainerStyle = useMemo(
+    () => [styles.shimmerContainer, { transform: [{ translateX }] }],
+    [translateX]
+  );
+
+  const rotationWrapperStyle = useMemo(
+    () => [
+      styles.rotationWrapper,
+      {
+        width: shimmerWidth,
+        height: lineHeight,
+        transform: [{ skewX: `${-angle}deg` }],
+      },
+    ],
+    [shimmerWidth, lineHeight, angle]
+  );
+
+  const getShimmerLineStyle = useCallback(
+    (layerPosition: number) => [
+      styles.shimmerLine,
+      {
+        width: layerWidth + 0.5,
+        height: lineHeight,
+        left: layerPosition,
+        transform: isAnimated
+          ? [
+              { translateY: transformOriginOffset },
+              {
+                scaleY: scaleY as Animated.AnimatedInterpolation<number>,
+              },
+              { translateY: -transformOriginOffset },
+            ]
+          : [],
+      },
+    ],
+    [layerWidth, lineHeight, isAnimated, transformOriginOffset, scaleY]
+  );
 
   return (
     <View style={[styles.container, style]} onLayout={onLayout}>
       {children}
       {active && containerWidth > 0 && containerHeight > 0 && (
-        <Animated.View
-          style={[
-            styles.shimmerContainer,
-            {
-              transform: [{ translateX }],
-            },
-          ]}
-          pointerEvents="none"
-        >
-          <View
-            style={[
-              styles.rotationWrapper,
-              {
-                width: shimmerWidth,
-                height: lineHeight,
-                transform: [{ skewX: `${-angle}deg` }],
-              },
-            ]}
-          >
+        <Animated.View style={shimmerContainerStyle} pointerEvents="none">
+          <View style={rotationWrapperStyle}>
             {shimmerLayers.map((layer, layerIndex) => (
               <Animated.View
                 key={layerIndex}
-                style={[
-                  styles.shimmerLine,
-                  {
-                    width: layerWidth + 0.5,
-                    height: lineHeight,
-                    left: layer.position,
-                    transform: isAnimated
-                      ? [
-                          { translateY: startOffset + transformOriginOffset },
-                          {
-                            scaleY:
-                              scaleY as Animated.AnimatedInterpolation<number>,
-                          },
-                          { translateY: -transformOriginOffset },
-                        ]
-                      : [{ translateY: startOffset }],
-                  },
-                ]}
+                style={getShimmerLineStyle(layer.position)}
               >
-                {(isAnimated ? animatedSegments : normalSegments).map(
-                  (segment, vIndex) => (
-                    <View
-                      key={vIndex}
-                      style={[
-                        styles.segment,
-                        {
-                          height: lineHeight * segment.heightRatio,
-                          backgroundColor: color,
-                          opacity: layer.opacity * segment.opacity,
-                        },
-                      ]}
-                    />
-                  )
-                )}
+                {segments.map((segment, vIndex) => (
+                  <View
+                    key={vIndex}
+                    style={[
+                      styles.segment,
+                      {
+                        height: lineHeight * segment.heightRatio,
+                        backgroundColor: color,
+                        opacity: layer.opacity * segment.opacity,
+                      },
+                    ]}
+                  />
+                ))}
               </Animated.View>
             ))}
           </View>
@@ -345,4 +389,6 @@ const styles = StyleSheet.create({
   },
 });
 
+export const Glitter = memo(GlitterComponent);
+
 export default Glitter;