Feat/image viewer

example/storybook-nativewind/babel.config.js

@@ -34,6 +34,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/input/src'
             ),
+            '@gluestack-ui/image-viewer': path.resolve(
+              __dirname,
+              '../../packages/unstyled/image-viewer/src'
+            ),
             '@gluestack-ui/tooltip': path.resolve(
               __dirname,
               '../../packages/unstyled/tooltip/src'

example/storybook-nativewind/package.json

@@ -52,8 +52,8 @@
     "@react-native-community/slider": "4.2.4",
     "@react-stately/collections": "^3.6.0",
     "@react-stately/tree": "^3.5.0",
-    "@unitools/link": "^0.0.4",
     "@unitools/image": "^0.0.5",
+    "@unitools/link": "^0.0.4",
     "expo": "^47.0.0",
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
@@ -66,7 +66,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "0.72.4",
-    "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",

example/storybook-nativewind/src/components/ImageViewer/ImageViewer.stories.tsx

@@ -0,0 +1,20 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import ImageViewer from './ImageViewer';
+
+const ImageViewerMeta: ComponentMeta<typeof ImageViewer> = {
+  title: 'stories/ImageViewer',
+  component: ImageViewer,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The ImageViewer component provides a modal view for displaying and interacting with images, supporting features like pinch-to-zoom, double-tap zoom, and swipe-to-dismiss.`,
+  },
+  argTypes: {},
+  args: {
+    images: [{ id: 1, url: 'https://picsum.photos/1000/1000' }],
+  },
+};
+
+export default ImageViewerMeta;
+
+export { ImageViewer };

example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx

@@ -0,0 +1,53 @@
+'use client';
+import React, { useState } from 'react';
+import { Image, Pressable } from 'react-native';
+import {
+  ImageViewer,
+  ImageViewerBackdrop,
+  ImageViewerCloseButton,
+  ImageViewerContent,
+  ImageViewerImage,
+} from '@/components/ui/image-viewer';
+import { Icon } from '@/components/ui/icon';
+import { CloseIcon } from '@/components/ui/icon';
+
+const ImageViewerBasic = ({ ...props }: any) => {
+  const Images = [{ id: 1, url: 'https://picsum.photos/1000/1000' }];
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Pressable onPress={() => setVisible(true)}>
+        <Image
+          source={{ uri: Images[0].url }}
+          className="w-[200px] h-[200px]"
+          resizeMode="contain"
+        />
+      </Pressable>
+
+      <ImageViewer
+        isOpen={visible}
+        onClose={() => setVisible(false)}
+        {...props}
+      >
+        <ImageViewerBackdrop>
+          <ImageViewerContent
+            images={Images}
+            renderImages={(item: any) => (
+              <ImageViewerImage key={item.id} source={{ uri: item.url }} />
+            )}
+          >
+            <ImageViewerCloseButton>
+              <Icon as={CloseIcon} size="md" />
+            </ImageViewerCloseButton>
+          </ImageViewerContent>
+        </ImageViewerBackdrop>
+      </ImageViewer>
+    </>
+  );
+};
+
+ImageViewerBasic.description = 'This is a basic ImageViewer component example.';
+
+export default ImageViewerBasic;
+
+export { ImageViewer };