react-native-glitter 1.0.6 → 1.0.7

package/lib/module/index.js

@@ -208,7 +208,9 @@ function GlitterComponent({ children, duration = 1500, delay = 400, color = 'rgb
         }
         return position === 'top' ? -halfHeight : halfHeight;
     }, [mode, position, halfHeight]);
-    const layerCount = useMemo(() => Math.max(11, Math.round(shimmerWidth / 3)), [shimmerWidth]);
+    // Optimized: reduced layer count for better performance
+    // shimmerWidth=60 → 12 layers (was 20), shimmerWidth=100 → 14 layers (was 33)
+    const layerCount = useMemo(() => Math.max(7, Math.round(shimmerWidth / 5)), [shimmerWidth]);
     const layerWidth = useMemo(() => shimmerWidth / layerCount, [shimmerWidth, layerCount]);
     const horizontalOpacities = useMemo(() => generateGlitterOpacities(layerCount, 1), [layerCount]);
     const shimmerLayers = useMemo(() => horizontalOpacities.map((opacity, index) => ({
@@ -217,6 +219,12 @@ function GlitterComponent({ children, duration = 1500, delay = 400, color = 'rgb
     })), [horizontalOpacities, layerWidth, shimmerWidth]);
     const isAnimated = mode !== 'normal';
     const segments = isAnimated ? ANIMATED_SEGMENTS : NORMAL_SEGMENTS;
+    // Memoize segment styles to avoid creating new objects on every render
+    const segmentStyles = useMemo(() => segments.map((segment) => ({
+        height: lineHeight * segment.heightRatio,
+        backgroundColor: color,
+        baseOpacity: segment.opacity,
+    })), [segments, lineHeight, color]);
     const shimmerContainerStyle = useMemo(() => [styles.shimmerContainer, { transform: [{ translateX }] }], [translateX]);
     const rotationWrapperStyle = useMemo(() => [
         styles.rotationWrapper,
@@ -246,12 +254,12 @@ function GlitterComponent({ children, duration = 1500, delay = 400, color = 'rgb
     return (_jsxs(View, { style: [styles.container, style], onLayout: onLayout, testID: testID, accessibilityLabel: accessibilityLabel, accessible: accessible, children: [children, active &&
                 !reduceMotionEnabled &&
                 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: [
+                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: segmentStyles.map((segmentStyle, vIndex) => (_jsx(View, { style: [
                                 styles.segment,
                                 {
-                                    height: lineHeight * segment.heightRatio,
-                                    backgroundColor: color,
-                                    opacity: layer.opacity * segment.opacity,
+                                    height: segmentStyle.height,
+                                    backgroundColor: segmentStyle.backgroundColor,
+                                    opacity: layer.opacity * segmentStyle.baseOpacity,
                                 },
                             ] }, vIndex))) }, layerIndex))) }) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-glitter",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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

@@ -518,8 +518,10 @@ function GlitterComponent(
     return position === 'top' ? -halfHeight : halfHeight;
   }, [mode, position, halfHeight]);
 
+  // Optimized: reduced layer count for better performance
+  // shimmerWidth=60 → 12 layers (was 20), shimmerWidth=100 → 14 layers (was 33)
   const layerCount = useMemo(
-    () => Math.max(11, Math.round(shimmerWidth / 3)),
+    () => Math.max(7, Math.round(shimmerWidth / 5)),
     [shimmerWidth]
   );
 
@@ -545,6 +547,17 @@ function GlitterComponent(
   const isAnimated = mode !== 'normal';
   const segments = isAnimated ? ANIMATED_SEGMENTS : NORMAL_SEGMENTS;
 
+  // Memoize segment styles to avoid creating new objects on every render
+  const segmentStyles = useMemo(
+    () =>
+      segments.map((segment) => ({
+        height: lineHeight * segment.heightRatio,
+        backgroundColor: color,
+        baseOpacity: segment.opacity,
+      })),
+    [segments, lineHeight, color]
+  );
+
   const shimmerContainerStyle = useMemo(
     () => [styles.shimmerContainer, { transform: [{ translateX }] }],
     [translateX]
@@ -603,15 +616,15 @@ function GlitterComponent(
                   key={layerIndex}
                   style={getShimmerLineStyle(layer.position)}
                 >
-                  {segments.map((segment, vIndex) => (
+                  {segmentStyles.map((segmentStyle, vIndex) => (
                     <View
                       key={vIndex}
                       style={[
                         styles.segment,
                         {
-                          height: lineHeight * segment.heightRatio,
-                          backgroundColor: color,
-                          opacity: layer.opacity * segment.opacity,
+                          height: segmentStyle.height,
+                          backgroundColor: segmentStyle.backgroundColor,
+                          opacity: layer.opacity * segmentStyle.baseOpacity,
                         },
                       ]}
                     />