Merge pull request #2050 from gluestack/fix/img-nativewind

fix: image component
gluestack · Apr 9, 2024 · 9892055 · 9892055
2 parents 1530157 + 03cc9b2
commit 9892055
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 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
@@ -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
@@ -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
+      }
+    />
   );
 };