react-native-glitter 1.0.0 → 1.0.3

package/README.md

@@ -164,6 +164,9 @@ function ControlledGlitter() {
 | `mode` | `'normal' \| 'expand' \| 'shrink'` | `'normal'` | Animation mode for the shimmer line |
 | `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
 
@@ -237,6 +240,27 @@ function ControlledGlitter() {
 </Glitter>
 ```
 
+### Limited Iterations with Callback
+
+```tsx
+// Run 3 times then call onAnimationComplete
+<Glitter 
+  iterations={3} 
+  onAnimationStart={() => console.log('Started!')}
+  onAnimationComplete={() => console.log('Done!')}
+>
+  <View style={styles.box} />
+</Glitter>
+
+// Run once (useful for loading states)
+<Glitter 
+  iterations={1} 
+  onAnimationComplete={() => setLoading(false)}
+>
+  <View style={styles.skeleton} />
+</Glitter>
+```
+
 ## TypeScript
 
 This library is written in TypeScript and includes type definitions:

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,27 +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', }) {
+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 defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
+    const currentIterationRef = useRef(null);
+    const iterationCount = useRef(0);
+    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);
-        const timing = Animated.timing(animatedValue, {
-            toValue: 1,
-            duration,
-            useNativeDriver: true,
-            easing: easing ?? defaultEasing,
-        });
-        animationRef.current = Animated.loop(Animated.sequence([timing, Animated.delay(delay)]));
-        animationRef.current.start();
-        return () => {
-            animationRef.current?.stop();
+        iterationCount.current = 0;
+        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);
+            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(createSingleIteration());
+            animationRef.current.start();
+        }
+        else {
+            runIteration();
+        }
     }, [
         active,
         containerWidth,
@@ -77,27 +118,30 @@ export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(
         animatedValue,
         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;
         }
@@ -111,67 +155,57 @@ 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: {
-                                width: '100%',
-                                height: lineHeight * segment.heightRatio,
-                                backgroundColor: color,
-                                opacity: layer.opacity * segment.opacity,
-                            } }, vIndex))) }, layerIndex))) }) }))] }));
+                    { 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,
+                                    backgroundColor: color,
+                                    opacity: layer.opacity * segment.opacity,
+                                },
+                            ] }, vIndex))) }, layerIndex))) }) }))] }));
 }
 const styles = StyleSheet.create({
     container: {
@@ -193,5 +227,9 @@ const styles = StyleSheet.create({
         position: 'absolute',
         flexDirection: 'column',
     },
+    segment: {
+        width: '100%',
+    },
 });
+export const Glitter = memo(GlitterComponent);
 export default Glitter;

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

@@ -16,6 +16,10 @@ export interface GlitterProps {
     mode?: GlitterMode;
     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, }: 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.0",
+  "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';
@@ -35,6 +37,9 @@ export interface GlitterProps {
   mode?: GlitterMode;
   position?: GlitterPosition;
   direction?: GlitterDirection;
+  iterations?: number;
+  onAnimationStart?: () => void;
+  onAnimationComplete?: () => void;
 }
 
 function generateGlitterOpacities(count: number, peak: number = 1): number[] {
@@ -98,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,
@@ -111,35 +121,77 @@ export function Glitter({
   mode = 'normal',
   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<ReturnType<typeof Animated.loop> | null>(null);
-
-  const defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
+  const currentIterationRef = useRef<ReturnType<
+    typeof Animated.sequence
+  > | null>(null);
+  const iterationCount = useRef(0);
+  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);
-
-    const timing = Animated.timing(animatedValue, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-      easing: easing ?? defaultEasing,
-    });
-
-    animationRef.current = Animated.loop(
-      Animated.sequence([timing, Animated.delay(delay)])
-    );
-
-    animationRef.current.start();
-
-    return () => {
-      animationRef.current?.stop();
+    iterationCount.current = 0;
+    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);
+      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(createSingleIteration());
+      animationRef.current.start();
+    } else {
+      runIteration();
+    }
   }, [
     active,
     containerWidth,
@@ -148,12 +200,16 @@ export function Glitter({
     animatedValue,
     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;
@@ -161,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 getScaleY = (): Animated.AnimatedInterpolation<number> | number => {
+  const lineHeight = containerHeight * HEIGHT_MULTIPLIER;
+
+  const scaleY = useMemo(():
+    | Animated.AnimatedInterpolation<number>
+    | number => {
     if (mode === 'normal') {
       return 1;
     }
@@ -190,98 +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={{
-                        width: '100%',
+                {segments.map((segment, vIndex) => (
+                  <View
+                    key={vIndex}
+                    style={[
+                      styles.segment,
+                      {
                         height: lineHeight * segment.heightRatio,
                         backgroundColor: color,
                         opacity: layer.opacity * segment.opacity,
-                      }}
-                    />
-                  )
-                )}
+                      },
+                    ]}
+                  />
+                ))}
               </Animated.View>
             ))}
           </View>
@@ -311,6 +384,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     flexDirection: 'column',
   },
+  segment: {
+    width: '100%',
+  },
 });
 
+export const Glitter = memo(GlitterComponent);
+
 export default Glitter;