From e7e96fbb2b3a4a96e15c0ba20039ee3d4c67637e Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Tue, 14 Jan 2025 12:28:36 +0530 Subject: [PATCH 1/8] chore: updated image url --- .../src/components/ImageViewer/ImageViewer.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.stories.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.stories.tsx index 2cba64f3d..609640b41 100644 --- 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 = { }, 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', + }, + ], }, }; From 4c09a541afbc5d2124268495342aa19b4ddfcd7c Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Tue, 14 Jan 2025 12:29:42 +0530 Subject: [PATCH 2/8] chore: updated imageUrl and close button icon style --- .../src/components/ImageViewer/ImageViewer.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx index 439d30fcd..7c40983ef 100644 --- 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) => { @@ -40,7 +42,7 @@ const ImageViewerBasic = ({ ...props }: any) => { keyExtractor={(item, index) => item.id + '-' + index} > - + From c39e2de06f50a71b9dbafd99d983871854bd6328 Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Tue, 14 Jan 2025 12:30:25 +0530 Subject: [PATCH 3/8] chore: updated example --- .../components/ImageViewer/index.nw.stories.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) 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 5a24ee157..fd82d3e5b 100644 --- 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 (
setVisible(true)}> setVisible(false)}> @@ -77,7 +77,7 @@ This is an illustration of **ImageViewer** component. keyExtractor={(item, index) => item.id + '-' + index} > - + @@ -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 (
setVisible(true)}> setVisible(false)}> @@ -394,7 +394,7 @@ import { Center } from '@/components/ui/center'; keyExtractor={(item, index) => item.id + '-' + index} > - + From a3e81d63c10dac685a5c7eb0efe1e9bfd8ee0daa Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Tue, 14 Jan 2025 12:30:50 +0530 Subject: [PATCH 4/8] chore: updated close button style --- .../src/core-components/nativewind/image-viewer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index fd17523ef..7179b1027 100644 --- 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({ From c3097391ff3dee0f0cd82635e8555386e614eff6 Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Tue, 14 Jan 2025 12:31:51 +0530 Subject: [PATCH 5/8] fix: statusBar style inverted --- packages/unstyled/image-viewer/src/ImageViewer.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/unstyled/image-viewer/src/ImageViewer.tsx b/packages/unstyled/image-viewer/src/ImageViewer.tsx index 0de94c9c0..1c624b1fd 100644 --- a/packages/unstyled/image-viewer/src/ImageViewer.tsx +++ b/packages/unstyled/image-viewer/src/ImageViewer.tsx @@ -1,6 +1,7 @@ import React, { forwardRef } from 'react'; import { ImageViewerContext } from './ImageViewerContext'; import type { InterfaceImageViewerProps } from './types'; +import { StatusBar } from 'expo-status-bar'; const ImageViewer = (StyledRoot: any) => forwardRef( @@ -26,6 +27,7 @@ const ImageViewer = (StyledRoot: any) => return ( + Date: Tue, 14 Jan 2025 12:33:36 +0530 Subject: [PATCH 6/8] fix: updated statusbar import and fixed image close --- packages/unstyled/image-viewer/src/ImageViewerContent.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/unstyled/image-viewer/src/ImageViewerContent.tsx b/packages/unstyled/image-viewer/src/ImageViewerContent.tsx index 2b07e06a8..575d2f0b2 100644 --- a/packages/unstyled/image-viewer/src/ImageViewerContent.tsx +++ b/packages/unstyled/image-viewer/src/ImageViewerContent.tsx @@ -7,7 +7,8 @@ import { withSpring, withTiming, } from 'react-native-reanimated'; -import { Dimensions, StatusBar } from 'react-native'; +import { Dimensions } from 'react-native'; +import { StatusBar } from 'expo-status-bar'; import type { InterfaceImageViewerContentProps } from './types'; const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window'); @@ -111,7 +112,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)(); } } @@ -165,7 +166,7 @@ const ImageViewerContent = ( return ( -