diff --git a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
index 0a195865c..8aac1d23b 100644
--- a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
@@ -23,8 +23,6 @@ import {
CloseIcon,
Icon,
Center,
- Pressable,
- Image
} from '../../core-components/nativewind';
import {
Pressable,
@@ -277,7 +275,7 @@ The `ImageViewerContent` component is responsible for rendering the images withi
- Array<{`{id: number, url: string}`}>
+ Array<{`any`}>
-
@@ -325,6 +323,74 @@ The `ImageViewerBackdrop` component serves as the background layer of the `Image
The `ImageViewerImage` component is used to display individual images within the `ImageViewerContent`. It supports all the properties of React Native's [Image](https://reactnative.dev/docs/image) component, making it easy to customize the appearance and behavior of the images.
+### Example
+
+The Example section offers visual previews of the component, letting you quickly identify the best fit for your needs. Just copy the code and use it in your project.
+
+```jsx
+import { ImageViewer, ImageViewerBackdrop, ImageViewerContent, ImageViewerCloseButton, ImageViewerImage } from '@/components/ui/image-viewer';
+import { CloseIcon, Icon } from '@/components/ui/icon';
+import React, { useState } from 'react';
+import { Pressable, Image } from 'react-native';
+import { Center } from '@/components/ui/center';
+```
+
+
+
+ setVisible(true)}>
+
+
+ setVisible(false)}>
+
+ ()} >
+
+
+
+
+
+
+
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Wrapper,
+ ImageViewer,
+ ImageViewerBackdrop,
+ ImageViewerContent,
+ ImageViewerCloseButton,
+ ImageViewerImage,
+ CloseIcon,
+ Icon,
+ useState,
+ Pressable,
+ Image,
+ Center,
+ },
+ argsType: {},
+ }}
+ />
+
> Note: Currently, the ImageViewer component is limited to only single image, multiple image support will be added in the future.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
index d6b30c203..feecf3e2a 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
+++ b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
@@ -103,6 +103,12 @@
"@gluestack-ui/image": "latest"
}
},
+ "image-viewer": {
+ "dependencies": {
+ "@gluestack-ui/image-viewer": "latest",
+ "react-native-gesture-handler": "^2.21.2"
+ }
+ },
"image-background": {
"dependencies": {}
},
diff --git a/packages/unstyled/image-viewer/CHANGELOG.md b/packages/unstyled/image-viewer/CHANGELOG.md
index 0c854049e..842ef93c7 100644
--- a/packages/unstyled/image-viewer/CHANGELOG.md
+++ b/packages/unstyled/image-viewer/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/image-viewer
+## 0.0.4
+
+### Patch Changes
+
+- fix: updated dependencies.json
+
## 0.0.3
### Patch Changes
diff --git a/packages/unstyled/image-viewer/README.md b/packages/unstyled/image-viewer/README.md
index 6e2faa970..e971c9abf 100644
--- a/packages/unstyled/image-viewer/README.md
+++ b/packages/unstyled/image-viewer/README.md
@@ -88,10 +88,10 @@ export default () => (
### ImageViewerContent
-| Prop | Type | Default | Description |
-| ------------ | -------------------------------- | ------- | ---------------------------------- |
-| images | Array<{id: number, url: string}> | - | Array of image objects to display |
-| renderImages | (item: any) => ReactNode | - | Function to render each image item |
+| Prop | Type | Default | Description |
+| ------------ | ------------------------ | ------- | ---------------------------------- |
+| images | Array | - | Array of image objects to display |
+| renderImages | (item: any) => ReactNode | - | Function to render each image item |
More guides on how to get started are available [here](https://ui.gluestack.io/docs/components/media-and-icons/image-viewer).
diff --git a/packages/unstyled/image-viewer/package.json b/packages/unstyled/image-viewer/package.json
index fcce29844..05516a147 100644
--- a/packages/unstyled/image-viewer/package.json
+++ b/packages/unstyled/image-viewer/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/image-viewer",
- "version": "0.0.3",
+ "version": "0.0.4",
"main": "lib/index",
"module": "lib/index",
"types": "lib/index.d.ts",