react-native-glitter 0.2.0 → 1.0.0

package/README.md

@@ -163,6 +163,7 @@ function ControlledGlitter() {
 | `easing` | `(value: number) => number` | - | Custom easing function for the animation |
 | `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 |
 
 ## Examples
 
@@ -222,6 +223,20 @@ function ControlledGlitter() {
 </Glitter>
 ```
 
+### Direction
+
+```tsx
+// Left to right (default)
+<Glitter direction="left-to-right">
+  <View style={styles.box} />
+</Glitter>
+
+// Right to left
+<Glitter direction="right-to-left">
+  <View style={styles.box} />
+</Glitter>
+```
+
 ## TypeScript
 
 This library is written in TypeScript and includes type definitions:
@@ -232,6 +247,7 @@ import {
   type GlitterProps,
   type GlitterMode,
   type GlitterPosition,
+  type GlitterDirection,
 } from 'react-native-glitter';
 
 const customProps: GlitterProps = {

package/lib/module/index.js

@@ -48,7 +48,7 @@ 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', }) {
+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 animatedValue = useRef(new Animated.Value(0)).current;
     const [containerWidth, setContainerWidth] = useState(0);
     const [containerHeight, setContainerHeight] = useState(0);
@@ -88,9 +88,12 @@ export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(
         setContainerHeight(height);
     }, []);
     const extraWidth = Math.tan((angle * Math.PI) / 180) * 200;
+    const isLeftToRight = direction === 'left-to-right';
     const translateX = animatedValue.interpolate({
         inputRange: [0, 1],
-        outputRange: [-shimmerWidth - extraWidth, containerWidth + shimmerWidth],
+        outputRange: isLeftToRight
+            ? [-shimmerWidth - extraWidth, containerWidth + shimmerWidth]
+            : [containerWidth + shimmerWidth, -shimmerWidth - extraWidth],
     });
     const heightMultiplier = 1.5;
     const lineHeight = containerHeight * heightMultiplier;

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

@@ -2,6 +2,7 @@ import { type ReactNode, type ReactElement } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 export type GlitterMode = 'normal' | 'expand' | 'shrink';
 export type GlitterPosition = 'top' | 'center' | 'bottom';
+export type GlitterDirection = 'left-to-right' | 'right-to-left';
 export interface GlitterProps {
     children: ReactNode;
     duration?: number;
@@ -14,6 +15,7 @@ export interface GlitterProps {
     easing?: (value: number) => number;
     mode?: GlitterMode;
     position?: GlitterPosition;
+    direction?: GlitterDirection;
 }
-export declare function Glitter({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, }: GlitterProps): ReactElement;
+export declare function Glitter({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, direction, }: GlitterProps): ReactElement;
 export default Glitter;

package/package.json

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

@@ -20,6 +20,8 @@ export type GlitterMode = 'normal' | 'expand' | 'shrink';
 
 export type GlitterPosition = 'top' | 'center' | 'bottom';
 
+export type GlitterDirection = 'left-to-right' | 'right-to-left';
+
 export interface GlitterProps {
   children: ReactNode;
   duration?: number;
@@ -32,6 +34,7 @@ export interface GlitterProps {
   easing?: (value: number) => number;
   mode?: GlitterMode;
   position?: GlitterPosition;
+  direction?: GlitterDirection;
 }
 
 function generateGlitterOpacities(count: number, peak: number = 1): number[] {
@@ -107,6 +110,7 @@ export function Glitter({
   easing,
   mode = 'normal',
   position = 'center',
+  direction = 'left-to-right',
 }: GlitterProps): ReactElement {
   const animatedValue = useRef(new Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
@@ -159,9 +163,12 @@ export function Glitter({
 
   const extraWidth = Math.tan((angle * Math.PI) / 180) * 200;
 
+  const isLeftToRight = direction === 'left-to-right';
   const translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [-shimmerWidth - extraWidth, containerWidth + shimmerWidth],
+    outputRange: isLeftToRight
+      ? [-shimmerWidth - extraWidth, containerWidth + shimmerWidth]
+      : [containerWidth + shimmerWidth, -shimmerWidth - extraWidth],
   });
 
   const heightMultiplier = 1.5;