related-ui-components 3.2.2 → 3.2.3

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 (8) hide show
  1. package/lib/module/app.js.map +1 -1
  2. package/lib/module/components/Skeleton/Shimmer.js +40 -34
  3. package/lib/module/components/Skeleton/Shimmer.js.map +1 -1
  4. package/lib/typescript/src/app.d.ts.map +1 -1
  5. package/lib/typescript/src/components/Skeleton/Shimmer.d.ts.map +1 -1
  6. package/package.json +1 -1
  7. package/src/app.tsx +2 -3
  8. package/src/components/Skeleton/Shimmer.tsx +52 -45
package/lib/module/app.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","PhoneInput","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","variant","totalSteps","currentStep","size","fontSize","strokeWidth","progressColor","value","placeholder","onChangeText","inputContainerStyle","height","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","PhoneInput","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","variant","totalSteps","currentStep","size","fontSize","strokeWidth","progressColor","value","placeholder","onChangeText","inputContainerStyle","height","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}
package/lib/module/components/Skeleton/Shimmer.js CHANGED
@@ -1,8 +1,9 @@
1
1
  "use strict";
2
2
 
3
3
  import { LinearGradient } from "expo-linear-gradient";
4
- import React, { useEffect, useRef, useState } from "react";
5
- import { Animated, Easing, I18nManager, StyleSheet, View } from "react-native";
4
+ import React, { useEffect } from "react";
5
+ import { I18nManager, StyleSheet, View } from "react-native";
6
+ import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
6
7
  import { useTheme } from "../../theme/index.js";
7
8
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
9
  const Shimmer = ({
@@ -17,50 +18,50 @@ const Shimmer = ({
17
18
  const {
18
19
  theme
19
20
  } = useTheme();
20
- const isRTL = I18nManager.isRTL;
21
- const [viewWidth, setViewWidth] = useState(0);
22
- const animatedValue = useRef(new Animated.Value(0)).current;
21
+ const layoutWidth = useSharedValue(0);
22
+ const progress = useSharedValue(0);
23
23
  useEffect(() => {
24
- if (viewWidth === 0) return;
25
- const animation = Animated.loop(Animated.timing(animatedValue, {
26
- toValue: 1,
24
+ progress.value = withRepeat(withTiming(1, {
27
25
  duration: duration,
28
- easing: Easing.linear,
29
- useNativeDriver: true
30
- }));
31
- animation.start();
32
- return () => animation.stop();
33
- }, [animatedValue, duration, viewWidth]);
26
+ easing: Easing.linear
27
+ }), -1, false);
28
+ }, [duration, progress]);
29
+
30
+ // 3. Update width via shared value (no re-render)
34
31
  const handleLayout = event => {
35
- const {
36
- width
37
- } = event.nativeEvent.layout;
38
- if (width > 0 && Math.round(width) !== Math.round(viewWidth)) {
39
- setViewWidth(width);
40
- }
32
+ layoutWidth.value = event.nativeEvent.layout.width;
41
33
  };
42
- const outputRange = isRTL ? [viewWidth, -(viewWidth + shimmerWidth)] : [-(viewWidth + shimmerWidth), viewWidth];
43
- const translateX = animatedValue.interpolate({
44
- inputRange: [0, 1],
45
- outputRange: outputRange
34
+
35
+ // 4. Calculate translation on the UI thread
36
+ const rStyle = useAnimatedStyle(() => {
37
+ if (layoutWidth.value === 0) {
38
+ return {
39
+ opacity: 0
40
+ };
41
+ }
42
+ const start = -layoutWidth.value;
43
+ const end = layoutWidth.value;
44
+ const outputRange = I18nManager.isRTL ? [end, start] : [start, end];
45
+ const translateX = interpolate(progress.value, [0, 1], outputRange);
46
+ return {
47
+ opacity: 1,
48
+ transform: [{
49
+ translateX
50
+ }]
51
+ };
46
52
  });
47
53
  const gradientColors = ["rgba(255, 255, 255, 0)", shimmerColor || theme.skeletonShimmer || "rgba(255, 255, 255, 0.3)", "rgba(255, 255, 255, 0)"];
48
54
  return /*#__PURE__*/_jsxs(View, {
49
55
  onLayout: handleLayout,
50
- style: [{
56
+ style: [styles.container, {
51
57
  width,
52
58
  height,
53
- overflow: "hidden",
54
- backgroundColor: theme.skeletonBackgroundColor
59
+ backgroundColor: theme.skeletonBackgroundColor || "#E0E0E0"
55
60
  }, style],
56
- children: [children, viewWidth > 0 && /*#__PURE__*/_jsx(Animated.View, {
57
- style: {
58
- ...StyleSheet.absoluteFillObject,
59
- transform: [{
60
- translateX
61
- }],
61
+ children: [children, /*#__PURE__*/_jsx(Animated.View, {
62
+ style: [StyleSheet.absoluteFill, rStyle, {
62
63
  zIndex: 1
63
- },
64
+ }],
64
65
  children: /*#__PURE__*/_jsx(LinearGradient, {
65
66
  colors: gradientColors,
66
67
  style: {
@@ -79,5 +80,10 @@ const Shimmer = ({
79
80
  })]
80
81
  });
81
82
  };
83
+ const styles = StyleSheet.create({
84
+ container: {
85
+ overflow: "hidden"
86
+ }
87
+ });
82
88
  export default Shimmer;
83
89
  //# sourceMappingURL=Shimmer.js.map
package/lib/module/components/Skeleton/Shimmer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["LinearGradient","React","useEffect","useRef","useState","Animated","Easing","I18nManager","StyleSheet","View","useTheme","jsx","_jsx","jsxs","_jsxs","Shimmer","children","width","height","style","shimmerColor","duration","shimmerWidth","theme","isRTL","viewWidth","setViewWidth","animatedValue","Value","current","animation","loop","timing","toValue","easing","linear","useNativeDriver","start","stop","handleLayout","event","nativeEvent","layout","Math","round","outputRange","translateX","interpolate","inputRange","gradientColors","skeletonShimmer","onLayout","overflow","backgroundColor","skeletonBackgroundColor","absoluteFillObject","transform","zIndex","colors","x","y","end"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Skeleton/Shimmer.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["LinearGradient","React","useEffect","I18nManager","StyleSheet","View","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withRepeat","withTiming","useTheme","jsx","_jsx","jsxs","_jsxs","Shimmer","children","width","height","style","shimmerColor","duration","shimmerWidth","theme","layoutWidth","progress","value","easing","linear","handleLayout","event","nativeEvent","layout","rStyle","opacity","start","end","outputRange","isRTL","translateX","transform","gradientColors","skeletonShimmer","onLayout","styles","container","backgroundColor","skeletonBackgroundColor","absoluteFill","zIndex","colors","x","y","create","overflow"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Skeleton/Shimmer.tsx"],"mappings":"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","ignoreList":[]}
package/lib/typescript/src/app.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAiCnD,QAAA,MAAM,GAAG,yBAiJR,CAAC;AAWF,eAAe,GAAG,CAAC"}
1
+ {"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAiCnD,QAAA,MAAM,GAAG,yBAgJR,CAAC;AAWF,eAAe,GAAG,CAAC"}
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":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAEL,cAAc,EAId,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,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,CAqFnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/Shimmer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,cAAc,EAGd,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAWtB,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,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,CAgFnC,CAAC;AAQF,eAAe,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "3.2.2",
3
+ "version": "3.2.3",
4
4
  "main": "./src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/app.tsx CHANGED
@@ -120,8 +120,7 @@ const App = () => {
120
120
  {/* <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={300} onValueChange={console.log}></RangeSlider> */}
121
121
  <PhoneInput
122
122
  value=""
123
- placeholder="123 456 7890"
124
-
123
+ placeholder="123 456 7890"
125
124
  onChangeText={() => {}}
126
125
  inputContainerStyle={{ height: 55 }}
127
126
  ></PhoneInput>
@@ -139,7 +138,7 @@ const App = () => {
139
138
  backgroundImage={require("./assets/images/namshi-banner.png")}
140
139
  ></SelaDealCard>
141
140
  */}
142
- {/*
141
+ {/*
143
142
  <ScratchCard
144
143
  backgroundColor={"black"}
145
144
  text="Scratch And Win"
package/src/components/Skeleton/Shimmer.tsx CHANGED
@@ -1,9 +1,7 @@
1
1
  import { LinearGradient } from "expo-linear-gradient";
2
- import React, { useEffect, useRef, useState } from "react";
2
+ import React, { useEffect } from "react";
3
3
  import {
4
- Animated,
5
4
  DimensionValue,
6
- Easing,
7
5
  I18nManager,
8
6
  LayoutChangeEvent,
9
7
  StyleProp,
@@ -11,6 +9,14 @@ import {
11
9
  View,
12
10
  ViewStyle,
13
11
  } from "react-native";
12
+ import Animated, {
13
+ Easing,
14
+ interpolate,
15
+ useAnimatedStyle,
16
+ useSharedValue,
17
+ withRepeat,
18
+ withTiming,
19
+ } from "react-native-reanimated";
14
20
  import { useTheme } from "../../theme";
15
21
 
16
22
  interface ShimmerProps {
@@ -33,40 +39,43 @@ const Shimmer: React.FC<ShimmerProps> = ({
33
39
  shimmerWidth = 150,
34
40
  }) => {
35
41
  const { theme } = useTheme();
36
- const isRTL = I18nManager.isRTL;
37
-
38
- const [viewWidth, setViewWidth] = useState<number>(0);
39
- const animatedValue = useRef(new Animated.Value(0)).current;
40
42
 
41
- useEffect(() => {
42
- if (viewWidth === 0) return;
43
+ const layoutWidth = useSharedValue(0);
44
+ const progress = useSharedValue(0);
43
45
 
44
- const animation = Animated.loop(
45
- Animated.timing(animatedValue, {
46
- toValue: 1,
46
+ useEffect(() => {
47
+ progress.value = withRepeat(
48
+ withTiming(1, {
47
49
  duration: duration,
48
50
  easing: Easing.linear,
49
- useNativeDriver: true,
50
- })
51
+ }),
52
+ -1,
53
+ false
51
54
  );
52
- animation.start();
53
- return () => animation.stop();
54
- }, [animatedValue, duration, viewWidth]);
55
+ }, [duration, progress]);
55
56
 
57
+ // 3. Update width via shared value (no re-render)
56
58
  const handleLayout = (event: LayoutChangeEvent) => {
57
- const { width } = event.nativeEvent.layout;
58
- if (width > 0 && Math.round(width) !== Math.round(viewWidth)) {
59
- setViewWidth(width);
60
- }
59
+ layoutWidth.value = event.nativeEvent.layout.width;
61
60
  };
62
61
 
63
- const outputRange = isRTL
64
- ? [viewWidth, -(viewWidth + shimmerWidth)]
65
- : [-(viewWidth + shimmerWidth), viewWidth];
62
+ // 4. Calculate translation on the UI thread
63
+ const rStyle = useAnimatedStyle(() => {
64
+ if (layoutWidth.value === 0) {
65
+ return { opacity: 0 };
66
+ }
67
+
68
+ const start = -layoutWidth.value;
69
+ const end = layoutWidth.value;
70
+
71
+ const outputRange = I18nManager.isRTL ? [end, start] : [start, end];
66
72
 
67
- const translateX = animatedValue.interpolate({
68
- inputRange: [0, 1],
69
- outputRange: outputRange,
73
+ const translateX = interpolate(progress.value, [0, 1], outputRange);
74
+
75
+ return {
76
+ opacity: 1,
77
+ transform: [{ translateX }],
78
+ };
70
79
  });
71
80
 
72
81
  const gradientColors = [
@@ -79,35 +88,33 @@ const Shimmer: React.FC<ShimmerProps> = ({
79
88
  <View
80
89
  onLayout={handleLayout}
81
90
  style={[
91
+ styles.container,
82
92
  {
83
93
  width,
84
94
  height,
85
- overflow: "hidden",
86
- backgroundColor: theme.skeletonBackgroundColor,
95
+ backgroundColor: theme.skeletonBackgroundColor || "#E0E0E0",
87
96
  },
88
97
  style,
89
98
  ]}
90
99
  >
91
100
  {children}
92
101
 
93
- {viewWidth > 0 && (
94
- <Animated.View
95
- style={{
96
- ...StyleSheet.absoluteFillObject,
97
- transform: [{ translateX }],
98
- zIndex: 1,
99
- }}
100
- >
101
- <LinearGradient
102
- colors={gradientColors as any}
103
- style={{ height: "100%", width: shimmerWidth }}
104
- start={{ x: 0, y: 0.5 }}
105
- end={{ x: 1, y: 0.5 }}
106
- />
107
- </Animated.View>
108
- )}
102
+ <Animated.View style={[StyleSheet.absoluteFill, rStyle, { zIndex: 1 }]}>
103
+ <LinearGradient
104
+ colors={gradientColors as any}
105
+ style={{ height: "100%", width: shimmerWidth }}
106
+ start={{ x: 0, y: 0.5 }}
107
+ end={{ x: 1, y: 0.5 }}
108
+ />
109
+ </Animated.View>
109
110
  </View>
110
111
  );
111
112
  };
112
113
 
114
+ const styles = StyleSheet.create({
115
+ container: {
116
+ overflow: "hidden",
117
+ },
118
+ });
119
+
113
120
  export default Shimmer;