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",