related-ui-components 3.0.6 → 3.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/module/components/Skeleton/Shimmer.js +42 -52
  2. package/lib/module/components/Skeleton/Shimmer.js.map +1 -1
  3. package/lib/typescript/src/components/Skeleton/Shimmer.d.ts.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Skeleton/Shimmer.tsx +42 -72
package/lib/module/components/Skeleton/Shimmer.js CHANGED
@@ -1,12 +1,10 @@
1
1
  "use strict";
2
2
 
3
- import React, { useCallback, useEffect, useMemo } from "react";
4
- import { View, StyleSheet, I18nManager } from "react-native";
5
- import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withSequence, withTiming, cancelAnimation, Easing } from "react-native-reanimated";
3
+ import React, { useEffect, useRef } from "react";
4
+ import { View, StyleSheet, Animated, Easing, I18nManager } from "react-native";
6
5
  import { LinearGradient } from "expo-linear-gradient";
7
6
  import { useTheme } from "../../theme/index.js";
8
7
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
- const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
10
8
  const Shimmer = ({
11
9
  children,
12
10
  width,
@@ -20,42 +18,25 @@ const Shimmer = ({
20
18
  theme
21
19
  } = useTheme();
22
20
  const isRTL = I18nManager.isRTL;
23
-
24
- // Shared animation values (Reanimated)
25
- const containerWidth = useSharedValue(typeof width === "number" ? width : 400);
26
- const translateX = useSharedValue(0);
27
- const opacity = useSharedValue(1);
28
- const shimmerColors = useMemo(() => [theme.skeletonBackgroundColor + "00", shimmerColor || theme.skeletonShimmer, theme.skeletonBackgroundColor + "00"], [theme, shimmerColor]);
29
-
30
- // Define easing
31
- const easing = Easing.bezier(0.76, 0, 0.24, 1);
32
-
33
- // Start shimmer animation
34
- const startAnimation = useCallback(() => {
35
- "worklet";
36
-
37
- const direction = isRTL ? -1 : 1;
38
- translateX.value = withRepeat(withSequence(withTiming(-containerWidth.value * 1.5 * direction, {
39
- duration: 0
40
- }), withTiming(containerWidth.value * 1.5 * direction, {
41
- duration,
42
- easing
43
- })), -1);
44
- opacity.value = withTiming(1, {
45
- duration: duration / 2,
46
- easing
47
- });
48
- }, [containerWidth, duration, easing, isRTL]);
21
+ const animatedValue = useRef(new Animated.Value(0)).current;
49
22
  useEffect(() => {
50
- startAnimation();
51
- return () => cancelAnimation(translateX);
52
- }, [startAnimation, translateX]);
53
- const animatedStyle = useAnimatedStyle(() => ({
54
- opacity: opacity.value,
55
- transform: [{
56
- translateX: translateX.value
57
- }]
58
- }));
23
+ const animation = Animated.loop(Animated.timing(animatedValue, {
24
+ toValue: 1,
25
+ duration: duration,
26
+ easing: Easing.bezier(0.76, 0, 0.24, 1),
27
+ useNativeDriver: true
28
+ }));
29
+ animation.start();
30
+ return () => animation.stop();
31
+ }, [animatedValue, duration]);
32
+ const numericWidth = typeof width === "number" ? width : 400;
33
+ const ltrOutputRange = [-shimmerWidth, numericWidth + shimmerWidth];
34
+ const rtlOutputRange = [numericWidth + shimmerWidth, -shimmerWidth];
35
+ const translateX = animatedValue.interpolate({
36
+ inputRange: [0, 1],
37
+ outputRange: isRTL ? rtlOutputRange : ltrOutputRange
38
+ });
39
+ const shimmerColors = [theme.skeletonBackgroundColor + "00", shimmerColor || theme.skeletonShimmer, theme.skeletonBackgroundColor + "00"];
59
40
  return /*#__PURE__*/_jsxs(View, {
60
41
  style: [{
61
42
  width,
@@ -63,20 +44,29 @@ const Shimmer = ({
63
44
  overflow: "hidden",
64
45
  backgroundColor: theme.skeletonBackgroundColor
65
46
  }, style],
66
- children: [children, /*#__PURE__*/_jsx(AnimatedLinearGradient, {
67
- colors: shimmerColors,
68
- start: {
69
- x: 0,
70
- y: 0.5
71
- },
72
- end: {
73
- x: 1,
74
- y: 0.5
75
- },
76
- style: [StyleSheet.absoluteFill, {
77
- width: shimmerWidth,
47
+ children: [children, /*#__PURE__*/_jsx(Animated.View, {
48
+ style: {
49
+ ...StyleSheet.absoluteFillObject,
50
+ transform: [{
51
+ translateX
52
+ }],
78
53
  zIndex: 1
79
- }, animatedStyle]
54
+ },
55
+ children: /*#__PURE__*/_jsx(LinearGradient, {
56
+ colors: shimmerColors,
57
+ style: {
58
+ flex: 1,
59
+ width: shimmerWidth
60
+ },
61
+ start: {
62
+ x: 0,
63
+ y: 0.5
64
+ },
65
+ end: {
66
+ x: 1,
67
+ y: 0.5
68
+ }
69
+ })
80
70
  })]
81
71
  });
82
72
  };
package/lib/module/components/Skeleton/Shimmer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","useCallback","useEffect","useMemo","View","StyleSheet","I18nManager","Animated","useSharedValue","useAnimatedStyle","withRepeat","withSequence","withTiming","cancelAnimation","Easing","LinearGradient","useTheme","jsx","_jsx","jsxs","_jsxs","AnimatedLinearGradient","createAnimatedComponent","Shimmer","children","width","height","style","shimmerColor","duration","shimmerWidth","theme","isRTL","containerWidth","translateX","opacity","shimmerColors","skeletonBackgroundColor","skeletonShimmer","easing","bezier","startAnimation","direction","value","animatedStyle","transform","overflow","backgroundColor","colors","start","x","y","end","absoluteFill","zIndex"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Skeleton/Shimmer.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useEffect","useRef","View","StyleSheet","Animated","Easing","I18nManager","LinearGradient","useTheme","jsx","_jsx","jsxs","_jsxs","Shimmer","children","width","height","style","shimmerColor","duration","shimmerWidth","theme","isRTL","animatedValue","Value","current","animation","loop","timing","toValue","easing","bezier","useNativeDriver","start","stop","numericWidth","ltrOutputRange","rtlOutputRange","translateX","interpolate","inputRange","outputRange","shimmerColors","skeletonBackgroundColor","skeletonShimmer","overflow","backgroundColor","absoluteFillObject","transform","zIndex","colors","flex","x","y","end"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Skeleton/Shimmer.tsx"],"mappings":"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","ignoreList":[]}
package/lib/typescript/src/components/Skeleton/Shimmer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/Shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAGL,SAAS,EACT,cAAc,EACd,SAAS,EAEV,MAAM,cAAc,CAAC;AAgBtB,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2FnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/Shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAKL,SAAS,EACT,cAAc,EACd,SAAS,EAEV,MAAM,cAAc,CAAC;AAItB,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuEnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "3.0.6",
3
+ "version": "3.0.7",
4
4
  "main": "./src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/components/Skeleton/Shimmer.tsx CHANGED
@@ -1,27 +1,17 @@
1
- import React, { useCallback, useEffect, useMemo } from "react";
1
+ import React, { useEffect, useRef } from "react";
2
2
  import {
3
3
  View,
4
4
  StyleSheet,
5
+ Animated,
6
+ Easing,
5
7
  ViewStyle,
6
8
  DimensionValue,
7
9
  StyleProp,
8
10
  I18nManager,
9
11
  } from "react-native";
10
- import Animated, {
11
- useSharedValue,
12
- useAnimatedStyle,
13
- withRepeat,
14
- withSequence,
15
- withTiming,
16
- cancelAnimation,
17
- Easing,
18
- useAnimatedReaction,
19
- } from "react-native-reanimated";
20
12
  import { LinearGradient } from "expo-linear-gradient";
21
13
  import { useTheme } from "../../theme";
22
14
 
23
- const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
24
-
25
15
  interface ShimmerProps {
26
16
  children?: React.ReactNode;
27
17
  width: DimensionValue;
@@ -43,58 +33,36 @@ const Shimmer: React.FC<ShimmerProps> = ({
43
33
  }) => {
44
34
  const { theme } = useTheme();
45
35
  const isRTL = I18nManager.isRTL;
36
+ const animatedValue = useRef(new Animated.Value(0)).current;
46
37
 
47
- // Shared animation values (Reanimated)
48
- const containerWidth = useSharedValue(
49
- typeof width === "number" ? width : 400
50
- );
51
- const translateX = useSharedValue(0);
52
- const opacity = useSharedValue(1);
53
-
54
- const shimmerColors = useMemo(
55
- () => [
56
- theme.skeletonBackgroundColor + "00",
57
- shimmerColor || theme.skeletonShimmer,
58
- theme.skeletonBackgroundColor + "00",
59
- ],
60
- [theme, shimmerColor]
61
- );
62
-
63
- // Define easing
64
- const easing = Easing.bezier(0.76, 0, 0.24, 1);
65
-
66
- // Start shimmer animation
67
- const startAnimation = useCallback(() => {
68
- "worklet";
69
- const direction = isRTL ? -1 : 1;
70
-
71
- translateX.value = withRepeat(
72
- withSequence(
73
- withTiming(-containerWidth.value * 1.5 * direction, { duration: 0 }),
74
- withTiming(containerWidth.value * 1.5 * direction, {
75
- duration,
76
- easing,
77
- })
78
- ),
79
- -1
38
+ useEffect(() => {
39
+ const animation = Animated.loop(
40
+ Animated.timing(animatedValue, {
41
+ toValue: 1,
42
+ duration: duration,
43
+ easing: Easing.bezier(0.76, 0, 0.24, 1),
44
+ useNativeDriver: true,
45
+ })
80
46
  );
47
+ animation.start();
48
+ return () => animation.stop();
49
+ }, [animatedValue, duration]);
81
50
 
82
- opacity.value = withTiming(1, {
83
- duration: duration / 2,
84
- easing,
85
- });
86
- }, [containerWidth, duration, easing, isRTL]);
51
+ const numericWidth = typeof width === "number" ? width : 400;
87
52
 
88
- useEffect(() => {
89
- startAnimation();
53
+ const ltrOutputRange = [-shimmerWidth, numericWidth + shimmerWidth];
54
+ const rtlOutputRange = [numericWidth + shimmerWidth, -shimmerWidth];
90
55
 
91
- return () => cancelAnimation(translateX);
92
- }, [startAnimation, translateX]);
56
+ const translateX = animatedValue.interpolate({
57
+ inputRange: [0, 1],
58
+ outputRange: isRTL ? rtlOutputRange : ltrOutputRange,
59
+ });
93
60
 
94
- const animatedStyle = useAnimatedStyle(() => ({
95
- opacity: opacity.value,
96
- transform: [{ translateX: translateX.value }],
97
- }));
61
+ const shimmerColors = [
62
+ theme.skeletonBackgroundColor + "00",
63
+ shimmerColor || theme.skeletonShimmer,
64
+ theme.skeletonBackgroundColor + "00",
65
+ ];
98
66
 
99
67
  return (
100
68
  <View
@@ -109,20 +77,22 @@ const Shimmer: React.FC<ShimmerProps> = ({
109
77
  ]}
110
78
  >
111
79
  {children}
112
-
113
- {/* Shimmer Gradient */}
114
- <AnimatedLinearGradient
115
- colors={shimmerColors as any}
116
- start={{ x: 0, y: 0.5 }}
117
- end={{ x: 1, y: 0.5 }}
118
- style={[
119
- StyleSheet.absoluteFill,
120
- { width: shimmerWidth, zIndex: 1 },
121
- animatedStyle,
122
- ]}
123
- />
80
+ <Animated.View
81
+ style={{
82
+ ...StyleSheet.absoluteFillObject,
83
+ transform: [{ translateX }],
84
+ zIndex: 1,
85
+ }}
86
+ >
87
+ <LinearGradient
88
+ colors={shimmerColors as any}
89
+ style={{ flex: 1, width: shimmerWidth }}
90
+ start={{ x: 0, y: 0.5 }}
91
+ end={{ x: 1, y: 0.5 }}
92
+ />
93
+ </Animated.View>
124
94
  </View>
125
95
  );
126
96
  };
127
97
 
128
- export default Shimmer;
98
+ export default Shimmer;