related-ui-components 3.0.5 → 3.0.6

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 +52 -42
  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 +72 -42
package/lib/module/components/Skeleton/Shimmer.js CHANGED
@@ -1,10 +1,12 @@
1
1
  "use strict";
2
2
 
3
- import React, { useEffect, useRef } from "react";
4
- import { View, StyleSheet, Animated, Easing, I18nManager } from "react-native";
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";
5
6
  import { LinearGradient } from "expo-linear-gradient";
6
7
  import { useTheme } from "../../theme/index.js";
7
8
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
+ const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
8
10
  const Shimmer = ({
9
11
  children,
10
12
  width,
@@ -18,25 +20,42 @@ const Shimmer = ({
18
20
  theme
19
21
  } = useTheme();
20
22
  const isRTL = I18nManager.isRTL;
21
- const animatedValue = useRef(new Animated.Value(0)).current;
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]);
22
49
  useEffect(() => {
23
- const animation = Animated.loop(Animated.timing(animatedValue, {
24
- toValue: 1,
25
- duration: duration,
26
- easing: Easing.linear,
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 = ["rgba(255, 255, 255, 0)", shimmerColor || theme.skeletonShimmer, "rgba(255, 255, 255, 0)"];
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
+ }));
40
59
  return /*#__PURE__*/_jsxs(View, {
41
60
  style: [{
42
61
  width,
@@ -44,29 +63,20 @@ const Shimmer = ({
44
63
  overflow: "hidden",
45
64
  backgroundColor: theme.skeletonBackgroundColor
46
65
  }, style],
47
- children: [children, /*#__PURE__*/_jsx(Animated.View, {
48
- style: {
49
- ...StyleSheet.absoluteFillObject,
50
- transform: [{
51
- translateX
52
- }],
53
- zIndex: 1
66
+ children: [children, /*#__PURE__*/_jsx(AnimatedLinearGradient, {
67
+ colors: shimmerColors,
68
+ start: {
69
+ x: 0,
70
+ y: 0.5
54
71
  },
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
- })
72
+ end: {
73
+ x: 1,
74
+ y: 0.5
75
+ },
76
+ style: [StyleSheet.absoluteFill, {
77
+ width: shimmerWidth,
78
+ zIndex: 1
79
+ }, animatedStyle]
70
80
  })]
71
81
  });
72
82
  };
package/lib/module/components/Skeleton/Shimmer.js.map CHANGED
@@ -1 +1 @@
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","linear","useNativeDriver","start","stop","numericWidth","ltrOutputRange","rtlOutputRange","translateX","interpolate","inputRange","outputRange","shimmerColors","skeletonShimmer","overflow","backgroundColor","skeletonBackgroundColor","absoluteFillObject","transform","zIndex","colors","flex","x","y","end"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Skeleton/Shimmer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SACEC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,MAAM,EAINC,WAAW,QACN,cAAc;AACrB,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,QAAQ,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYvC,MAAMC,OAA+B,GAAGA,CAAC;EACvCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG;AACjB,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAM,CAAC,GAAGb,QAAQ,CAAC,CAAC;EAC5B,MAAMc,KAAK,GAAGhB,WAAW,CAACgB,KAAK;EAC/B,MAAMC,aAAa,GAAGtB,MAAM,CAAC,IAAIG,QAAQ,CAACoB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAE3DzB,SAAS,CAAC,MAAM;IACd,MAAM0B,SAAS,GAAGtB,QAAQ,CAACuB,IAAI,CAC7BvB,QAAQ,CAACwB,MAAM,CAACL,aAAa,EAAE;MAC7BM,OAAO,EAAE,CAAC;MACVV,QAAQ,EAAEA,QAAQ;MAClBW,MAAM,EAAEzB,MAAM,CAAC0B,MAAM;MACrBC,eAAe,EAAE;IACnB,CAAC,CACH,CAAC;IACDN,SAAS,CAACO,KAAK,CAAC,CAAC;IACjB,OAAO,MAAMP,SAAS,CAACQ,IAAI,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACX,aAAa,EAAEJ,QAAQ,CAAC,CAAC;EAE7B,MAAMgB,YAAY,GAAG,OAAOpB,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,GAAG;EAE5D,MAAMqB,cAAc,GAAG,CAAC,CAAChB,YAAY,EAAEe,YAAY,GAAGf,YAAY,CAAC;EACnE,MAAMiB,cAAc,GAAG,CAACF,YAAY,GAAGf,YAAY,EAAE,CAACA,YAAY,CAAC;EAEnE,MAAMkB,UAAU,GAAGf,aAAa,CAACgB,WAAW,CAAC;IAC3CC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClBC,WAAW,EAAEnB,KAAK,GAAGe,cAAc,GAAGD;EACxC,CAAC,CAAC;EAEF,MAAMM,aAAa,GAAG,CACpB,wBAAwB,EACxBxB,YAAY,IAAIG,KAAK,CAACsB,eAAe,EACrC,wBAAwB,CACzB;EAED,oBACE/B,KAAA,CAACV,IAAI;IACHe,KAAK,EAAE,CACL;MACEF,KAAK;MACLC,MAAM;MACN4B,QAAQ,EAAE,QAAQ;MAClBC,eAAe,EAAExB,KAAK,CAACyB;IACzB,CAAC,EACD7B,KAAK,CACL;IAAAH,QAAA,GAEDA,QAAQ,eACTJ,IAAA,CAACN,QAAQ,CAACF,IAAI;MACZe,KAAK,EAAE;QACL,GAAGd,UAAU,CAAC4C,kBAAkB;QAChCC,SAAS,EAAE,CAAC;UAAEV;QAAW,CAAC,CAAC;QAC3BW,MAAM,EAAE;MACV,CAAE;MAAAnC,QAAA,eAEFJ,IAAA,CAACH,cAAc;QACb2C,MAAM,EAAER,aAAqB;QAC7BzB,KAAK,EAAE;UAAEkC,IAAI,EAAE,CAAC;UAAEpC,KAAK,EAAEK;QAAa,CAAE;QACxCa,KAAK,EAAE;UAAEmB,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAI,CAAE;QACxBC,GAAG,EAAE;UAAEF,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAI;MAAE,CACvB;IAAC,CACW,CAAC;EAAA,CACZ,CAAC;AAEX,CAAC;AAED,eAAexC,OAAO","ignoreList":[]}
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":[]}
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,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"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "3.0.5",
3
+ "version": "3.0.6",
4
4
  "main": "./src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/components/Skeleton/Shimmer.tsx CHANGED
@@ -1,17 +1,27 @@
1
- import React, { useEffect, useRef } from "react";
1
+ import React, { useCallback, useEffect, useMemo } from "react";
2
2
  import {
3
3
  View,
4
4
  StyleSheet,
5
- Animated,
6
- Easing,
7
5
  ViewStyle,
8
6
  DimensionValue,
9
7
  StyleProp,
10
8
  I18nManager,
11
9
  } 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";
12
20
  import { LinearGradient } from "expo-linear-gradient";
13
21
  import { useTheme } from "../../theme";
14
22
 
23
+ const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
24
+
15
25
  interface ShimmerProps {
16
26
  children?: React.ReactNode;
17
27
  width: DimensionValue;
@@ -33,36 +43,58 @@ const Shimmer: React.FC<ShimmerProps> = ({
33
43
  }) => {
34
44
  const { theme } = useTheme();
35
45
  const isRTL = I18nManager.isRTL;
36
- const animatedValue = useRef(new Animated.Value(0)).current;
37
46
 
38
- useEffect(() => {
39
- const animation = Animated.loop(
40
- Animated.timing(animatedValue, {
41
- toValue: 1,
42
- duration: duration,
43
- easing: Easing.linear,
44
- useNativeDriver: true,
45
- })
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
46
80
  );
47
- animation.start();
48
- return () => animation.stop();
49
- }, [animatedValue, duration]);
50
81
 
51
- const numericWidth = typeof width === "number" ? width : 400;
82
+ opacity.value = withTiming(1, {
83
+ duration: duration / 2,
84
+ easing,
85
+ });
86
+ }, [containerWidth, duration, easing, isRTL]);
52
87
 
53
- const ltrOutputRange = [-shimmerWidth, numericWidth + shimmerWidth];
54
- const rtlOutputRange = [numericWidth + shimmerWidth, -shimmerWidth];
88
+ useEffect(() => {
89
+ startAnimation();
55
90
 
56
- const translateX = animatedValue.interpolate({
57
- inputRange: [0, 1],
58
- outputRange: isRTL ? rtlOutputRange : ltrOutputRange,
59
- });
91
+ return () => cancelAnimation(translateX);
92
+ }, [startAnimation, translateX]);
60
93
 
61
- const shimmerColors = [
62
- "rgba(255, 255, 255, 0)",
63
- shimmerColor || theme.skeletonShimmer,
64
- "rgba(255, 255, 255, 0)",
65
- ];
94
+ const animatedStyle = useAnimatedStyle(() => ({
95
+ opacity: opacity.value,
96
+ transform: [{ translateX: translateX.value }],
97
+ }));
66
98
 
67
99
  return (
68
100
  <View
@@ -77,22 +109,20 @@ const Shimmer: React.FC<ShimmerProps> = ({
77
109
  ]}
78
110
  >
79
111
  {children}
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>
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
+ />
94
124
  </View>
95
125
  );
96
126
  };
97
127
 
98
- export default Shimmer;
128
+ export default Shimmer;