From 03cc9b2cb60b4471c656efa7df8a26c3f05f04a7 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Mon, 8 Apr 2024 19:27:36 +0530
Subject: [PATCH] fix: image component

---
 .../src/core-components/nativewind/button/index.tsx |  2 +-
 .../src/core-components/nativewind/image/index.tsx  | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
index 2dea726b46..af2e8d3996 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -40,7 +40,7 @@ cssInterop(UIButton.Spinner, { className: 'style' });
 cssInterop(UIButton.Icon, { className: 'style' });
 
 const buttonStyle = tva({
-  base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40',
+  base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40',
   variants: {
     action: {
       primary:
diff --git a/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
index fc0805f544..224aaae457 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
@@ -4,9 +4,10 @@ import { createImage } from '@gluestack-ui/image';
 import { Image as RNImage } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import { Platform } from 'react-native';
 
 const imageStyle = tva({
-  base: 'max-w-full lg:h-[revert-layer] lg:w-[revert-layer]',
+  base: 'max-w-full',
   variants: {
     size: {
       '2xs': 'h-6 w-6',
@@ -26,7 +27,15 @@ cssInterop(UIImage, { className: 'style' });
 
 const Image = ({ size = 'md', className, ...props }: any) => {
   return (
-    <UIImage className={imageStyle({ size, class: className })} {...props} />
+    <UIImage
+      className={imageStyle({ size, class: className })}
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? { height: 'revert-layer', width: 'revert-layer' }
+          : undefined
+      }
+    />
   );
 };