react-native-glitter 1.0.3 → 1.0.4

package/README.md

@@ -167,6 +167,9 @@ function ControlledGlitter() {
 | `iterations` | `number` | `-1` | Number of animation cycles (-1 for infinite) |
 | `onAnimationStart` | `() => void` | - | Callback when animation starts |
 | `onAnimationComplete` | `() => void` | - | Callback when all iterations complete |
+| `testID` | `string` | - | Test ID for e2e testing |
+| `accessibilityLabel` | `string` | - | Accessibility label for screen readers |
+| `accessible` | `boolean` | `true` | Whether the component is accessible |
 
 ## Examples
 

package/lib/module/index.js

@@ -52,7 +52,7 @@ 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, }) {
+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, testID, accessibilityLabel, accessible = true, }) {
     const animatedValue = useRef(new Animated.Value(0)).current;
     const [containerWidth, setContainerWidth] = useState(0);
     const [containerHeight, setContainerHeight] = useState(0);
@@ -198,7 +198,7 @@ function GlitterComponent({ children, duration = 1500, delay = 400, color = 'rgb
                 : [],
         },
     ], [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: [
+    return (_jsxs(View, { style: [styles.container, style], onLayout: onLayout, testID: testID, accessibilityLabel: accessibilityLabel, accessible: accessible, 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,

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

@@ -19,7 +19,13 @@ export interface GlitterProps {
     iterations?: number;
     onAnimationStart?: () => void;
     onAnimationComplete?: () => void;
+    /** Test ID for e2e testing */
+    testID?: string;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+    /** Whether the component is accessible (default: true) */
+    accessible?: boolean;
 }
-declare function GlitterComponent({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, direction, iterations, onAnimationStart, onAnimationComplete, }: GlitterProps): ReactElement;
+declare function GlitterComponent({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, direction, iterations, onAnimationStart, onAnimationComplete, testID, accessibilityLabel, accessible, }: 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.3",
+  "version": "1.0.4",
   "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

@@ -40,6 +40,12 @@ export interface GlitterProps {
   iterations?: number;
   onAnimationStart?: () => void;
   onAnimationComplete?: () => void;
+  /** Test ID for e2e testing */
+  testID?: string;
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string;
+  /** Whether the component is accessible (default: true) */
+  accessible?: boolean;
 }
 
 function generateGlitterOpacities(count: number, peak: number = 1): number[] {
@@ -124,6 +130,9 @@ function GlitterComponent({
   iterations = -1,
   onAnimationStart,
   onAnimationComplete,
+  testID,
+  accessibilityLabel,
+  accessible = true,
 }: GlitterProps): ReactElement {
   const animatedValue = useRef(new Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
@@ -332,7 +341,13 @@ function GlitterComponent({
   );
 
   return (
-    <View style={[styles.container, style]} onLayout={onLayout}>
+    <View
+      style={[styles.container, style]}
+      onLayout={onLayout}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessible={accessible}
+    >
       {children}
       {active && containerWidth > 0 && containerHeight > 0 && (
         <Animated.View style={shimmerContainerStyle} pointerEvents="none">