@fountain-ui/core 2.0.0-beta.12 → 2.0.0-beta.13

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 (61) hide show
  1. package/build/commonjs/ButtonBase/ButtonBase.js +56 -52
  2. package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
  3. package/build/commonjs/CircularProgress/CircularProgress.js +10 -12
  4. package/build/commonjs/CircularProgress/CircularProgress.js.map +1 -1
  5. package/build/commonjs/ImageCore/ImageCoreNative.js +24 -26
  6. package/build/commonjs/ImageCore/ImageCoreNative.js.map +1 -1
  7. package/build/commonjs/Tooltip/Tooltip.js +14 -18
  8. package/build/commonjs/Tooltip/Tooltip.js.map +1 -1
  9. package/build/commonjs/animated/AnimatedPressable.js +2 -3
  10. package/build/commonjs/animated/AnimatedPressable.js.map +1 -1
  11. package/build/commonjs/hooks/useThrottle.js +3 -7
  12. package/build/commonjs/hooks/useThrottle.js.map +1 -1
  13. package/build/commonjs/internal/hooks/useHeight.js +2 -6
  14. package/build/commonjs/internal/hooks/useHeight.js.map +1 -1
  15. package/build/module/ButtonBase/ButtonBase.js +54 -48
  16. package/build/module/ButtonBase/ButtonBase.js.map +1 -1
  17. package/build/module/CircularProgress/CircularProgress.js +10 -11
  18. package/build/module/CircularProgress/CircularProgress.js.map +1 -1
  19. package/build/module/ImageCore/ImageCoreNative.js +20 -23
  20. package/build/module/ImageCore/ImageCoreNative.js.map +1 -1
  21. package/build/module/Tooltip/Tooltip.js +11 -11
  22. package/build/module/Tooltip/Tooltip.js.map +1 -1
  23. package/build/module/animated/AnimatedPressable.js +2 -3
  24. package/build/module/animated/AnimatedPressable.js.map +1 -1
  25. package/build/module/hooks/useThrottle.js +3 -3
  26. package/build/module/hooks/useThrottle.js.map +1 -1
  27. package/build/module/internal/hooks/useHeight.js +2 -2
  28. package/build/module/internal/hooks/useHeight.js.map +1 -1
  29. package/build/typescript/animated/AnimatedPressable.d.ts +2 -2
  30. package/package.json +2 -2
  31. package/src/ButtonBase/ButtonBase.tsx +65 -43
  32. package/src/CircularProgress/CircularProgress.tsx +15 -16
  33. package/src/ImageCore/ImageCoreNative.tsx +17 -19
  34. package/src/Tooltip/Tooltip.tsx +12 -12
  35. package/src/animated/AnimatedPressable.tsx +1 -2
  36. package/src/hooks/useThrottle.ts +3 -3
  37. package/src/internal/hooks/useHeight.ts +2 -2
  38. package/build/commonjs/ButtonBase/ButtonBase.ios.js +0 -101
  39. package/build/commonjs/ButtonBase/ButtonBase.ios.js.map +0 -1
  40. package/build/commonjs/ButtonBase/useDisabledReaction/index.js +0 -21
  41. package/build/commonjs/ButtonBase/useDisabledReaction/index.js.map +0 -1
  42. package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js +0 -9
  43. package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js.map +0 -1
  44. package/build/commonjs/ImageCore/ImageCoreNative.ios.js +0 -60
  45. package/build/commonjs/ImageCore/ImageCoreNative.ios.js.map +0 -1
  46. package/build/module/ButtonBase/ButtonBase.ios.js +0 -82
  47. package/build/module/ButtonBase/ButtonBase.ios.js.map +0 -1
  48. package/build/module/ButtonBase/useDisabledReaction/index.js +0 -12
  49. package/build/module/ButtonBase/useDisabledReaction/index.js.map +0 -1
  50. package/build/module/ButtonBase/useDisabledReaction/index.native.js +0 -2
  51. package/build/module/ButtonBase/useDisabledReaction/index.native.js.map +0 -1
  52. package/build/module/ImageCore/ImageCoreNative.ios.js +0 -45
  53. package/build/module/ImageCore/ImageCoreNative.ios.js.map +0 -1
  54. package/build/typescript/ButtonBase/ButtonBase.ios.d.ts +0 -2
  55. package/build/typescript/ButtonBase/useDisabledReaction/index.d.ts +0 -2
  56. package/build/typescript/ButtonBase/useDisabledReaction/index.native.d.ts +0 -2
  57. package/build/typescript/ImageCore/ImageCoreNative.ios.d.ts +0 -2
  58. package/src/ButtonBase/ButtonBase.ios.tsx +0 -95
  59. package/src/ButtonBase/useDisabledReaction/index.native.ts +0 -4
  60. package/src/ButtonBase/useDisabledReaction/index.ts +0 -17
  61. package/src/ImageCore/ImageCoreNative.ios.tsx +0 -46
@@ -1,82 +0,0 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React from 'react';
4
- import { Animated, Pressable } from 'react-native';
5
- import { useThrottle } from '../hooks';
6
- const ORIGINAL_OPACITY = 1;
7
- const ACTIVE_OPACITY = .65;
8
- const DISABLED_OPACITY = .3;
9
- const ORIGINAL_SCALE = 1;
10
- const MINIFIED_SCALE = .96;
11
- const animatedDuration = 150;
12
- const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
13
- export default function ButtonBase(props) {
14
- const {
15
- children,
16
- disabled = false,
17
- disableThrottle = false,
18
- onPress,
19
- pressEffect = 'opacity',
20
- style,
21
- throttleMillis = 650,
22
- ...otherProps
23
- } = props;
24
- const handlePress = useThrottle({
25
- periodMillis: disableThrottle ? 0 : throttleMillis,
26
- callback: onPress
27
- });
28
- const [opacity] = React.useState(() => new Animated.Value(ORIGINAL_OPACITY));
29
- const [scale] = React.useState(() => new Animated.Value(ORIGINAL_SCALE));
30
- const startAnimation = React.useCallback(function (pressIn) {
31
- let isHovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
32
-
33
- if (pressEffect === 'none') {
34
- return;
35
- }
36
-
37
- if (pressEffect === 'opacity') {
38
- if (pressIn) {
39
- Animated.timing(opacity, {
40
- toValue: ACTIVE_OPACITY,
41
- duration: animatedDuration,
42
- useNativeDriver: true
43
- }).start();
44
- } else {
45
- Animated.timing(opacity, {
46
- toValue: ORIGINAL_OPACITY,
47
- duration: 0,
48
- useNativeDriver: true
49
- }).start();
50
- }
51
- } else if (!isHovered) {
52
- if (pressIn) {
53
- Animated.timing(scale, {
54
- toValue: MINIFIED_SCALE,
55
- duration: animatedDuration,
56
- delay: 100,
57
- useNativeDriver: true
58
- }).start();
59
- } else {
60
- Animated.timing(scale, {
61
- toValue: ORIGINAL_SCALE,
62
- duration: 150,
63
- useNativeDriver: true
64
- }).start();
65
- }
66
- }
67
- }, [pressEffect]);
68
- return /*#__PURE__*/React.createElement(AnimatedPressable, _extends({
69
- disabled: disabled,
70
- onPress: handlePress,
71
- onPressIn: () => startAnimation(true),
72
- onPressOut: () => startAnimation(false),
73
- style: [style, {
74
- opacity: disabled ? DISABLED_OPACITY : opacity,
75
- transform: [{
76
- scale: disabled ? ORIGINAL_SCALE : scale
77
- }]
78
- }]
79
- }, otherProps), children);
80
- }
81
- ;
82
- //# sourceMappingURL=ButtonBase.ios.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","Animated","Pressable","useThrottle","ORIGINAL_OPACITY","ACTIVE_OPACITY","DISABLED_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animatedDuration","AnimatedPressable","createAnimatedComponent","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","opacity","useState","Value","scale","startAnimation","useCallback","pressIn","isHovered","timing","toValue","duration","useNativeDriver","start","delay","transform"],"sources":["ButtonBase.ios.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, Pressable } from 'react-native';\nimport { useThrottle } from '../hooks';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\nconst ORIGINAL_OPACITY = 1;\nconst ACTIVE_OPACITY = .65;\nconst DISABLED_OPACITY = .3;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animatedDuration = 150;\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n pressEffect = 'opacity',\n style,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const [opacity] = React.useState(() => new Animated.Value(ORIGINAL_OPACITY));\n const [scale] = React.useState(() => new Animated.Value(ORIGINAL_SCALE));\n\n const startAnimation = React.useCallback((pressIn: boolean, isHovered: boolean = false) => {\n if (pressEffect === 'none') {\n return;\n }\n\n if (pressEffect === 'opacity') {\n if (pressIn) {\n Animated.timing(opacity, {\n toValue: ACTIVE_OPACITY,\n duration: animatedDuration,\n useNativeDriver: true,\n }).start();\n } else {\n Animated.timing(opacity, {\n toValue: ORIGINAL_OPACITY,\n duration: 0,\n useNativeDriver: true,\n }).start();\n }\n } else if (!isHovered) {\n if (pressIn) {\n Animated.timing(scale, {\n toValue: MINIFIED_SCALE,\n duration: animatedDuration,\n delay: 100,\n useNativeDriver: true,\n }).start();\n } else {\n Animated.timing(scale, {\n toValue: ORIGINAL_SCALE,\n duration: 150,\n useNativeDriver: true,\n }).start();\n }\n }\n }, [pressEffect]);\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={() => startAnimation(true)}\n onPressOut={() => startAnimation(false)}\n style={[style,\n {\n opacity: disabled ? DISABLED_OPACITY : opacity,\n transform: [\n {\n scale: disabled ? ORIGINAL_SCALE : scale,\n },\n ],\n },\n ]}\n {...otherProps}\n >\n {children}\n </AnimatedPressable>\n );\n};\n"],"mappings":"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"}
@@ -1,12 +0,0 @@
1
- import { useAnimatedReaction } from 'react-native-reanimated';
2
- import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
3
- export default function useDisabledReaction(disabled, opacity) {
4
- useAnimatedReaction(() => disabled, result => {
5
- if (result) {
6
- opacity.value = DISABLED_OPACITY;
7
- } else {
8
- opacity.value = ORIGINAL_OPACITY;
9
- }
10
- }, [disabled]);
11
- }
12
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useAnimatedReaction","DISABLED_OPACITY","ORIGINAL_OPACITY","useDisabledReaction","disabled","opacity","result","value"],"sources":["index.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction } from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {\n useAnimatedReaction(\n () => disabled,\n (result) => {\n if (result) {\n opacity.value = DISABLED_OPACITY;\n } else {\n opacity.value = ORIGINAL_OPACITY;\n }\n },\n [disabled],\n );\n}\n"],"mappings":"AACA,SAASA,mBAAT,QAAoC,yBAApC;AACA,SAASC,gBAAT,EAA2BC,gBAA3B,QAAmD,eAAnD;AAEA,eAAe,SAASC,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAA8E;EACzFL,mBAAmB,CACf,MAAMI,QADS,EAEdE,MAAD,IAAY;IACR,IAAIA,MAAJ,EAAY;MACRD,OAAO,CAACE,KAAR,GAAgBN,gBAAhB;IACH,CAFD,MAEO;MACHI,OAAO,CAACE,KAAR,GAAgBL,gBAAhB;IACH;EACJ,CARc,EASf,CAACE,QAAD,CATe,CAAnB;AAWH"}
@@ -1,2 +0,0 @@
1
- export default function useDisabledReaction(disabled, opacity) {}
2
- //# sourceMappingURL=index.native.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useDisabledReaction","disabled","opacity"],"sources":["index.native.ts"],"sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n}"],"mappings":"AAEA,eAAe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF,CACrG"}
@@ -1,45 +0,0 @@
1
- import React from 'react';
2
- import { Animated } from 'react-native';
3
- import FastImage from 'react-native-fast-image';
4
- const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
5
- export default function ImageCore(props) {
6
- const {
7
- height,
8
- onError,
9
- onLoad,
10
- resizeMode,
11
- source,
12
- width
13
- } = props;
14
- const style = {
15
- width,
16
- height
17
- };
18
- const [opacity] = React.useState(() => new Animated.Value(0));
19
-
20
- const handleLoad = () => {
21
- Animated.timing(opacity, {
22
- toValue: 1,
23
- duration: 200,
24
- useNativeDriver: true
25
- }).start();
26
-
27
- if (onLoad) {
28
- onLoad();
29
- }
30
- };
31
-
32
- return /*#__PURE__*/React.createElement(AnimatedFastImage, {
33
- onError: onError,
34
- onLoad: handleLoad,
35
- resizeMode: resizeMode,
36
- source: {
37
- uri: source.uri
38
- },
39
- style: [style, {
40
- opacity
41
- }]
42
- });
43
- }
44
- ;
45
- //# sourceMappingURL=ImageCoreNative.ios.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","Animated","FastImage","AnimatedFastImage","createAnimatedComponent","ImageCore","props","height","onError","onLoad","resizeMode","source","width","style","opacity","useState","Value","handleLoad","timing","toValue","duration","useNativeDriver","start","uri"],"sources":["ImageCoreNative.ios.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated } from 'react-native';\nimport FastImage from 'react-native-fast-image';\nimport type ImageCoreProps from './ImageCoreProps';\n\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nexport default function ImageCore(props: ImageCoreProps) {\n const {\n height,\n onError,\n onLoad,\n resizeMode,\n source,\n width,\n } = props;\n\n const style = { width, height };\n\n const [opacity] = React.useState(() => new Animated.Value(0));\n\n const handleLoad = () => {\n Animated.timing(opacity, {\n toValue: 1,\n duration: 200,\n useNativeDriver: true,\n }).start();\n\n if (onLoad) {\n onLoad();\n }\n };\n\n return (\n <AnimatedFastImage\n onError={onError}\n onLoad={handleLoad}\n resizeMode={resizeMode}\n source={{ uri: source.uri }}\n style={[\n style,\n { opacity },\n ]}\n />\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,OAAOC,SAAP,MAAsB,yBAAtB;AAGA,MAAMC,iBAAiB,GAAGF,QAAQ,CAACG,uBAAT,CAAiCF,SAAjC,CAA1B;AAEA,eAAe,SAASG,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,MADE;IAEFC,OAFE;IAGFC,MAHE;IAIFC,UAJE;IAKFC,MALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAMO,KAAK,GAAG;IAAED,KAAF;IAASL;EAAT,CAAd;EAEA,MAAM,CAACO,OAAD,IAAYd,KAAK,CAACe,QAAN,CAAe,MAAM,IAAId,QAAQ,CAACe,KAAb,CAAmB,CAAnB,CAArB,CAAlB;;EAEA,MAAMC,UAAU,GAAG,MAAM;IACrBhB,QAAQ,CAACiB,MAAT,CAAgBJ,OAAhB,EAAyB;MACrBK,OAAO,EAAE,CADY;MAErBC,QAAQ,EAAE,GAFW;MAGrBC,eAAe,EAAE;IAHI,CAAzB,EAIGC,KAJH;;IAMA,IAAIb,MAAJ,EAAY;MACRA,MAAM;IACT;EACJ,CAVD;;EAYA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAES,UAFZ;IAGI,UAAU,EAAEP,UAHhB;IAII,MAAM,EAAE;MAAEa,GAAG,EAAEZ,MAAM,CAACY;IAAd,CAJZ;IAKI,KAAK,EAAE,CACHV,KADG,EAEH;MAAEC;IAAF,CAFG;EALX,EADJ;AAYH;AAAA"}
@@ -1,2 +0,0 @@
1
- import type ButtonBaseProps from './ButtonBaseProps';
2
- export default function ButtonBase(props: ButtonBaseProps): JSX.Element;
@@ -1,2 +0,0 @@
1
- import type { SharedValue } from 'react-native-reanimated';
2
- export default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>): void;
@@ -1,2 +0,0 @@
1
- import Animated from 'react-native-reanimated';
2
- export default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>): void;
@@ -1,2 +0,0 @@
1
- import type ImageCoreProps from './ImageCoreProps';
2
- export default function ImageCore(props: ImageCoreProps): JSX.Element;
@@ -1,95 +0,0 @@
1
- import React from 'react';
2
- import { Animated, Pressable } from 'react-native';
3
- import { useThrottle } from '../hooks';
4
- import type ButtonBaseProps from './ButtonBaseProps';
5
-
6
- const ORIGINAL_OPACITY = 1;
7
- const ACTIVE_OPACITY = .65;
8
- const DISABLED_OPACITY = .3;
9
-
10
- const ORIGINAL_SCALE = 1;
11
- const MINIFIED_SCALE = .96;
12
-
13
- const animatedDuration = 150;
14
-
15
- const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
16
-
17
- export default function ButtonBase(props: ButtonBaseProps) {
18
- const {
19
- children,
20
- disabled = false,
21
- disableThrottle = false,
22
- onPress,
23
- pressEffect = 'opacity',
24
- style,
25
- throttleMillis = 650,
26
- ...otherProps
27
- } = props;
28
-
29
- const handlePress = useThrottle({
30
- periodMillis: disableThrottle ? 0 : throttleMillis,
31
- callback: onPress,
32
- });
33
-
34
- const [opacity] = React.useState(() => new Animated.Value(ORIGINAL_OPACITY));
35
- const [scale] = React.useState(() => new Animated.Value(ORIGINAL_SCALE));
36
-
37
- const startAnimation = React.useCallback((pressIn: boolean, isHovered: boolean = false) => {
38
- if (pressEffect === 'none') {
39
- return;
40
- }
41
-
42
- if (pressEffect === 'opacity') {
43
- if (pressIn) {
44
- Animated.timing(opacity, {
45
- toValue: ACTIVE_OPACITY,
46
- duration: animatedDuration,
47
- useNativeDriver: true,
48
- }).start();
49
- } else {
50
- Animated.timing(opacity, {
51
- toValue: ORIGINAL_OPACITY,
52
- duration: 0,
53
- useNativeDriver: true,
54
- }).start();
55
- }
56
- } else if (!isHovered) {
57
- if (pressIn) {
58
- Animated.timing(scale, {
59
- toValue: MINIFIED_SCALE,
60
- duration: animatedDuration,
61
- delay: 100,
62
- useNativeDriver: true,
63
- }).start();
64
- } else {
65
- Animated.timing(scale, {
66
- toValue: ORIGINAL_SCALE,
67
- duration: 150,
68
- useNativeDriver: true,
69
- }).start();
70
- }
71
- }
72
- }, [pressEffect]);
73
-
74
- return (
75
- <AnimatedPressable
76
- disabled={disabled}
77
- onPress={handlePress}
78
- onPressIn={() => startAnimation(true)}
79
- onPressOut={() => startAnimation(false)}
80
- style={[style,
81
- {
82
- opacity: disabled ? DISABLED_OPACITY : opacity,
83
- transform: [
84
- {
85
- scale: disabled ? ORIGINAL_SCALE : scale,
86
- },
87
- ],
88
- },
89
- ]}
90
- {...otherProps}
91
- >
92
- {children}
93
- </AnimatedPressable>
94
- );
95
- };
@@ -1,4 +0,0 @@
1
- import Animated from 'react-native-reanimated';
2
-
3
- export default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {
4
- }
@@ -1,17 +0,0 @@
1
- import type { SharedValue } from 'react-native-reanimated';
2
- import { useAnimatedReaction } from 'react-native-reanimated';
3
- import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
4
-
5
- export default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {
6
- useAnimatedReaction(
7
- () => disabled,
8
- (result) => {
9
- if (result) {
10
- opacity.value = DISABLED_OPACITY;
11
- } else {
12
- opacity.value = ORIGINAL_OPACITY;
13
- }
14
- },
15
- [disabled],
16
- );
17
- }
@@ -1,46 +0,0 @@
1
- import React from 'react';
2
- import { Animated } from 'react-native';
3
- import FastImage from 'react-native-fast-image';
4
- import type ImageCoreProps from './ImageCoreProps';
5
-
6
- const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
7
-
8
- export default function ImageCore(props: ImageCoreProps) {
9
- const {
10
- height,
11
- onError,
12
- onLoad,
13
- resizeMode,
14
- source,
15
- width,
16
- } = props;
17
-
18
- const style = { width, height };
19
-
20
- const [opacity] = React.useState(() => new Animated.Value(0));
21
-
22
- const handleLoad = () => {
23
- Animated.timing(opacity, {
24
- toValue: 1,
25
- duration: 200,
26
- useNativeDriver: true,
27
- }).start();
28
-
29
- if (onLoad) {
30
- onLoad();
31
- }
32
- };
33
-
34
- return (
35
- <AnimatedFastImage
36
- onError={onError}
37
- onLoad={handleLoad}
38
- resizeMode={resizeMode}
39
- source={{ uri: source.uri }}
40
- style={[
41
- style,
42
- { opacity },
43
- ]}
44
- />
45
- );
46
- };