Merge pull request #2696 from gluestack/release/ImageViewer@0.0.8

Release/image viewer@0.0.8
gluestack · Jan 9, 2025 · 30f96fe · 30f96fe
2 parents d42ff03 + fa4bb85
commit 30f96fe
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 23 deletions.
diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx
@@ -34,9 +34,9 @@ const ImageViewerBasic = ({ ...props }: any) => {
         <ImageViewerBackdrop>
           <ImageViewerContent
             images={Images}
-            renderImages={({ item }) => (
-              <ImageViewerImage source={{ uri: item.url }} />
-            )}
+            renderImages={({ item }) => {
+              return <ImageViewerImage source={{ uri: item.url }} />;
+            }}
             keyExtractor={(item, index) => item.id + '-' + index}
           >
             <ImageViewerCloseButton>

diff --git a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
@@ -71,8 +71,8 @@ This is an illustration of **ImageViewer** component.
               <ImageViewerBackdrop>
                 <ImageViewerContent
                   images={Images}
-                  renderImages={(item) => (
-                    <ImageViewerImage key={item.id} source={{ uri: item.url }} />
+                  renderImages={({item, index}) => (
+                    <ImageViewerImage source={{ uri: item.url }} />
                   )}
                   keyExtractor={(item, index) => item.id + '-' + index}
                 >
@@ -300,7 +300,7 @@ The `ImageViewerContent` component is responsible for rendering the images withi
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>(item: any) => ReactNode</Table.TText>
+            <Table.TText>{`({item, index}) => ReactNode`}</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>-</Table.TText>
@@ -388,8 +388,8 @@ import { Center } from '@/components/ui/center';
               <ImageViewerBackdrop>
                 <ImageViewerContent
                   images={Images}
-                  renderImages={(item) => (
-                    <ImageViewerImage key={item.id} source={{ uri: item.url }} />
+                  renderImages={({item, index}) => (
+                    <ImageViewerImage source={{ uri: item.url }} />
                   )}
                   keyExtractor={(item, index) => item.id + '-' + index}
                 >

diff --git a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
@@ -234,5 +234,5 @@
       "hooks": ["useBreakpointValue"]
     }
   },
-  "IgnoredComponents": ["bottomsheet"]
+  "IgnoredComponents": ["bottomsheet", "image-viewer"]
 }
diff --git a/packages/unstyled/image-viewer/CHANGELOG.md b/packages/unstyled/image-viewer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-ui/image-viewer
 
+## 0.0.7
+
+### Patch Changes
+
+- fix: fixed renderImages method and updated example
+
 ## 0.0.6
 
 ### Patch Changes

diff --git a/packages/unstyled/image-viewer/README.md b/packages/unstyled/image-viewer/README.md
@@ -67,9 +67,13 @@ export default () => (
     <ImageViewerBackdrop>
       <ImageViewerContent
         images={images}
-        renderImages={(item) => (
-          <ImageViewerImage key={item.id} source={{ uri: item.url }} />
-        )}
+        renderImages={({ item, index }) => {
+          return (
+            <ImageViewerImage
+              source={{ uri: item.url }}
+            />
+          );
+        }}
         keyExtractor={(item, index) => `${item.id}-${index}`}
       />
     </ImageViewerBackdrop>
@@ -81,19 +85,19 @@ export default () => (
 
 ### ImageViewer
 
-| Prop     | Type      | Default | Description                                            |
-| -------- | --------- | ------- | ------------------------------------------------------ |
-| isOpen   | boolean   | false   | If true, the image viewer modal will open              |
-| onClose  | function  | -       | Callback invoked when the image viewer modal is closed |
-| children | ReactNode | -       | The content to be rendered inside the image viewer     |
+| Prop     | Type      | Default | Description                                            | Required |
+| -------- | --------- | ------- | ------------------------------------------------------ | -------- |
+| isOpen   | boolean   | false   | If true, the image viewer modal will open              | Yes      |
+| onClose  | function  | -       | Callback invoked when the image viewer modal is closed | Yes      |
+| children | ReactNode | -       | The content to be rendered inside the image viewer     |  _       |
 
 ### ImageViewerContent
 
-| Prop         | Type                                 | Default | Description                                     |
-| ------------ | ------------------------------------ | ------- | ----------------------------------------------- |
-| images       | Array<any>                           | -       | Array of image objects to display               |
-| renderImages | (item: any) => ReactNode             | -       | Function to render each image item              |
-| keyExtractor | (item: any, index: number) => string | -       | Function to extract the key for each image item |
+| Prop         | Type                                      | Default | Description                                     | Required |
+| ------------ | ----------------------------------------- | ------- | ----------------------------------------------- | -------- |
+| images       | Array<any>                                | -       | Array of image objects to display               | Yes      |
+| renderImages | ({item: any, index: number}) => ReactNode | -       | Function to render each image item              | Yes      |
+| keyExtractor | (item: any, index: number) => string      | -       | Function to extract the key for each image item | Yes      |
 
 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
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/image-viewer",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "main": "lib/index",
   "module": "lib/index",
   "types": "lib/index.d.ts",