Merge pull request #2708 from gluestack/fix/image-viewer-review

Fix/image viewer review
gluestack · Jan 14, 2025 · 4860bcb · 4860bcb
2 parents 5440715 + c296c47
commit 4860bcb
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.stories.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.stories.tsx
@@ -11,7 +11,12 @@ const ImageViewerMeta: ComponentMeta<typeof ImageViewer> = {
   },
   argTypes: {},
   args: {
-    images: [{ id: 1, url: 'https://picsum.photos/1000/1000' }],
+    images: [
+      {
+        id: 1,
+        url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg',
+      },
+    ],
   },
 };
 

diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx
@@ -11,9 +11,11 @@ import { Icon, CloseIcon } from '@/components/ui/icon';
 
 const ImageViewerBasic = ({ ...props }: any) => {
   const Images = [
-    { id: 1, url: 'https://picsum.photos/1000/1000', title: 'Image 1' },
-    { id: 2, url: 'https://picsum.photos/1000/1000', title: 'Image 2' },
-    { id: 3, url: 'https://picsum.photos/1000/1000', title: 'Image 3' },
+    {
+      id: 1,
+      url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg',
+      title: 'Image 1',
+    },
   ];
   const [visible, setVisible] = useState(false);
   return (
@@ -22,7 +24,7 @@ const ImageViewerBasic = ({ ...props }: any) => {
         <Image
           source={{ uri: Images[0].url }}
           className="w-[200px] h-[200px]"
-          resizeMode="contain"
+          resizeMode="cover"
         />
       </Pressable>
 
@@ -40,7 +42,7 @@ const ImageViewerBasic = ({ ...props }: any) => {
             keyExtractor={(item, index) => item.id + '-' + index}
           >
             <ImageViewerCloseButton>
-              <Icon as={CloseIcon} />
+              <Icon as={CloseIcon} className="text-secondary-500" />
             </ImageViewerCloseButton>
           </ImageViewerContent>
         </ImageViewerBackdrop>

diff --git a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
@@ -52,19 +52,19 @@ This is an illustration of **ImageViewer** component.
       px: '$8',
     }}
     showComponentRenderer={true}
-    showArgsController={true}
+    showArgsController={false}
     metaData={{
       code: `
       function App() {
         const [visible, setVisible] = React.useState(false);
-        const Images = [{ id: 1, url: 'https://picsum.photos/1000/1000' }];
+        const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }];
         return (
           <Center>
             <Pressable onPress={() => setVisible(true)}>
               <Image
                 source={{ uri: Images[0].url }}
                 className="w-[200px] h-[200px]"
-                resizeMode="contain"
+                resizeMode="cover"
               />
             </Pressable>
             <ImageViewer isOpen={visible} onClose={() => setVisible(false)}>
@@ -77,7 +77,7 @@ This is an illustration of **ImageViewer** component.
                   keyExtractor={(item, index) => item.id + '-' + index}
                 >
                 <ImageViewerCloseButton>
-                  <Icon as={CloseIcon}/>
+                  <Icon as={CloseIcon} className='text-secondary-500'/>
                 </ImageViewerCloseButton>
               </ImageViewerContent>
             </ImageViewerBackdrop>
@@ -369,19 +369,19 @@ import { Center } from '@/components/ui/center';
       px: '$8',
     }}
     showComponentRenderer={true}
-    showArgsController={true}
+    showArgsController={false}
     metaData={{
       code: `
       function App() {
         const [visible, setVisible] = React.useState(false);
-        const Images = [{ id: 1, url: 'https://picsum.photos/1000/1000' }];
+        const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }];
         return (
           <Center>
             <Pressable onPress={() => setVisible(true)}>
               <Image
                 source={{ uri: Images[0].url }}
                 className="w-[200px] h-[200px]"
-                resizeMode="contain"
+                resizeMode="cover"
               />
             </Pressable>
             <ImageViewer isOpen={visible} onClose={() => setVisible(false)}>
@@ -394,7 +394,7 @@ import { Center } from '@/components/ui/center';
                   keyExtractor={(item, index) => item.id + '-' + index}
                 >
                 <ImageViewerCloseButton>
-                  <Icon as={CloseIcon}/>
+                  <Icon as={CloseIcon} className='text-secondary-500'/>
                 </ImageViewerCloseButton>
               </ImageViewerContent>
             </ImageViewerBackdrop>

diff --git a/example/storybook-nativewind/src/core-components/nativewind/image-viewer/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image-viewer/index.tsx
@@ -28,7 +28,7 @@ const BackdropStyle = tva({
 });
 
 const CloseButtonStyle = tva({
-  base: 'absolute top-4 right-4 z-10 bg-white rounded-full w-8 h-8 justify-center items-center cursor-pointer',
+  base: 'absolute top-4 right-4 z-10 rounded-full w-8 h-8 justify-center items-center cursor-pointer hover:bg-primary-500 transition-all duration-300',
 });
 
 const UIImageViewer = createImageViewer({

diff --git a/packages/unstyled/image-viewer/src/ImageViewerContent.tsx b/packages/unstyled/image-viewer/src/ImageViewerContent.tsx
@@ -111,7 +111,7 @@ const ImageViewerContent = (
         })
         .onEnd((event: any) => {
           if (scale.value <= 1) {
-            if (Math.abs(event.translationY) > SCREEN_HEIGHT * 0.2) {
+            if (Math.abs(event.translationY) > SCREEN_HEIGHT * 0.005) {
               runOnJS(onClose)();
             }
           }