@pagopa/io-app-design-system 5.2.2 → 5.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 (10) hide show
  1. package/lib/commonjs/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +72 -96
  2. package/lib/commonjs/components/skeleton/IOSkeleton.js +20 -20
  3. package/lib/commonjs/components/skeleton/IOSkeleton.js.map +1 -1
  4. package/lib/module/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +72 -96
  5. package/lib/module/components/skeleton/IOSkeleton.js +20 -20
  6. package/lib/module/components/skeleton/IOSkeleton.js.map +1 -1
  7. package/lib/typescript/components/skeleton/IOSkeleton.d.ts.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +72 -96
  10. package/src/components/skeleton/IOSkeleton.tsx +25 -35
package/lib/commonjs/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap CHANGED
@@ -1395,19 +1395,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1395
1395
  }
1396
1396
  >
1397
1397
  <View
1398
+ collapsable={false}
1398
1399
  style={
1399
- [
1400
- {
1401
- "backgroundColor": "#E8EBF1",
1402
- "borderCurve": "continuous",
1403
- "borderRadius": 8,
1404
- "height": 44,
1405
- "width": 44,
1406
- },
1407
- {
1408
- "opacity": 0.75,
1409
- },
1410
- ]
1400
+ {
1401
+ "backgroundColor": "#E8EBF1",
1402
+ "borderCurve": "continuous",
1403
+ "borderRadius": 8,
1404
+ "height": 44,
1405
+ "opacity": 0.75,
1406
+ "width": 44,
1407
+ }
1411
1408
  }
1412
1409
  />
1413
1410
  </View>
@@ -1422,35 +1419,29 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1422
1419
  }
1423
1420
  >
1424
1421
  <View
1422
+ collapsable={false}
1425
1423
  style={
1426
- [
1427
- {
1428
- "backgroundColor": "#E8EBF1",
1429
- "borderCurve": "continuous",
1430
- "borderRadius": 8,
1431
- "height": 16,
1432
- "width": 62,
1433
- },
1434
- {
1435
- "opacity": 0.75,
1436
- },
1437
- ]
1424
+ {
1425
+ "backgroundColor": "#E8EBF1",
1426
+ "borderCurve": "continuous",
1427
+ "borderRadius": 8,
1428
+ "height": 16,
1429
+ "opacity": 0.75,
1430
+ "width": 62,
1431
+ }
1438
1432
  }
1439
1433
  />
1440
1434
  <View
1435
+ collapsable={false}
1441
1436
  style={
1442
- [
1443
- {
1444
- "backgroundColor": "#E8EBF1",
1445
- "borderCurve": "continuous",
1446
- "borderRadius": 8,
1447
- "height": 16,
1448
- "width": 107,
1449
- },
1450
- {
1451
- "opacity": 0.75,
1452
- },
1453
- ]
1437
+ {
1438
+ "backgroundColor": "#E8EBF1",
1439
+ "borderCurve": "continuous",
1440
+ "borderRadius": 8,
1441
+ "height": 16,
1442
+ "opacity": 0.75,
1443
+ "width": 107,
1444
+ }
1454
1445
  }
1455
1446
  />
1456
1447
  </View>
@@ -1462,19 +1453,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1462
1453
  }
1463
1454
  >
1464
1455
  <View
1456
+ collapsable={false}
1465
1457
  style={
1466
- [
1467
- {
1468
- "backgroundColor": "#E8EBF1",
1469
- "borderCurve": "continuous",
1470
- "borderRadius": 8,
1471
- "height": 24,
1472
- "width": 70,
1473
- },
1474
- {
1475
- "opacity": 0.75,
1476
- },
1477
- ]
1458
+ {
1459
+ "backgroundColor": "#E8EBF1",
1460
+ "borderCurve": "continuous",
1461
+ "borderRadius": 8,
1462
+ "height": 24,
1463
+ "opacity": 0.75,
1464
+ "width": 70,
1465
+ }
1478
1466
  }
1479
1467
  />
1480
1468
  </View>
@@ -2950,19 +2938,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
2950
2938
  }
2951
2939
  >
2952
2940
  <View
2941
+ collapsable={false}
2953
2942
  style={
2954
- [
2955
- {
2956
- "backgroundColor": "#E8EBF1",
2957
- "borderCurve": "continuous",
2958
- "borderRadius": 8,
2959
- "height": 44,
2960
- "width": 44,
2961
- },
2962
- {
2963
- "opacity": 0.75,
2964
- },
2965
- ]
2943
+ {
2944
+ "backgroundColor": "#E8EBF1",
2945
+ "borderCurve": "continuous",
2946
+ "borderRadius": 8,
2947
+ "height": 44,
2948
+ "opacity": 0.75,
2949
+ "width": 44,
2950
+ }
2966
2951
  }
2967
2952
  />
2968
2953
  </View>
@@ -2977,35 +2962,29 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
2977
2962
  }
2978
2963
  >
2979
2964
  <View
2965
+ collapsable={false}
2980
2966
  style={
2981
- [
2982
- {
2983
- "backgroundColor": "#E8EBF1",
2984
- "borderCurve": "continuous",
2985
- "borderRadius": 8,
2986
- "height": 16,
2987
- "width": 62,
2988
- },
2989
- {
2990
- "opacity": 0.75,
2991
- },
2992
- ]
2967
+ {
2968
+ "backgroundColor": "#E8EBF1",
2969
+ "borderCurve": "continuous",
2970
+ "borderRadius": 8,
2971
+ "height": 16,
2972
+ "opacity": 0.75,
2973
+ "width": 62,
2974
+ }
2993
2975
  }
2994
2976
  />
2995
2977
  <View
2978
+ collapsable={false}
2996
2979
  style={
2997
- [
2998
- {
2999
- "backgroundColor": "#E8EBF1",
3000
- "borderCurve": "continuous",
3001
- "borderRadius": 8,
3002
- "height": 16,
3003
- "width": 107,
3004
- },
3005
- {
3006
- "opacity": 0.75,
3007
- },
3008
- ]
2980
+ {
2981
+ "backgroundColor": "#E8EBF1",
2982
+ "borderCurve": "continuous",
2983
+ "borderRadius": 8,
2984
+ "height": 16,
2985
+ "opacity": 0.75,
2986
+ "width": 107,
2987
+ }
3009
2988
  }
3010
2989
  />
3011
2990
  </View>
@@ -3017,19 +2996,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
3017
2996
  }
3018
2997
  >
3019
2998
  <View
2999
+ collapsable={false}
3020
3000
  style={
3021
- [
3022
- {
3023
- "backgroundColor": "#E8EBF1",
3024
- "borderCurve": "continuous",
3025
- "borderRadius": 8,
3026
- "height": 24,
3027
- "width": 70,
3028
- },
3029
- {
3030
- "opacity": 0.75,
3031
- },
3032
- ]
3001
+ {
3002
+ "backgroundColor": "#E8EBF1",
3003
+ "borderCurve": "continuous",
3004
+ "borderRadius": 8,
3005
+ "height": 24,
3006
+ "opacity": 0.75,
3007
+ "width": 70,
3008
+ }
3033
3009
  }
3034
3010
  />
3035
3011
  </View>
package/lib/commonjs/components/skeleton/IOSkeleton.js CHANGED
@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.IOSkeleton = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
- var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
8
+ var _reactNative = require("react-native");
9
+ var _reactNativeReanimated = require("react-native-reanimated");
9
10
  var _core = require("../../core");
10
11
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
12
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,7 +24,7 @@ const IOSkeleton = ({
23
24
  }) => {
24
25
  const reduceMotion = (0, _reactNativeReanimated.useReducedMotion)();
25
26
  const theme = (0, _core.useIOTheme)();
26
- const opacity = (0, _reactNativeReanimated.useSharedValue)(reduceMotion ? OPACITY_REDUCED_MOTION : OPACITY_MAX);
27
+ const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(OPACITY_MAX)).current;
27
28
  const backgroundColor = color ?? _core.IOColors[theme["skeleton-background"]];
28
29
  const baseStyle = (0, _react.useMemo)(() => ({
29
30
  backgroundColor,
@@ -34,31 +35,30 @@ const IOSkeleton = ({
34
35
  }), [backgroundColor, shape, size, width, height, borderRadius]);
35
36
  (0, _react.useEffect)(() => {
36
37
  if (reduceMotion) {
37
- // eslint-disable-next-line functional/immutable-data
38
- opacity.value = OPACITY_REDUCED_MOTION;
38
+ opacity.setValue(OPACITY_REDUCED_MOTION);
39
39
  return;
40
40
  }
41
- const animationSequence = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withSequence)((0, _reactNativeReanimated.withTiming)(OPACITY_MIN, {
41
+ const animation = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(opacity, {
42
+ toValue: OPACITY_MIN,
42
43
  duration: ANIMATION_DURATION / 2,
43
- easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.sin)
44
- }), (0, _reactNativeReanimated.withTiming)(OPACITY_MAX, {
44
+ easing: _reactNative.Easing.inOut(_reactNative.Easing.sin),
45
+ useNativeDriver: true
46
+ }), _reactNative.Animated.timing(opacity, {
47
+ toValue: OPACITY_MAX,
45
48
  duration: ANIMATION_DURATION / 2,
46
- easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.sin)
47
- })), -1, true);
48
-
49
- // eslint-disable-next-line functional/immutable-data
50
- opacity.value = animationSequence;
49
+ easing: _reactNative.Easing.inOut(_reactNative.Easing.sin),
50
+ useNativeDriver: true
51
+ })]));
52
+ animation.start();
51
53
  return () => {
52
- (0, _reactNativeReanimated.cancelAnimation)(opacity);
54
+ animation.stop();
53
55
  };
54
- // eslint-disable-next-line react-hooks/exhaustive-deps
55
- }, [reduceMotion]);
56
- const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
57
- opacity: opacity.value
58
- }));
59
- return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
56
+ }, [opacity, reduceMotion]);
57
+ return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
60
58
  testID: testID,
61
- style: [baseStyle, animatedStyle]
59
+ style: [baseStyle, {
60
+ opacity
61
+ }]
62
62
  });
63
63
  };
64
64
  exports.IOSkeleton = IOSkeleton;
package/lib/commonjs/components/skeleton/IOSkeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ANIMATION_DURATION","OPACITY_MIN","OPACITY_MAX","OPACITY_REDUCED_MOTION","IOSkeleton","shape","size","width","height","radius","borderRadius","color","testID","reduceMotion","useReducedMotion","theme","useIOTheme","opacity","useSharedValue","backgroundColor","IOColors","baseStyle","useMemo","borderCurve","useEffect","value","animationSequence","withRepeat","withSequence","withTiming","duration","easing","Easing","inOut","sin","cancelAnimation","animatedStyle","useAnimatedStyle","createElement","View","style","exports"],"sourceRoot":"../../../../src","sources":["components/skeleton/IOSkeleton.tsx"],"mappings":"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"}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ANIMATION_DURATION","OPACITY_MIN","OPACITY_MAX","OPACITY_REDUCED_MOTION","IOSkeleton","shape","size","width","height","radius","borderRadius","color","testID","reduceMotion","useReducedMotion","theme","useIOTheme","opacity","useRef","Animated","Value","current","backgroundColor","IOColors","baseStyle","useMemo","borderCurve","useEffect","setValue","animation","loop","sequence","timing","toValue","duration","easing","Easing","inOut","sin","useNativeDriver","start","stop","createElement","View","style","exports"],"sourceRoot":"../../../../src","sources":["components/skeleton/IOSkeleton.tsx"],"mappings":"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"}
package/lib/module/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap CHANGED
@@ -1395,19 +1395,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1395
1395
  }
1396
1396
  >
1397
1397
  <View
1398
+ collapsable={false}
1398
1399
  style={
1399
- [
1400
- {
1401
- "backgroundColor": "#E8EBF1",
1402
- "borderCurve": "continuous",
1403
- "borderRadius": 8,
1404
- "height": 44,
1405
- "width": 44,
1406
- },
1407
- {
1408
- "opacity": 0.75,
1409
- },
1410
- ]
1400
+ {
1401
+ "backgroundColor": "#E8EBF1",
1402
+ "borderCurve": "continuous",
1403
+ "borderRadius": 8,
1404
+ "height": 44,
1405
+ "opacity": 0.75,
1406
+ "width": 44,
1407
+ }
1411
1408
  }
1412
1409
  />
1413
1410
  </View>
@@ -1422,35 +1419,29 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1422
1419
  }
1423
1420
  >
1424
1421
  <View
1422
+ collapsable={false}
1425
1423
  style={
1426
- [
1427
- {
1428
- "backgroundColor": "#E8EBF1",
1429
- "borderCurve": "continuous",
1430
- "borderRadius": 8,
1431
- "height": 16,
1432
- "width": 62,
1433
- },
1434
- {
1435
- "opacity": 0.75,
1436
- },
1437
- ]
1424
+ {
1425
+ "backgroundColor": "#E8EBF1",
1426
+ "borderCurve": "continuous",
1427
+ "borderRadius": 8,
1428
+ "height": 16,
1429
+ "opacity": 0.75,
1430
+ "width": 62,
1431
+ }
1438
1432
  }
1439
1433
  />
1440
1434
  <View
1435
+ collapsable={false}
1441
1436
  style={
1442
- [
1443
- {
1444
- "backgroundColor": "#E8EBF1",
1445
- "borderCurve": "continuous",
1446
- "borderRadius": 8,
1447
- "height": 16,
1448
- "width": 107,
1449
- },
1450
- {
1451
- "opacity": 0.75,
1452
- },
1453
- ]
1437
+ {
1438
+ "backgroundColor": "#E8EBF1",
1439
+ "borderCurve": "continuous",
1440
+ "borderRadius": 8,
1441
+ "height": 16,
1442
+ "opacity": 0.75,
1443
+ "width": 107,
1444
+ }
1454
1445
  }
1455
1446
  />
1456
1447
  </View>
@@ -1462,19 +1453,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1462
1453
  }
1463
1454
  >
1464
1455
  <View
1456
+ collapsable={false}
1465
1457
  style={
1466
- [
1467
- {
1468
- "backgroundColor": "#E8EBF1",
1469
- "borderCurve": "continuous",
1470
- "borderRadius": 8,
1471
- "height": 24,
1472
- "width": 70,
1473
- },
1474
- {
1475
- "opacity": 0.75,
1476
- },
1477
- ]
1458
+ {
1459
+ "backgroundColor": "#E8EBF1",
1460
+ "borderCurve": "continuous",
1461
+ "borderRadius": 8,
1462
+ "height": 24,
1463
+ "opacity": 0.75,
1464
+ "width": 70,
1465
+ }
1478
1466
  }
1479
1467
  />
1480
1468
  </View>
@@ -2950,19 +2938,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
2950
2938
  }
2951
2939
  >
2952
2940
  <View
2941
+ collapsable={false}
2953
2942
  style={
2954
- [
2955
- {
2956
- "backgroundColor": "#E8EBF1",
2957
- "borderCurve": "continuous",
2958
- "borderRadius": 8,
2959
- "height": 44,
2960
- "width": 44,
2961
- },
2962
- {
2963
- "opacity": 0.75,
2964
- },
2965
- ]
2943
+ {
2944
+ "backgroundColor": "#E8EBF1",
2945
+ "borderCurve": "continuous",
2946
+ "borderRadius": 8,
2947
+ "height": 44,
2948
+ "opacity": 0.75,
2949
+ "width": 44,
2950
+ }
2966
2951
  }
2967
2952
  />
2968
2953
  </View>
@@ -2977,35 +2962,29 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
2977
2962
  }
2978
2963
  >
2979
2964
  <View
2965
+ collapsable={false}
2980
2966
  style={
2981
- [
2982
- {
2983
- "backgroundColor": "#E8EBF1",
2984
- "borderCurve": "continuous",
2985
- "borderRadius": 8,
2986
- "height": 16,
2987
- "width": 62,
2988
- },
2989
- {
2990
- "opacity": 0.75,
2991
- },
2992
- ]
2967
+ {
2968
+ "backgroundColor": "#E8EBF1",
2969
+ "borderCurve": "continuous",
2970
+ "borderRadius": 8,
2971
+ "height": 16,
2972
+ "opacity": 0.75,
2973
+ "width": 62,
2974
+ }
2993
2975
  }
2994
2976
  />
2995
2977
  <View
2978
+ collapsable={false}
2996
2979
  style={
2997
- [
2998
- {
2999
- "backgroundColor": "#E8EBF1",
3000
- "borderCurve": "continuous",
3001
- "borderRadius": 8,
3002
- "height": 16,
3003
- "width": 107,
3004
- },
3005
- {
3006
- "opacity": 0.75,
3007
- },
3008
- ]
2980
+ {
2981
+ "backgroundColor": "#E8EBF1",
2982
+ "borderCurve": "continuous",
2983
+ "borderRadius": 8,
2984
+ "height": 16,
2985
+ "opacity": 0.75,
2986
+ "width": 107,
2987
+ }
3009
2988
  }
3010
2989
  />
3011
2990
  </View>
@@ -3017,19 +2996,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
3017
2996
  }
3018
2997
  >
3019
2998
  <View
2999
+ collapsable={false}
3020
3000
  style={
3021
- [
3022
- {
3023
- "backgroundColor": "#E8EBF1",
3024
- "borderCurve": "continuous",
3025
- "borderRadius": 8,
3026
- "height": 24,
3027
- "width": 70,
3028
- },
3029
- {
3030
- "opacity": 0.75,
3031
- },
3032
- ]
3001
+ {
3002
+ "backgroundColor": "#E8EBF1",
3003
+ "borderCurve": "continuous",
3004
+ "borderRadius": 8,
3005
+ "height": 24,
3006
+ "opacity": 0.75,
3007
+ "width": 70,
3008
+ }
3033
3009
  }
3034
3010
  />
3035
3011
  </View>
package/lib/module/components/skeleton/IOSkeleton.js CHANGED
@@ -1,5 +1,6 @@
1
- import React, { useEffect, useMemo } from "react";
2
- import Animated, { cancelAnimation, Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming } from "react-native-reanimated";
1
+ import React, { useEffect, useMemo, useRef } from "react";
2
+ import { Animated, Easing } from "react-native";
3
+ import { useReducedMotion } from "react-native-reanimated";
3
4
  import { IOColors, useIOTheme } from "../../core";
4
5
  const ANIMATION_DURATION = 1250;
5
6
  const [OPACITY_MIN, OPACITY_MAX] = [0.35, 0.75];
@@ -15,7 +16,7 @@ export const IOSkeleton = ({
15
16
  }) => {
16
17
  const reduceMotion = useReducedMotion();
17
18
  const theme = useIOTheme();
18
- const opacity = useSharedValue(reduceMotion ? OPACITY_REDUCED_MOTION : OPACITY_MAX);
19
+ const opacity = useRef(new Animated.Value(OPACITY_MAX)).current;
19
20
  const backgroundColor = color ?? IOColors[theme["skeleton-background"]];
20
21
  const baseStyle = useMemo(() => ({
21
22
  backgroundColor,
@@ -26,31 +27,30 @@ export const IOSkeleton = ({
26
27
  }), [backgroundColor, shape, size, width, height, borderRadius]);
27
28
  useEffect(() => {
28
29
  if (reduceMotion) {
29
- // eslint-disable-next-line functional/immutable-data
30
- opacity.value = OPACITY_REDUCED_MOTION;
30
+ opacity.setValue(OPACITY_REDUCED_MOTION);
31
31
  return;
32
32
  }
33
- const animationSequence = withRepeat(withSequence(withTiming(OPACITY_MIN, {
33
+ const animation = Animated.loop(Animated.sequence([Animated.timing(opacity, {
34
+ toValue: OPACITY_MIN,
34
35
  duration: ANIMATION_DURATION / 2,
35
- easing: Easing.inOut(Easing.sin)
36
- }), withTiming(OPACITY_MAX, {
36
+ easing: Easing.inOut(Easing.sin),
37
+ useNativeDriver: true
38
+ }), Animated.timing(opacity, {
39
+ toValue: OPACITY_MAX,
37
40
  duration: ANIMATION_DURATION / 2,
38
- easing: Easing.inOut(Easing.sin)
39
- })), -1, true);
40
-
41
- // eslint-disable-next-line functional/immutable-data
42
- opacity.value = animationSequence;
41
+ easing: Easing.inOut(Easing.sin),
42
+ useNativeDriver: true
43
+ })]));
44
+ animation.start();
43
45
  return () => {
44
- cancelAnimation(opacity);
46
+ animation.stop();
45
47
  };
46
- // eslint-disable-next-line react-hooks/exhaustive-deps
47
- }, [reduceMotion]);
48
- const animatedStyle = useAnimatedStyle(() => ({
49
- opacity: opacity.value
50
- }));
48
+ }, [opacity, reduceMotion]);
51
49
  return /*#__PURE__*/React.createElement(Animated.View, {
52
50
  testID: testID,
53
- style: [baseStyle, animatedStyle]
51
+ style: [baseStyle, {
52
+ opacity
53
+ }]
54
54
  });
55
55
  };
56
56
  //# sourceMappingURL=IOSkeleton.js.map
package/lib/module/components/skeleton/IOSkeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","useEffect","useMemo","Animated","cancelAnimation","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withSequence","withTiming","IOColors","useIOTheme","ANIMATION_DURATION","OPACITY_MIN","OPACITY_MAX","OPACITY_REDUCED_MOTION","IOSkeleton","shape","size","width","height","radius","borderRadius","color","testID","reduceMotion","theme","opacity","backgroundColor","baseStyle","borderCurve","value","animationSequence","duration","easing","inOut","sin","animatedStyle","createElement","View","style"],"sourceRoot":"../../../../src","sources":["components/skeleton/IOSkeleton.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAEjD,OAAOC,QAAQ,IACbC,eAAe,EACfC,MAAM,EACNC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,UAAU,QACL,yBAAyB;AAChC,SAASC,QAAQ,EAAEC,UAAU,QAAQ,YAAY;AAGjD,MAAMC,kBAAkB,GAAG,IAAI;AAC/B,MAAM,CAACC,WAAW,EAAEC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C,MAAMC,sBAAsB,GAAG,CAACD,WAAW,GAAGD,WAAW,IAAI,CAAC;AAwB9D,OAAO,MAAMG,UAAU,GAAGA,CAAC;EACzBC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,MAAM,EAAEC,YAAY;EACpBC,KAAK;EACLC;AACU,CAAC,KAAK;EAChB,MAAMC,YAAY,GAAGpB,gBAAgB,CAAC,CAAC;EACvC,MAAMqB,KAAK,GAAGf,UAAU,CAAC,CAAC;EAE1B,MAAMgB,OAAO,GAAGrB,cAAc,CAC5BmB,YAAY,GAAGV,sBAAsB,GAAGD,WAC1C,CAAC;EAED,MAAMc,eAAe,GAAGL,KAAK,IAAIb,QAAQ,CAACgB,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAEvE,MAAMG,SAAoB,GAAG7B,OAAO,CAClC,OAAO;IACL4B,eAAe;IACfT,KAAK,EAAEF,KAAK,KAAK,QAAQ,GAAGC,IAAI,GAAGC,KAAK;IACxCC,MAAM,EAAEH,KAAK,KAAK,QAAQ,GAAGC,IAAI,GAAGE,MAAM;IAC1CE,YAAY;IACZQ,WAAW,EAAE;EACf,CAAC,CAAC,EACF,CAACF,eAAe,EAAEX,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEE,YAAY,CAC5D,CAAC;EAEDvB,SAAS,CAAC,MAAM;IACd,IAAI0B,YAAY,EAAE;MAChB;MACAE,OAAO,CAACI,KAAK,GAAGhB,sBAAsB;MACtC;IACF;IAEA,MAAMiB,iBAAiB,GAAGzB,UAAU,CAClCC,YAAY,CACVC,UAAU,CAACI,WAAW,EAAE;MACtBoB,QAAQ,EAAErB,kBAAkB,GAAG,CAAC;MAChCsB,MAAM,EAAE/B,MAAM,CAACgC,KAAK,CAAChC,MAAM,CAACiC,GAAG;IACjC,CAAC,CAAC,EACF3B,UAAU,CAACK,WAAW,EAAE;MACtBmB,QAAQ,EAAErB,kBAAkB,GAAG,CAAC;MAChCsB,MAAM,EAAE/B,MAAM,CAACgC,KAAK,CAAChC,MAAM,CAACiC,GAAG;IACjC,CAAC,CACH,CAAC,EACD,CAAC,CAAC,EACF,IACF,CAAC;;IAED;IACAT,OAAO,CAACI,KAAK,GAAGC,iBAAiB;IAEjC,OAAO,MAAM;MACX9B,eAAe,CAACyB,OAAO,CAAC;IAC1B,CAAC;IACD;EACF,CAAC,EAAE,CAACF,YAAY,CAAC,CAAC;EAElB,MAAMY,aAAa,GAAGjC,gBAAgB,CAAC,OAAO;IAC5CuB,OAAO,EAAEA,OAAO,CAACI;EACnB,CAAC,CAAC,CAAC;EAEH,oBAAOjC,KAAA,CAAAwC,aAAA,CAACrC,QAAQ,CAACsC,IAAI;IAACf,MAAM,EAAEA,MAAO;IAACgB,KAAK,EAAE,CAACX,SAAS,EAAEQ,aAAa;EAAE,CAAE,CAAC;AAC7E,CAAC"}
1
+ {"version":3,"names":["React","useEffect","useMemo","useRef","Animated","Easing","useReducedMotion","IOColors","useIOTheme","ANIMATION_DURATION","OPACITY_MIN","OPACITY_MAX","OPACITY_REDUCED_MOTION","IOSkeleton","shape","size","width","height","radius","borderRadius","color","testID","reduceMotion","theme","opacity","Value","current","backgroundColor","baseStyle","borderCurve","setValue","animation","loop","sequence","timing","toValue","duration","easing","inOut","sin","useNativeDriver","start","stop","createElement","View","style"],"sourceRoot":"../../../../src","sources":["components/skeleton/IOSkeleton.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACzD,SACEC,QAAQ,EAGRC,MAAM,QAED,cAAc;AACrB,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,QAAQ,EAAEC,UAAU,QAAQ,YAAY;AAGjD,MAAMC,kBAAkB,GAAG,IAAI;AAC/B,MAAM,CAACC,WAAW,EAAEC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C,MAAMC,sBAAsB,GAAG,CAACD,WAAW,GAAGD,WAAW,IAAI,CAAC;AAwB9D,OAAO,MAAMG,UAAU,GAAGA,CAAC;EACzBC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,MAAM,EAAEC,YAAY;EACpBC,KAAK;EACLC;AACU,CAAC,KAAK;EAChB,MAAMC,YAAY,GAAGhB,gBAAgB,CAAC,CAAC;EACvC,MAAMiB,KAAK,GAAGf,UAAU,CAAC,CAAC;EAE1B,MAAMgB,OAAO,GAAGrB,MAAM,CAAC,IAAIC,QAAQ,CAACqB,KAAK,CAACd,WAAW,CAAC,CAAC,CAACe,OAAO;EAE/D,MAAMC,eAAe,GAAGP,KAAK,IAAIb,QAAQ,CAACgB,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAEvE,MAAMK,SAAoB,GAAG1B,OAAO,CAClC,OAAO;IACLyB,eAAe;IACfX,KAAK,EAAEF,KAAK,KAAK,QAAQ,GAAGC,IAAI,GAAGC,KAAK;IACxCC,MAAM,EAAEH,KAAK,KAAK,QAAQ,GAAGC,IAAI,GAAGE,MAAM;IAC1CE,YAAY;IACZU,WAAW,EAAE;EACf,CAAC,CAAC,EACF,CAACF,eAAe,EAAEb,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEE,YAAY,CAC5D,CAAC;EAEDlB,SAAS,CAAC,MAAM;IACd,IAAIqB,YAAY,EAAE;MAChBE,OAAO,CAACM,QAAQ,CAAClB,sBAAsB,CAAC;MACxC;IACF;IAEA,MAAMmB,SAAS,GAAG3B,QAAQ,CAAC4B,IAAI,CAC7B5B,QAAQ,CAAC6B,QAAQ,CAAC,CAChB7B,QAAQ,CAAC8B,MAAM,CAACV,OAAO,EAAE;MACvBW,OAAO,EAAEzB,WAAW;MACpB0B,QAAQ,EAAE3B,kBAAkB,GAAG,CAAC;MAChC4B,MAAM,EAAEhC,MAAM,CAACiC,KAAK,CAACjC,MAAM,CAACkC,GAAG,CAAC;MAChCC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFpC,QAAQ,CAAC8B,MAAM,CAACV,OAAO,EAAE;MACvBW,OAAO,EAAExB,WAAW;MACpByB,QAAQ,EAAE3B,kBAAkB,GAAG,CAAC;MAChC4B,MAAM,EAAEhC,MAAM,CAACiC,KAAK,CAACjC,MAAM,CAACkC,GAAG,CAAC;MAChCC,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CACH,CAAC;IAEDT,SAAS,CAACU,KAAK,CAAC,CAAC;IAEjB,OAAO,MAAM;MACXV,SAAS,CAACW,IAAI,CAAC,CAAC;IAClB,CAAC;EACH,CAAC,EAAE,CAAClB,OAAO,EAAEF,YAAY,CAAC,CAAC;EAE3B,oBAAOtB,KAAA,CAAA2C,aAAA,CAACvC,QAAQ,CAACwC,IAAI;IAACvB,MAAM,EAAEA,MAAO;IAACwB,KAAK,EAAE,CAACjB,SAAS,EAAE;MAAEJ;IAAQ,CAAC;EAAE,CAAE,CAAC;AAC3E,CAAC"}
package/lib/typescript/components/skeleton/IOSkeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IOSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/IOSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AAYrE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAM/C,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CACF,CAAC;AAEF,eAAO,MAAM,UAAU,wEAQpB,UAAU,sBAyDZ,CAAC"}
1
+ {"version":3,"file":"IOSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/IOSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAEL,UAAU,EACV,cAAc,EAGf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAM/C,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CACF,CAAC;AAEF,eAAO,MAAM,UAAU,wEAQpB,UAAU,sBAkDZ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pagopa/io-app-design-system",
3
- "version": "5.2.2",
3
+ "version": "5.2.3",
4
4
  "description": "The library defining the core components of the design system of @pagopa/io-app",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap CHANGED
@@ -1395,19 +1395,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1395
1395
  }
1396
1396
  >
1397
1397
  <View
1398
+ collapsable={false}
1398
1399
  style={
1399
- [
1400
- {
1401
- "backgroundColor": "#E8EBF1",
1402
- "borderCurve": "continuous",
1403
- "borderRadius": 8,
1404
- "height": 44,
1405
- "width": 44,
1406
- },
1407
- {
1408
- "opacity": 0.75,
1409
- },
1410
- ]
1400
+ {
1401
+ "backgroundColor": "#E8EBF1",
1402
+ "borderCurve": "continuous",
1403
+ "borderRadius": 8,
1404
+ "height": 44,
1405
+ "opacity": 0.75,
1406
+ "width": 44,
1407
+ }
1411
1408
  }
1412
1409
  />
1413
1410
  </View>
@@ -1422,35 +1419,29 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1422
1419
  }
1423
1420
  >
1424
1421
  <View
1422
+ collapsable={false}
1425
1423
  style={
1426
- [
1427
- {
1428
- "backgroundColor": "#E8EBF1",
1429
- "borderCurve": "continuous",
1430
- "borderRadius": 8,
1431
- "height": 16,
1432
- "width": 62,
1433
- },
1434
- {
1435
- "opacity": 0.75,
1436
- },
1437
- ]
1424
+ {
1425
+ "backgroundColor": "#E8EBF1",
1426
+ "borderCurve": "continuous",
1427
+ "borderRadius": 8,
1428
+ "height": 16,
1429
+ "opacity": 0.75,
1430
+ "width": 62,
1431
+ }
1438
1432
  }
1439
1433
  />
1440
1434
  <View
1435
+ collapsable={false}
1441
1436
  style={
1442
- [
1443
- {
1444
- "backgroundColor": "#E8EBF1",
1445
- "borderCurve": "continuous",
1446
- "borderRadius": 8,
1447
- "height": 16,
1448
- "width": 107,
1449
- },
1450
- {
1451
- "opacity": 0.75,
1452
- },
1453
- ]
1437
+ {
1438
+ "backgroundColor": "#E8EBF1",
1439
+ "borderCurve": "continuous",
1440
+ "borderRadius": 8,
1441
+ "height": 16,
1442
+ "opacity": 0.75,
1443
+ "width": 107,
1444
+ }
1454
1445
  }
1455
1446
  />
1456
1447
  </View>
@@ -1462,19 +1453,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
1462
1453
  }
1463
1454
  >
1464
1455
  <View
1456
+ collapsable={false}
1465
1457
  style={
1466
- [
1467
- {
1468
- "backgroundColor": "#E8EBF1",
1469
- "borderCurve": "continuous",
1470
- "borderRadius": 8,
1471
- "height": 24,
1472
- "width": 70,
1473
- },
1474
- {
1475
- "opacity": 0.75,
1476
- },
1477
- ]
1458
+ {
1459
+ "backgroundColor": "#E8EBF1",
1460
+ "borderCurve": "continuous",
1461
+ "borderRadius": 8,
1462
+ "height": 24,
1463
+ "opacity": 0.75,
1464
+ "width": 70,
1465
+ }
1478
1466
  }
1479
1467
  />
1480
1468
  </View>
@@ -2950,19 +2938,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
2950
2938
  }
2951
2939
  >
2952
2940
  <View
2941
+ collapsable={false}
2953
2942
  style={
2954
- [
2955
- {
2956
- "backgroundColor": "#E8EBF1",
2957
- "borderCurve": "continuous",
2958
- "borderRadius": 8,
2959
- "height": 44,
2960
- "width": 44,
2961
- },
2962
- {
2963
- "opacity": 0.75,
2964
- },
2965
- ]
2943
+ {
2944
+ "backgroundColor": "#E8EBF1",
2945
+ "borderCurve": "continuous",
2946
+ "borderRadius": 8,
2947
+ "height": 44,
2948
+ "opacity": 0.75,
2949
+ "width": 44,
2950
+ }
2966
2951
  }
2967
2952
  />
2968
2953
  </View>
@@ -2977,35 +2962,29 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
2977
2962
  }
2978
2963
  >
2979
2964
  <View
2965
+ collapsable={false}
2980
2966
  style={
2981
- [
2982
- {
2983
- "backgroundColor": "#E8EBF1",
2984
- "borderCurve": "continuous",
2985
- "borderRadius": 8,
2986
- "height": 16,
2987
- "width": 62,
2988
- },
2989
- {
2990
- "opacity": 0.75,
2991
- },
2992
- ]
2967
+ {
2968
+ "backgroundColor": "#E8EBF1",
2969
+ "borderCurve": "continuous",
2970
+ "borderRadius": 8,
2971
+ "height": 16,
2972
+ "opacity": 0.75,
2973
+ "width": 62,
2974
+ }
2993
2975
  }
2994
2976
  />
2995
2977
  <View
2978
+ collapsable={false}
2996
2979
  style={
2997
- [
2998
- {
2999
- "backgroundColor": "#E8EBF1",
3000
- "borderCurve": "continuous",
3001
- "borderRadius": 8,
3002
- "height": 16,
3003
- "width": 107,
3004
- },
3005
- {
3006
- "opacity": 0.75,
3007
- },
3008
- ]
2980
+ {
2981
+ "backgroundColor": "#E8EBF1",
2982
+ "borderCurve": "continuous",
2983
+ "borderRadius": 8,
2984
+ "height": 16,
2985
+ "opacity": 0.75,
2986
+ "width": 107,
2987
+ }
3009
2988
  }
3010
2989
  />
3011
2990
  </View>
@@ -3017,19 +2996,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
3017
2996
  }
3018
2997
  >
3019
2998
  <View
2999
+ collapsable={false}
3020
3000
  style={
3021
- [
3022
- {
3023
- "backgroundColor": "#E8EBF1",
3024
- "borderCurve": "continuous",
3025
- "borderRadius": 8,
3026
- "height": 24,
3027
- "width": 70,
3028
- },
3029
- {
3030
- "opacity": 0.75,
3031
- },
3032
- ]
3001
+ {
3002
+ "backgroundColor": "#E8EBF1",
3003
+ "borderCurve": "continuous",
3004
+ "borderRadius": 8,
3005
+ "height": 24,
3006
+ "opacity": 0.75,
3007
+ "width": 70,
3008
+ }
3033
3009
  }
3034
3010
  />
3035
3011
  </View>
package/src/components/skeleton/IOSkeleton.tsx CHANGED
@@ -1,15 +1,12 @@
1
- import React, { useEffect, useMemo } from "react";
2
- import { ColorValue, DimensionValue, ViewStyle } from "react-native";
3
- import Animated, {
4
- cancelAnimation,
1
+ import React, { useEffect, useMemo, useRef } from "react";
2
+ import {
3
+ Animated,
4
+ ColorValue,
5
+ DimensionValue,
5
6
  Easing,
6
- useAnimatedStyle,
7
- useReducedMotion,
8
- useSharedValue,
9
- withRepeat,
10
- withSequence,
11
- withTiming
12
- } from "react-native-reanimated";
7
+ ViewStyle
8
+ } from "react-native";
9
+ import { useReducedMotion } from "react-native-reanimated";
13
10
  import { IOColors, useIOTheme } from "../../core";
14
11
  import { WithTestID } from "../../utils/types";
15
12
 
@@ -51,9 +48,7 @@ export const IOSkeleton = ({
51
48
  const reduceMotion = useReducedMotion();
52
49
  const theme = useIOTheme();
53
50
 
54
- const opacity = useSharedValue(
55
- reduceMotion ? OPACITY_REDUCED_MOTION : OPACITY_MAX
56
- );
51
+ const opacity = useRef(new Animated.Value(OPACITY_MAX)).current;
57
52
 
58
53
  const backgroundColor = color ?? IOColors[theme["skeleton-background"]];
59
54
 
@@ -70,38 +65,33 @@ export const IOSkeleton = ({
70
65
 
71
66
  useEffect(() => {
72
67
  if (reduceMotion) {
73
- // eslint-disable-next-line functional/immutable-data
74
- opacity.value = OPACITY_REDUCED_MOTION;
68
+ opacity.setValue(OPACITY_REDUCED_MOTION);
75
69
  return;
76
70
  }
77
71
 
78
- const animationSequence = withRepeat(
79
- withSequence(
80
- withTiming(OPACITY_MIN, {
72
+ const animation = Animated.loop(
73
+ Animated.sequence([
74
+ Animated.timing(opacity, {
75
+ toValue: OPACITY_MIN,
81
76
  duration: ANIMATION_DURATION / 2,
82
- easing: Easing.inOut(Easing.sin)
77
+ easing: Easing.inOut(Easing.sin),
78
+ useNativeDriver: true
83
79
  }),
84
- withTiming(OPACITY_MAX, {
80
+ Animated.timing(opacity, {
81
+ toValue: OPACITY_MAX,
85
82
  duration: ANIMATION_DURATION / 2,
86
- easing: Easing.inOut(Easing.sin)
83
+ easing: Easing.inOut(Easing.sin),
84
+ useNativeDriver: true
87
85
  })
88
- ),
89
- -1,
90
- true
86
+ ])
91
87
  );
92
88
 
93
- // eslint-disable-next-line functional/immutable-data
94
- opacity.value = animationSequence;
89
+ animation.start();
95
90
 
96
91
  return () => {
97
- cancelAnimation(opacity);
92
+ animation.stop();
98
93
  };
99
- // eslint-disable-next-line react-hooks/exhaustive-deps
100
- }, [reduceMotion]);
101
-
102
- const animatedStyle = useAnimatedStyle(() => ({
103
- opacity: opacity.value
104
- }));
94
+ }, [opacity, reduceMotion]);
105
95
 
106
- return <Animated.View testID={testID} style={[baseStyle, animatedStyle]} />;
96
+ return <Animated.View testID={testID} style={[baseStyle, { opacity }]} />;
107
97
  };