react-native-glitter 0.3.0 → 1.0.1

package/README.md

@@ -164,6 +164,8 @@ 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) |
+| `onAnimationComplete` | `() => void` | - | Callback when all iterations complete |
 
 ## Examples
 
@@ -237,6 +239,26 @@ function ControlledGlitter() {
 </Glitter>
 ```
 
+### Limited Iterations with Callback
+
+```tsx
+// Run 3 times then call onAnimationComplete
+<Glitter 
+  iterations={3} 
+  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

@@ -48,24 +48,46 @@ 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', }) {
+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 animatedValue = useRef(new Animated.Value(0)).current;
     const [containerWidth, setContainerWidth] = useState(0);
     const [containerHeight, setContainerHeight] = useState(0);
     const animationRef = useRef(null);
+    const iterationCount = useRef(0);
     const defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
     const startAnimation = useCallback(() => {
         if (!active || containerWidth === 0)
             return;
         animatedValue.setValue(0);
+        iterationCount.current = 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();
+        const singleIteration = Animated.sequence([timing, Animated.delay(delay)]);
+        const runIteration = () => {
+            animatedValue.setValue(0);
+            singleIteration.start(({ finished }) => {
+                if (finished) {
+                    iterationCount.current += 1;
+                    if (iterations === -1 || iterationCount.current < iterations) {
+                        runIteration();
+                    }
+                    else {
+                        onAnimationComplete?.();
+                    }
+                }
+            });
+        };
+        if (iterations === -1) {
+            animationRef.current = Animated.loop(singleIteration);
+            animationRef.current.start();
+        }
+        else {
+            runIteration();
+        }
         return () => {
             animationRef.current?.stop();
         };
@@ -77,6 +99,8 @@ export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(
         animatedValue,
         easing,
         defaultEasing,
+        iterations,
+        onAnimationComplete,
     ]);
     useEffect(() => {
         const cleanup = startAnimation();
@@ -166,12 +190,14 @@ export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(
                                     ]
                                     : [{ 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))) }) }))] }));
+                        ], children: (isAnimated ? animatedSegments : normalSegments).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 +219,8 @@ const styles = StyleSheet.create({
         position: 'absolute',
         flexDirection: 'column',
     },
+    segment: {
+        width: '100%',
+    },
 });
 export default Glitter;

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

@@ -16,6 +16,8 @@ export interface GlitterProps {
     mode?: GlitterMode;
     position?: GlitterPosition;
     direction?: GlitterDirection;
+    iterations?: number;
+    onAnimationComplete?: () => void;
 }
-export declare function Glitter({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, direction, }: GlitterProps): ReactElement;
+export declare function Glitter({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, direction, iterations, onAnimationComplete, }: GlitterProps): ReactElement;
 export default Glitter;

package/package.json

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

@@ -35,6 +35,8 @@ export interface GlitterProps {
   mode?: GlitterMode;
   position?: GlitterPosition;
   direction?: GlitterDirection;
+  iterations?: number;
+  onAnimationComplete?: () => void;
 }
 
 function generateGlitterOpacities(count: number, peak: number = 1): number[] {
@@ -111,11 +113,16 @@ export function Glitter({
   mode = 'normal',
   position = 'center',
   direction = 'left-to-right',
+  iterations = -1,
+  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 animationRef = useRef<{ start: () => void; stop: () => void } | null>(
+    null
+  );
+  const iterationCount = useRef(0);
 
   const defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
 
@@ -123,6 +130,7 @@ export function Glitter({
     if (!active || containerWidth === 0) return;
 
     animatedValue.setValue(0);
+    iterationCount.current = 0;
 
     const timing = Animated.timing(animatedValue, {
       toValue: 1,
@@ -131,11 +139,28 @@ export function Glitter({
       easing: easing ?? defaultEasing,
     });
 
-    animationRef.current = Animated.loop(
-      Animated.sequence([timing, Animated.delay(delay)])
-    );
+    const singleIteration = Animated.sequence([timing, Animated.delay(delay)]);
+
+    const runIteration = () => {
+      animatedValue.setValue(0);
+      singleIteration.start(({ finished }) => {
+        if (finished) {
+          iterationCount.current += 1;
+          if (iterations === -1 || iterationCount.current < iterations) {
+            runIteration();
+          } else {
+            onAnimationComplete?.();
+          }
+        }
+      });
+    };
 
-    animationRef.current.start();
+    if (iterations === -1) {
+      animationRef.current = Animated.loop(singleIteration);
+      animationRef.current.start();
+    } else {
+      runIteration();
+    }
 
     return () => {
       animationRef.current?.stop();
@@ -148,6 +173,8 @@ export function Glitter({
     animatedValue,
     easing,
     defaultEasing,
+    iterations,
+    onAnimationComplete,
   ]);
 
   useEffect(() => {
@@ -273,12 +300,14 @@ export function Glitter({
                   (segment, vIndex) => (
                     <View
                       key={vIndex}
-                      style={{
-                        width: '100%',
-                        height: lineHeight * segment.heightRatio,
-                        backgroundColor: color,
-                        opacity: layer.opacity * segment.opacity,
-                      }}
+                      style={[
+                        styles.segment,
+                        {
+                          height: lineHeight * segment.heightRatio,
+                          backgroundColor: color,
+                          opacity: layer.opacity * segment.opacity,
+                        },
+                      ]}
                     />
                   )
                 )}
@@ -311,6 +340,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     flexDirection: 'column',
   },
+  segment: {
+    width: '100%',
+  },
 });
 
 export default Glitter;