@wlloyalty/wll-react-sdk 1.0.84 → 1.0.86

package/dist/native.js

@@ -3651,12 +3651,25 @@ var Grid = function (_a) {
             };
         }
         else {
+            // Calculate available width accounting for screen width and section padding
             var availableWidth = SCREEN_WIDTH - GRID_GAP * 2;
             var gapSpace = (columns - 1) * GRID_GAP;
             var tileWidth = Math.floor((availableWidth - gapSpace) / columns);
+            var halfTileHeight = Math.floor(tileWidth / 2);
+            // Detailed logging for debugging
+            console.log('=== GRID DEBUG ===');
+            console.log("SCREEN_WIDTH: ".concat(SCREEN_WIDTH, "px, GRID_GAP: ").concat(GRID_GAP, "px"));
+            console.log("Columns: ".concat(columns, ", Section padding: ").concat(GRID_GAP * 2, "px"));
+            console.log("Available width: ".concat(availableWidth, "px, Gap space: ").concat(gapSpace, "px"));
+            console.log("Calculated tile width: ".concat(tileWidth, "px"));
+            console.log("Half tile height should be: ".concat(halfTileHeight, "px"));
+            console.log("Expected full tile: ".concat(tileWidth, "x").concat(tileWidth, "px"));
+            console.log("Expected half tile: ".concat(tileWidth, "x").concat(halfTileHeight, "px"));
+            console.log('=== END DEBUG ===');
             return {
                 width: tileWidth,
                 marginBottom: GRID_GAP,
+                aspectRatio: 1,
             };
         }
     }, []);
@@ -4638,11 +4651,23 @@ var TileContainer = function (_a) {
     return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.container, testID: "tile-container", children: tiles.map(function (tile, index) {
             var TileComponent = TILE_COMPONENTS[tile.type];
             var isHalfSize = useTileSize(tile).isHalfSize;
+            // Log tile dimensions for debugging
+            if (!__DEV__) {
+                console.log("Tile ".concat(index, " (").concat(tile.id, "): ").concat(isHalfSize ? 'Half' : 'Full', " size"));
+            }
             return (jsxRuntimeExports.jsx(reactNative.View, { style: [
                     styles.tileContainer,
                     isHalfSize && styles.halfTileContainer,
                     index > 0 && { marginTop: GRID_GAP },
-                ], children: TileComponent ? jsxRuntimeExports.jsx(TileComponent, { tile: tile }) : null }, tile.id));
+                ], onLayout: function (event) {
+                    if (__DEV__) {
+                        var _a = event.nativeEvent.layout, width = _a.width, height = _a.height;
+                        console.log("=== TILE ".concat(index, " LAYOUT ==="));
+                        console.log("Tile ID: ".concat(tile.id, ", Type: ").concat(tile.type));
+                        console.log("Is Half Size: ".concat(isHalfSize));
+                        console.log("Actual dimensions: ".concat(width.toFixed(2), "x").concat(height.toFixed(2), "px"));
+                    }
+                }, children: TileComponent ? jsxRuntimeExports.jsx(TileComponent, { tile: tile }) : null }, tile.id));
         }) }));
 };
 var styles = reactNative.StyleSheet.create({
@@ -4659,8 +4684,8 @@ var styles = reactNative.StyleSheet.create({
         width: '100%',
     },
     halfTileContainer: {
-        flexBasis: '50%',
-        height: '50%',
+        aspectRatio: 2,
+        backgroundColor: 'red',
     },
 });