related-ui-components 2.0.6 → 2.0.8

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/module/components/Card/Card.js +83 -68
  2. package/lib/module/components/Card/Card.js.map +1 -1
  3. package/lib/module/components/Card/templates/SelaDealCard.js +80 -35
  4. package/lib/module/components/Card/templates/SelaDealCard.js.map +1 -1
  5. package/lib/typescript/src/components/Card/Card.d.ts +5 -1
  6. package/lib/typescript/src/components/Card/Card.d.ts.map +1 -1
  7. package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/Card/Card.tsx +83 -86
  10. package/src/components/Card/templates/SelaDealCard.tsx +226 -162
package/lib/module/components/Card/Card.js CHANGED
@@ -1,111 +1,126 @@
1
1
  "use strict";
2
2
 
3
+ // src/components/Card/Card.tsx
3
4
  import React from "react";
4
- import { View, TouchableOpacity, StyleSheet, ImageBackground } from "react-native";
5
+ import { View, TouchableOpacity, StyleSheet, ImageBackground
6
+ // Import LayoutChangeEvent
7
+ } from "react-native";
8
+ // Assuming types.ts defines CardProps
5
9
  import { useTheme } from "../../theme/ThemeContext.js";
6
10
  import { LinearGradient } from "expo-linear-gradient";
7
- import { jsx as _jsx } from "react/jsx-runtime";
11
+
12
+ // Extend CardProps to include onLayout
13
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
14
  const Card = ({
9
15
  children,
10
16
  style,
11
17
  onPress,
18
+ onLayout,
19
+ // Destructure onLayout
12
20
  disabled = false,
13
- elevation = 1,
21
+ // elevation, // Not used in your current styles
14
22
  testID,
15
- variant,
23
+ // variant, // Not used
16
24
  backgroundColor,
17
- borderColor,
25
+ // borderColor, // Not used
18
26
  borderRadius = 8,
19
27
  backgroundImage,
20
28
  gradient
21
- // margin,
22
- // padding,
23
29
  }) => {
24
30
  const {
25
31
  theme
26
32
  } = useTheme();
27
- const getCardStyle = () => {
28
- const baseStyle = {
29
- backgroundColor: backgroundColor || theme.background,
30
- borderRadius
31
- };
32
- return baseStyle;
33
- };
34
- const cardStyle = [styles.card, getCardStyle(), disabled && {
35
- opacity: 0.6
36
- }, style, backgroundImage && {
37
- backgroundColor: "transparent"
38
- }];
33
+ const cardRootStyle = [styles.card, {
34
+ borderRadius
35
+ },
36
+ // If there's a background image, card background should be transparent
37
+ // so the image is visible. Otherwise, use provided backgroundColor or theme.
38
+ {
39
+ backgroundColor: backgroundImage ? "transparent" : backgroundColor || theme.background
40
+ }, disabled && styles.disabled, style // This will include the width and calculated height from SelaDealCard
41
+ ];
39
42
  const renderCardContent = () => {
40
- if (backgroundImage) {
41
- return /*#__PURE__*/_jsx(ImageBackground, {
43
+ // The children (SelaDealCard's overlayContainer) are rendered on top of
44
+ // the ImageBackground or Gradient.
45
+ return children;
46
+ };
47
+ if (onPress) {
48
+ return /*#__PURE__*/_jsxs(TouchableOpacity, {
49
+ style: cardRootStyle,
50
+ onPress: onPress,
51
+ onLayout: onLayout // Apply onLayout here
52
+ ,
53
+ disabled: disabled,
54
+ testID: testID,
55
+ activeOpacity: 0.9,
56
+ accessibilityRole: "button",
57
+ children: [backgroundImage && /*#__PURE__*/_jsx(ImageBackground, {
42
58
  source: backgroundImage.source,
43
- style: [styles.backgroundImage, backgroundImage.style],
59
+ style: [StyleSheet.absoluteFillObject, backgroundImage.style] // Fills parent
60
+ ,
44
61
  imageStyle: [{
45
62
  borderRadius
46
63
  }, backgroundImage.imageStyle],
47
64
  resizeMode: backgroundImage.resizeMode || "cover",
48
- blurRadius: backgroundImage.blurRadius,
49
- children: /*#__PURE__*/_jsx(View, {
50
- style: [styles.imageContentContainer, {
51
- opacity: backgroundImage.opacity !== undefined ? backgroundImage.opacity : 1
52
- }],
53
- children: children
54
- })
55
- });
56
- } else if (gradient) {
57
- return /*#__PURE__*/_jsx(LinearGradient, {
65
+ blurRadius: backgroundImage.blurRadius
66
+ }), gradient && !backgroundImage &&
67
+ /*#__PURE__*/
68
+ // Render gradient if no image and gradient exists
69
+ _jsx(LinearGradient, {
58
70
  colors: gradient.colors,
59
71
  start: gradient.start,
60
72
  end: gradient.end,
61
- style: [styles.gradient, {
73
+ style: [StyleSheet.absoluteFillObject,
74
+ // Gradient also fills
75
+ {
62
76
  borderRadius
63
- }, gradient.style],
64
- children: children
65
- });
66
- } else {
67
- return children;
68
- }
69
- };
70
- if (onPress) {
71
- return /*#__PURE__*/_jsx(TouchableOpacity, {
72
- style: cardStyle,
73
- onPress: onPress,
74
- disabled: disabled,
75
- testID: testID,
76
- activeOpacity: 0.9,
77
- accessibilityRole: "button",
78
- accessibilityLabel: "Card",
79
- children: renderCardContent()
77
+ }, gradient.style]
78
+ }), /*#__PURE__*/_jsx(View, {
79
+ style: styles.contentWrapper,
80
+ children: renderCardContent()
81
+ })]
80
82
  });
81
83
  }
82
- return /*#__PURE__*/_jsx(View, {
83
- style: cardStyle,
84
+ return /*#__PURE__*/_jsxs(View, {
85
+ style: cardRootStyle,
84
86
  testID: testID,
85
- children: renderCardContent()
87
+ onLayout: onLayout,
88
+ children: [backgroundImage && /*#__PURE__*/_jsx(ImageBackground, {
89
+ source: backgroundImage.source,
90
+ style: [StyleSheet.absoluteFillObject, backgroundImage.style],
91
+ imageStyle: [{
92
+ borderRadius
93
+ }, backgroundImage.imageStyle],
94
+ resizeMode: backgroundImage.resizeMode || "cover",
95
+ blurRadius: backgroundImage.blurRadius
96
+ }), gradient && !backgroundImage && /*#__PURE__*/_jsx(LinearGradient, {
97
+ colors: gradient.colors,
98
+ start: gradient.start,
99
+ end: gradient.end,
100
+ style: [StyleSheet.absoluteFillObject, {
101
+ borderRadius
102
+ }, gradient.style]
103
+ }), /*#__PURE__*/_jsx(View, {
104
+ style: styles.contentWrapper,
105
+ children: renderCardContent()
106
+ })]
86
107
  });
87
108
  };
88
109
  const styles = StyleSheet.create({
89
110
  card: {
90
- borderRadius: 8,
91
- flexDirection: "column",
92
- display: "flex"
93
- },
94
- backgroundImage: {
95
- width: "100%",
96
- height: "100%"
111
+ overflow: "hidden",
112
+ // Important for absoluteFillObject with borderRadius
113
+ position: "relative" // For absolute positioning context
97
114
  },
98
- imageContentContainer: {
99
- flex: 1,
100
- backgroundColor: "transparent"
115
+ disabled: {
116
+ opacity: 0.6
101
117
  },
102
- gradient: {
118
+ contentWrapper: {
119
+ // Ensures content is layered above background/gradient
103
120
  flex: 1,
104
- width: "100%",
105
- height: "100%",
106
- justifyContent: "flex-start",
107
- alignItems: "flex-start"
121
+ backgroundColor: "transparent" // Content wrapper itself is transparent
108
122
  }
123
+ // No specific styles for backgroundImage or gradient here as they use absoluteFillObject
109
124
  });
110
125
  export default Card;
111
126
  //# sourceMappingURL=Card.js.map
package/lib/module/components/Card/Card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","Card","children","style","onPress","disabled","elevation","testID","variant","backgroundColor","borderColor","borderRadius","backgroundImage","gradient","theme","getCardStyle","baseStyle","background","cardStyle","styles","card","opacity","renderCardContent","source","imageStyle","resizeMode","blurRadius","imageContentContainer","undefined","colors","start","end","activeOpacity","accessibilityRole","accessibilityLabel","create","flexDirection","display","width","height","flex","justifyContent","alignItems"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","jsxs","_jsxs","Card","children","style","onPress","onLayout","disabled","testID","backgroundColor","borderRadius","backgroundImage","gradient","theme","cardRootStyle","styles","card","background","renderCardContent","activeOpacity","accessibilityRole","source","absoluteFillObject","imageStyle","resizeMode","blurRadius","colors","start","end","contentWrapper","create","overflow","position","opacity","flex"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}
package/lib/module/components/Card/templates/SelaDealCard.js CHANGED
@@ -1,43 +1,79 @@
1
1
  "use strict";
2
2
 
3
3
  // src/components/SelaDealCard/SelaDealCard.tsx
4
- import React from "react";
5
- import { View, Text, StyleSheet } from "react-native";
6
- import Card from "../Card.js"; // Adjust path to your Card component
7
- import { useTheme } from "../../../theme/ThemeContext.js"; // Adjust path
8
-
4
+ import React, { useState, useEffect } from "react"; // Import useState and useEffect
5
+ import { View, Text, StyleSheet, Image // Import Image
6
+ // Import LayoutChangeEvent
7
+ } from "react-native";
8
+ import Card from "../Card.js";
9
+ import { useTheme } from "../../../theme/ThemeContext.js";
9
10
  import { LockOverlay } from "../../LockOverlay/index.js";
10
11
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
- const SelaDealCard = ({
12
- variant,
13
- backgroundImage,
14
- label,
15
- labelStyle,
16
- labelContainerStyle,
17
- providerName,
18
- providerNameStyle,
19
- description,
20
- descriptionStyle,
21
- price,
22
- priceStyle,
23
- priceContainerStyle,
24
- onPress,
25
- style,
26
- width = "100%",
27
- height,
28
- isRTL: propIsRTL,
29
- borderRadius = 12,
30
- // Default based on images
31
- darkOverlayEnabled = true,
32
- darkOverlayColor = "rgba(0, 0, 0, 0.3)",
33
- lockOverlay = false
34
- }) => {
12
+ const SelaDealCard = props => {
13
+ const {
14
+ variant,
15
+ backgroundImage,
16
+ label,
17
+ labelStyle,
18
+ labelContainerStyle,
19
+ providerName,
20
+ providerNameStyle,
21
+ description,
22
+ descriptionStyle,
23
+ price,
24
+ priceStyle,
25
+ priceContainerStyle,
26
+ onPress,
27
+ style,
28
+ width = "100%",
29
+ // Default width, actual pixel width comes from layout
30
+ // props.height is the explicit height override
31
+ isRTL: propIsRTL,
32
+ borderRadius = 12,
33
+ darkOverlayEnabled = true,
34
+ darkOverlayColor = "rgba(0, 0, 0, 0.3)",
35
+ lockOverlay = false
36
+ } = props;
35
37
  const {
36
38
  theme,
37
39
  isRTL: themeIsRTL
38
40
  } = useTheme();
39
41
  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
42
+ const [actualCardWidth, setActualCardWidth] = useState(undefined);
43
+ const [dynamicHeight, setDynamicHeight] = useState(undefined);
44
+ useEffect(() => {
45
+ // Calculate dynamic height if no explicit height is provided via props,
46
+ // and we have the actual card width and a valid background image.
47
+ if (props.height === undefined && actualCardWidth && actualCardWidth > 0 && backgroundImage) {
48
+ const asset = Image.resolveAssetSource(backgroundImage);
49
+ if (asset && asset.width > 0 && asset.height > 0) {
50
+ const aspectRatio = asset.height / asset.width;
51
+ setDynamicHeight(actualCardWidth * aspectRatio);
52
+ } else {
53
+ // Fallback if image source is invalid or dimensions are zero
54
+ // (e.g., if it was a network URL and resolveAssetSource didn't work)
55
+ // You might want a default height or aspect ratio here.
56
+ setDynamicHeight(200); // Example fallback height
57
+ }
58
+ } else if (props.height !== undefined) {
59
+ // If an explicit height is provided, ensure dynamicHeight is not used.
60
+ setDynamicHeight(undefined);
61
+ }
62
+ }, [actualCardWidth, backgroundImage, props.height]);
63
+ const handleLayout = event => {
64
+ const newWidth = event.nativeEvent.layout.width;
65
+ if (newWidth > 0 && newWidth !== actualCardWidth) {
66
+ setActualCardWidth(newWidth);
67
+ }
68
+ };
69
+
70
+ // Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
71
+ // Provide a minimum height for initial render or if dynamicHeight is still undefined.
72
+ const finalHeight = props.height !== undefined ? props.height : dynamicHeight !== undefined ? dynamicHeight : 150; // Minimum height before calculation or as fallback
73
+
40
74
  const styles = getStyles(theme, isRTL);
75
+
76
+ // ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
41
77
  const finalLabelContainerStyle = [styles.labelContainerBase, labelContainerStyle];
42
78
  const finalLabelStyle = [styles.labelTextBase, labelStyle];
43
79
  const finalPriceContainerStyle = [styles.priceContainerBase, variant === "horizontal" ? styles.priceContainerHorizontal : styles.priceContainerVertical, priceContainerStyle];
@@ -51,22 +87,27 @@ const SelaDealCard = ({
51
87
  textAlign: isRTL ? "right" : "left"
52
88
  }, descriptionStyle];
53
89
  return /*#__PURE__*/_jsxs(Card, {
54
- onPress: onPress,
90
+ onPress: onPress
91
+ // onLayout={handleLayout} // Pass onLayout to Card to get its width
92
+ ,
55
93
  style: [styles.cardBase, {
56
94
  borderRadius,
57
95
  width,
58
- height
59
- }, style],
96
+ height: finalHeight
97
+ },
98
+ // Use the calculated finalHeight
99
+ style],
60
100
  backgroundImage: {
61
101
  source: backgroundImage,
62
- resizeMode: "cover"
102
+ resizeMode: "cover" // 'cover' will fill dimensions, 'contain' would show whole image
63
103
  },
64
104
  children: [darkOverlayEnabled && /*#__PURE__*/_jsx(View, {
65
105
  style: [StyleSheet.absoluteFill, {
66
106
  backgroundColor: darkOverlayColor
67
107
  }, {
68
108
  borderRadius: borderRadius
69
- }]
109
+ } // Ensure overlay respects border radius
110
+ ]
70
111
  }), /*#__PURE__*/_jsx(LockOverlay, {
71
112
  visible: lockOverlay,
72
113
  contentPosition: variant == "horizontal" ? isRTL ? "top-left" : "top-right" : isRTL ? "top-right" : "top-left",
@@ -126,12 +167,15 @@ const SelaDealCard = ({
126
167
  })]
127
168
  });
128
169
  };
170
+
171
+ // getStyles function remains the same
129
172
  const getStyles = (theme, isRTL) => StyleSheet.create({
130
173
  cardBase: {
131
174
  overflow: "hidden",
132
175
  position: "relative"
133
176
  },
134
177
  overlayContainer: {
178
+ // This will now fill the calculated height of the card
135
179
  flex: 1,
136
180
  padding: 16,
137
181
  justifyContent: "space-between"
@@ -174,7 +218,8 @@ const getStyles = (theme, isRTL) => StyleSheet.create({
174
218
  },
175
219
  textBlockHorizontal: {
176
220
  flex: 1,
177
- marginRight: 10
221
+ marginRight: isRTL ? 0 : 10,
222
+ marginLeft: isRTL ? 10 : 0
178
223
  },
179
224
  priceContainerHorizontal: {},
180
225
  bottomContentVertical: {
package/lib/module/components/Card/templates/SelaDealCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","View","Text","StyleSheet","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","styles","getStyles","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useState","useEffect","View","Text","StyleSheet","Image","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","props","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","actualCardWidth","setActualCardWidth","dynamicHeight","setDynamicHeight","height","asset","resolveAssetSource","aspectRatio","handleLayout","event","newWidth","nativeEvent","layout","finalHeight","styles","getStyles","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","marginLeft","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
package/lib/typescript/src/components/Card/Card.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  import React from "react";
2
- import { CardProps } from "./types";
2
+ import { LayoutChangeEvent } from "react-native";
3
+ import { CardProps as OriginalCardProps } from "./types";
4
+ interface CardProps extends OriginalCardProps {
5
+ onLayout?: (event: LayoutChangeEvent) => void;
6
+ }
3
7
  declare const Card: React.FC<CardProps>;
4
8
  export default Card;
5
9
  //# sourceMappingURL=Card.d.ts.map
package/lib/typescript/src/components/Card/Card.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqG7B,CAAC;AAyBF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,iBAAiB,EAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKzD,UAAU,SAAU,SAAQ,iBAAiB;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoG7B,CAAC;AAiBF,eAAe,IAAI,CAAC"}
package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAEjB,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACvB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsJ7C,CAAC;AAmEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAIf,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkN7C,CAAC;AAqEF,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "2.0.6",
3
+ "version": "2.0.8",
4
4
  "main": "./src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/components/Card/Card.tsx CHANGED
@@ -1,139 +1,136 @@
1
+ // src/components/Card/Card.tsx
1
2
  import React from "react";
2
3
  import {
3
4
  View,
4
5
  TouchableOpacity,
5
6
  StyleSheet,
6
- Platform,
7
7
  ImageBackground,
8
+ LayoutChangeEvent, // Import LayoutChangeEvent
8
9
  } from "react-native";
9
- import { CardProps } from "./types";
10
+ import { CardProps as OriginalCardProps } from "./types"; // Assuming types.ts defines CardProps
10
11
  import { useTheme } from "../../theme/ThemeContext";
11
12
  import { LinearGradient } from "expo-linear-gradient";
12
13
 
14
+ // Extend CardProps to include onLayout
15
+ interface CardProps extends OriginalCardProps {
16
+ onLayout?: (event: LayoutChangeEvent) => void;
17
+ }
18
+
13
19
  const Card: React.FC<CardProps> = ({
14
20
  children,
15
21
  style,
16
22
  onPress,
23
+ onLayout, // Destructure onLayout
17
24
  disabled = false,
18
- elevation = 1,
25
+ // elevation, // Not used in your current styles
19
26
  testID,
20
- variant,
27
+ // variant, // Not used
21
28
  backgroundColor,
22
- borderColor,
29
+ // borderColor, // Not used
23
30
  borderRadius = 8,
24
31
  backgroundImage,
25
- gradient
26
- // margin,
27
- // padding,
32
+ gradient,
28
33
  }) => {
29
- const {theme} = useTheme();
30
-
31
- const getCardStyle = () => {
32
- const baseStyle: any = {
33
- backgroundColor: backgroundColor || theme.background,
34
- borderRadius,
35
- };
34
+ const { theme } = useTheme();
36
35
 
37
- return baseStyle;
38
- };
39
-
40
- const cardStyle = [
36
+ const cardRootStyle = [
41
37
  styles.card,
42
- getCardStyle(),
43
- disabled && { opacity: 0.6 },
44
- style,
45
- backgroundImage && { backgroundColor: "transparent" },
38
+ { borderRadius },
39
+ // If there's a background image, card background should be transparent
40
+ // so the image is visible. Otherwise, use provided backgroundColor or theme.
41
+ {
42
+ backgroundColor: backgroundImage
43
+ ? "transparent"
44
+ : backgroundColor || theme.background,
45
+ },
46
+ disabled && styles.disabled,
47
+ style, // This will include the width and calculated height from SelaDealCard
46
48
  ];
47
49
 
48
50
  const renderCardContent = () => {
49
- if (backgroundImage) {
50
- return (
51
- <ImageBackground
52
- source={backgroundImage.source}
53
- style={[styles.backgroundImage, backgroundImage.style]}
54
- imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
55
- resizeMode={backgroundImage.resizeMode || "cover"}
56
- blurRadius={backgroundImage.blurRadius}
57
- >
58
- <View
59
- style={[
60
- styles.imageContentContainer,
61
- {
62
- opacity:
63
- backgroundImage.opacity !== undefined
64
- ? backgroundImage.opacity
65
- : 1,
66
- },
67
- ]}
68
- >
69
- {children}
70
- </View>
71
- </ImageBackground>
72
- );
73
- } else if (gradient) {
74
- return (
75
- <LinearGradient
76
- colors={gradient.colors as any}
77
- start={gradient.start}
78
- end={gradient.end}
79
- style={[
80
- styles.gradient,
81
- { borderRadius },
82
- gradient.style,
83
- ]}
84
- >
85
- {children}
86
- </LinearGradient>
87
- );
88
- } else {
89
- return children;
90
- }
51
+ // The children (SelaDealCard's overlayContainer) are rendered on top of
52
+ // the ImageBackground or Gradient.
53
+ return children;
91
54
  };
92
55
 
93
56
  if (onPress) {
94
57
  return (
95
58
  <TouchableOpacity
96
- style={cardStyle}
59
+ style={cardRootStyle}
97
60
  onPress={onPress}
61
+ onLayout={onLayout} // Apply onLayout here
98
62
  disabled={disabled}
99
63
  testID={testID}
100
64
  activeOpacity={0.9}
101
65
  accessibilityRole="button"
102
- accessibilityLabel={"Card"}
103
66
  >
104
- {renderCardContent()}
67
+ {backgroundImage && (
68
+ <ImageBackground
69
+ source={backgroundImage.source}
70
+ style={[StyleSheet.absoluteFillObject, backgroundImage.style]} // Fills parent
71
+ imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
72
+ resizeMode={backgroundImage.resizeMode || "cover"}
73
+ blurRadius={backgroundImage.blurRadius}
74
+ />
75
+ )}
76
+ {gradient && !backgroundImage && ( // Render gradient if no image and gradient exists
77
+ <LinearGradient
78
+ colors={gradient.colors as any}
79
+ start={gradient.start}
80
+ end={gradient.end}
81
+ style={[
82
+ StyleSheet.absoluteFillObject, // Gradient also fills
83
+ { borderRadius },
84
+ gradient.style,
85
+ ]}
86
+ />
87
+ )}
88
+ <View style={styles.contentWrapper}>{renderCardContent()}</View>
105
89
  </TouchableOpacity>
106
90
  );
107
91
  }
108
92
 
109
93
  return (
110
- <View style={cardStyle} testID={testID}>
111
- {renderCardContent()}
94
+ <View style={cardRootStyle} testID={testID} onLayout={onLayout}>
95
+ {backgroundImage && (
96
+ <ImageBackground
97
+ source={backgroundImage.source}
98
+ style={[StyleSheet.absoluteFillObject, backgroundImage.style]}
99
+ imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
100
+ resizeMode={backgroundImage.resizeMode || "cover"}
101
+ blurRadius={backgroundImage.blurRadius}
102
+ />
103
+ )}
104
+ {gradient && !backgroundImage && (
105
+ <LinearGradient
106
+ colors={gradient.colors as any}
107
+ start={gradient.start}
108
+ end={gradient.end}
109
+ style={[
110
+ StyleSheet.absoluteFillObject,
111
+ { borderRadius },
112
+ gradient.style,
113
+ ]}
114
+ />
115
+ )}
116
+ <View style={styles.contentWrapper}>{renderCardContent()}</View>
112
117
  </View>
113
118
  );
114
119
  };
115
120
 
116
121
  const styles = StyleSheet.create({
117
122
  card: {
118
- borderRadius: 8,
119
- flexDirection: "column",
120
- display: "flex",
123
+ overflow: "hidden", // Important for absoluteFillObject with borderRadius
124
+ position: "relative", // For absolute positioning context
121
125
  },
122
- backgroundImage: {
123
- width: "100%",
124
- height: "100%",
125
- },
126
- imageContentContainer: {
127
- flex: 1,
128
- backgroundColor: "transparent",
126
+ disabled: {
127
+ opacity: 0.6,
129
128
  },
130
- gradient: {
129
+ contentWrapper: { // Ensures content is layered above background/gradient
131
130
  flex: 1,
132
- width: "100%",
133
- height: "100%",
134
- justifyContent: "flex-start",
135
- alignItems: "flex-start",
131
+ backgroundColor: "transparent", // Content wrapper itself is transparent
136
132
  },
133
+ // No specific styles for backgroundImage or gradient here as they use absoluteFillObject
137
134
  });
138
135
 
139
- export default Card;
136
+ export default Card;
package/src/components/Card/templates/SelaDealCard.tsx CHANGED
@@ -1,50 +1,53 @@
1
1
  // src/components/SelaDealCard/SelaDealCard.tsx
2
- import React from "react";
2
+ import React, { useState, useEffect } from "react"; // Import useState and useEffect
3
3
  import {
4
- ImageSourcePropType,
5
- StyleProp,
6
- ViewStyle,
7
- View,
8
- Text,
9
- TextStyle,
10
- DimensionValue,
11
- StyleSheet,
4
+ ImageSourcePropType,
5
+ StyleProp,
6
+ ViewStyle,
7
+ View,
8
+ Text,
9
+ TextStyle,
10
+ DimensionValue,
11
+ StyleSheet,
12
+ Image, // Import Image
13
+ LayoutChangeEvent, // Import LayoutChangeEvent
12
14
  } from "react-native";
13
- import Card from "../Card"; // Adjust path to your Card component
14
- import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
15
+ import Card from "../Card";
16
+ import { useTheme } from "../../../theme/ThemeContext";
15
17
  import { ThemeType } from "../../../theme";
16
18
  import { LockOverlay } from "../../LockOverlay";
17
19
 
18
20
  interface SelaDealCardProps {
19
- variant: "horizontal" | "vertical";
20
- backgroundImage: ImageSourcePropType;
21
- label?: string;
22
- labelStyle?: StyleProp<TextStyle>;
23
- labelContainerStyle?: StyleProp<ViewStyle>;
24
- providerName?: string;
25
- providerNameStyle?: StyleProp<TextStyle>;
26
- description?: string;
27
- descriptionStyle?: StyleProp<TextStyle>;
28
- price?: string;
29
- priceStyle?: StyleProp<TextStyle>;
30
- priceContainerStyle?: StyleProp<ViewStyle>;
31
- onPress?: () => void;
32
- style?: StyleProp<ViewStyle>; // Overall card style
33
- width?: DimensionValue;
34
- height?: DimensionValue;
35
- isRTL?: boolean;
36
- borderRadius?: number;
37
- contentColor?: string; // For text like providerName, description on the image
38
- labelBackgroundColor?: string;
39
- labelTextColor?: string;
40
- priceBackgroundColor?: string;
41
- priceTextColor?: string;
42
- darkOverlayEnabled?: boolean; // New prop
43
- darkOverlayColor?: string; // New prop for custom overlay color
44
- lockOverlay?: boolean
21
+ variant: "horizontal" | "vertical";
22
+ backgroundImage: ImageSourcePropType; // Each card instance can have a different image
23
+ label?: string;
24
+ labelStyle?: StyleProp<TextStyle>;
25
+ labelContainerStyle?: StyleProp<ViewStyle>;
26
+ providerName?: string;
27
+ providerNameStyle?: StyleProp<TextStyle>;
28
+ description?: string;
29
+ descriptionStyle?: StyleProp<TextStyle>;
30
+ price?: string;
31
+ priceStyle?: StyleProp<TextStyle>;
32
+ priceContainerStyle?: StyleProp<ViewStyle>;
33
+ onPress?: () => void;
34
+ style?: StyleProp<ViewStyle>;
35
+ width?: DimensionValue;
36
+ height?: DimensionValue; // Explicit height can override dynamic calculation
37
+ isRTL?: boolean;
38
+ borderRadius?: number;
39
+ contentColor?: string;
40
+ labelBackgroundColor?: string;
41
+ labelTextColor?: string;
42
+ priceBackgroundColor?: string;
43
+ priceTextColor?: string;
44
+ darkOverlayEnabled?: boolean;
45
+ darkOverlayColor?: string;
46
+ lockOverlay?: boolean;
45
47
  }
46
48
 
47
- const SelaDealCard: React.FC<SelaDealCardProps> = ({
49
+ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
50
+ const {
48
51
  variant,
49
52
  backgroundImage,
50
53
  label,
@@ -59,149 +62,209 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
59
62
  priceContainerStyle,
60
63
  onPress,
61
64
  style,
62
- width = "100%",
63
- height,
65
+ width = "100%", // Default width, actual pixel width comes from layout
66
+ // props.height is the explicit height override
64
67
  isRTL: propIsRTL,
65
- borderRadius = 12, // Default based on images
68
+ borderRadius = 12,
66
69
  darkOverlayEnabled = true,
67
70
  darkOverlayColor = "rgba(0, 0, 0, 0.3)",
68
- lockOverlay = false
69
- }) => {
70
- const { theme, isRTL: themeIsRTL } = useTheme();
71
- const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
71
+ lockOverlay = false,
72
+ } = props;
72
73
 
73
- const styles = getStyles(theme, isRTL);
74
+ const { theme, isRTL: themeIsRTL } = useTheme();
75
+ const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
74
76
 
75
- const finalLabelContainerStyle: StyleProp<ViewStyle> = [
76
- styles.labelContainerBase,
77
- labelContainerStyle,
78
- ];
79
- const finalLabelStyle: StyleProp<TextStyle> = [
80
- styles.labelTextBase,
81
- labelStyle,
82
- ];
77
+ const [actualCardWidth, setActualCardWidth] = useState<number | undefined>(
78
+ undefined,
79
+ );
80
+ const [dynamicHeight, setDynamicHeight] = useState<
81
+ DimensionValue | undefined
82
+ >(undefined);
83
83
 
84
- const finalPriceContainerStyle: StyleProp<ViewStyle> = [
85
- styles.priceContainerBase,
86
- variant === "horizontal"
87
- ? styles.priceContainerHorizontal
88
- : styles.priceContainerVertical,
89
- priceContainerStyle,
90
- ];
91
- const finalPriceStyle: StyleProp<TextStyle> = [
92
- styles.priceTextBase,
93
- priceStyle,
94
- ];
84
+ useEffect(() => {
85
+ // Calculate dynamic height if no explicit height is provided via props,
86
+ // and we have the actual card width and a valid background image.
87
+ if (
88
+ props.height === undefined &&
89
+ actualCardWidth &&
90
+ actualCardWidth > 0 &&
91
+ backgroundImage
92
+ ) {
93
+ const asset = Image.resolveAssetSource(backgroundImage);
94
+ if (asset && asset.width > 0 && asset.height > 0) {
95
+ const aspectRatio = asset.height / asset.width;
96
+ setDynamicHeight(actualCardWidth * aspectRatio);
97
+ } else {
98
+ // Fallback if image source is invalid or dimensions are zero
99
+ // (e.g., if it was a network URL and resolveAssetSource didn't work)
100
+ // You might want a default height or aspect ratio here.
101
+ setDynamicHeight(200); // Example fallback height
102
+ }
103
+ } else if (props.height !== undefined) {
104
+ // If an explicit height is provided, ensure dynamicHeight is not used.
105
+ setDynamicHeight(undefined);
106
+ }
107
+ }, [actualCardWidth, backgroundImage, props.height]);
95
108
 
96
- const providerTextStyle: StyleProp<TextStyle> = [
97
- styles.providerNameBase,
98
- { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
99
- providerNameStyle,
100
- ];
109
+ const handleLayout = (event: LayoutChangeEvent) => {
110
+ const newWidth = event.nativeEvent.layout.width;
111
+ if (newWidth > 0 && newWidth !== actualCardWidth) {
112
+ setActualCardWidth(newWidth);
113
+ }
114
+ };
101
115
 
102
- const descriptionTextStyle: StyleProp<TextStyle> = [
103
- styles.descriptionBase,
104
- { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
105
- descriptionStyle,
106
- ];
116
+ // Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
117
+ // Provide a minimum height for initial render or if dynamicHeight is still undefined.
118
+ const finalHeight =
119
+ props.height !== undefined
120
+ ? props.height
121
+ : dynamicHeight !== undefined
122
+ ? dynamicHeight
123
+ : 150; // Minimum height before calculation or as fallback
107
124
 
108
- return (
109
- <Card
110
- onPress={onPress}
111
- style={[styles.cardBase, { borderRadius, width, height }, style]}
112
- backgroundImage={{
113
- source: backgroundImage,
114
- resizeMode: "cover",
115
- }}
116
- >
117
- {darkOverlayEnabled && (
118
- <View
119
- style={[
120
- StyleSheet.absoluteFill,
121
- { backgroundColor: darkOverlayColor },
122
- { borderRadius: borderRadius }
123
- ]}
124
- />
125
- )}
125
+ const styles = getStyles(theme, isRTL);
126
+
127
+ // ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
128
+ const finalLabelContainerStyle: StyleProp<ViewStyle> = [
129
+ styles.labelContainerBase,
130
+ labelContainerStyle,
131
+ ];
132
+ const finalLabelStyle: StyleProp<TextStyle> = [
133
+ styles.labelTextBase,
134
+ labelStyle,
135
+ ];
136
+
137
+ const finalPriceContainerStyle: StyleProp<ViewStyle> = [
138
+ styles.priceContainerBase,
139
+ variant === "horizontal"
140
+ ? styles.priceContainerHorizontal
141
+ : styles.priceContainerVertical,
142
+ priceContainerStyle,
143
+ ];
144
+ const finalPriceStyle: StyleProp<TextStyle> = [
145
+ styles.priceTextBase,
146
+ priceStyle,
147
+ ];
126
148
 
127
- <LockOverlay
128
- visible={lockOverlay}
129
- contentPosition={variant == "horizontal" ?
130
- isRTL ? "top-left" : "top-right" :
131
- isRTL ? "top-right" : "top-left"
132
- }
133
- iconSize={24}
134
- text={""}
135
- overlayOpacity={0.4}
136
- />
149
+ const providerTextStyle: StyleProp<TextStyle> = [
150
+ styles.providerNameBase,
151
+ { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
152
+ providerNameStyle,
153
+ ];
154
+
155
+ const descriptionTextStyle: StyleProp<TextStyle> = [
156
+ styles.descriptionBase,
157
+ { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
158
+ descriptionStyle,
159
+ ];
137
160
 
138
- <View style={styles.overlayContainer}>
139
- <View
140
- style={[
141
- styles.topSection,
142
- {
143
- alignItems:
144
- variant === "horizontal"
145
- ? isRTL
146
- ? "flex-end"
147
- : "flex-start"
148
- : isRTL
149
- ? "flex-start"
150
- : "flex-end",
151
- },
152
- ]}
153
- >
154
- {label && (
155
- <View style={finalLabelContainerStyle}>
156
- <Text style={finalLabelStyle}>{label}</Text>
157
- </View>
158
- )}
159
- </View>
161
+ return (
162
+ <Card
163
+ onPress={onPress}
164
+ // onLayout={handleLayout} // Pass onLayout to Card to get its width
165
+ style={[
166
+ styles.cardBase,
167
+ { borderRadius, width, height: finalHeight }, // Use the calculated finalHeight
168
+ style,
169
+ ]}
170
+ backgroundImage={{
171
+ source: backgroundImage,
172
+ resizeMode: "cover", // 'cover' will fill dimensions, 'contain' would show whole image
173
+ }}
174
+ >
175
+ {darkOverlayEnabled && (
176
+ <View
177
+ style={[
178
+ StyleSheet.absoluteFill,
179
+ { backgroundColor: darkOverlayColor },
180
+ { borderRadius: borderRadius }, // Ensure overlay respects border radius
181
+ ]}
182
+ />
183
+ )}
184
+ <LockOverlay
185
+ visible={lockOverlay}
186
+ contentPosition={
187
+ variant == "horizontal"
188
+ ? isRTL
189
+ ? "top-left"
190
+ : "top-right"
191
+ : isRTL
192
+ ? "top-right"
193
+ : "top-left"
194
+ }
195
+ iconSize={24}
196
+ text={""}
197
+ overlayOpacity={0.4}
198
+ />
199
+ {/* The overlayContainer with flex: 1 will now correctly fill the 'finalHeight' */}
200
+ <View style={styles.overlayContainer}>
201
+ <View
202
+ style={[
203
+ styles.topSection,
204
+ {
205
+ alignItems:
206
+ variant === "horizontal"
207
+ ? isRTL
208
+ ? "flex-end"
209
+ : "flex-start"
210
+ : isRTL
211
+ ? "flex-start"
212
+ : "flex-end",
213
+ },
214
+ ]}
215
+ >
216
+ {label && (
217
+ <View style={finalLabelContainerStyle}>
218
+ <Text style={finalLabelStyle}>{label}</Text>
219
+ </View>
220
+ )}
221
+ </View>
160
222
 
161
- {variant === "horizontal" ? (
162
- <View style={styles.bottomContentHorizontal}>
163
- <View style={styles.textBlockHorizontal}>
164
- {providerName && (
165
- <Text style={providerTextStyle}>{providerName}</Text>
166
- )}
167
- {description && (
168
- <Text style={descriptionTextStyle}>{description}</Text>
169
- )}
170
- </View>
171
- {price && (
172
- <View style={finalPriceContainerStyle}>
173
- <Text style={finalPriceStyle}>{price}</Text>
174
- </View>
175
- )}
176
- </View>
177
- ) : (
178
- <View style={styles.bottomContentVertical}>
179
- <View style={styles.textBlockVertical}>
180
- {providerName && (
181
- <Text style={providerTextStyle}>{providerName}</Text>
182
- )}
183
- {description && (
184
- <Text style={descriptionTextStyle}>{description}</Text>
185
- )}
186
- </View>
187
- {price && (
188
- <View style={finalPriceContainerStyle}>
189
- <Text style={finalPriceStyle}>{price}</Text>
190
- </View>
191
- )}
192
- </View>
193
- )}
223
+ {variant === "horizontal" ? (
224
+ <View style={styles.bottomContentHorizontal}>
225
+ <View style={styles.textBlockHorizontal}>
226
+ {providerName && (
227
+ <Text style={providerTextStyle}>{providerName}</Text>
228
+ )}
229
+ {description && (
230
+ <Text style={descriptionTextStyle}>{description}</Text>
231
+ )}
232
+ </View>
233
+ {price && (
234
+ <View style={finalPriceContainerStyle}>
235
+ <Text style={finalPriceStyle}>{price}</Text>
236
+ </View>
237
+ )}
238
+ </View>
239
+ ) : (
240
+ <View style={styles.bottomContentVertical}>
241
+ <View style={styles.textBlockVertical}>
242
+ {providerName && (
243
+ <Text style={providerTextStyle}>{providerName}</Text>
244
+ )}
245
+ {description && (
246
+ <Text style={descriptionTextStyle}>{description}</Text>
247
+ )}
194
248
  </View>
195
- </Card>
196
- );
249
+ {price && (
250
+ <View style={finalPriceContainerStyle}>
251
+ <Text style={finalPriceStyle}>{price}</Text>
252
+ </View>
253
+ )}
254
+ </View>
255
+ )}
256
+ </View>
257
+ </Card>
258
+ );
197
259
  };
198
260
 
261
+ // getStyles function remains the same
199
262
  const getStyles = (theme: ThemeType, isRTL: boolean) => StyleSheet.create({
200
263
  cardBase: {
201
264
  overflow: "hidden",
202
265
  position: "relative",
203
266
  },
204
- overlayContainer: {
267
+ overlayContainer: { // This will now fill the calculated height of the card
205
268
  flex: 1,
206
269
  padding: 16,
207
270
  justifyContent: "space-between",
@@ -245,7 +308,8 @@ const getStyles = (theme: ThemeType, isRTL: boolean) => StyleSheet.create({
245
308
  },
246
309
  textBlockHorizontal: {
247
310
  flex: 1,
248
- marginRight: 10,
311
+ marginRight: isRTL ? 0 : 10,
312
+ marginLeft: isRTL ? 10 : 0,
249
313
  },
250
314
  priceContainerHorizontal: {
251
315
  },