From de87416d64b8084c966f60750c1f13321ae2d83c Mon Sep 17 00:00:00 2001
From: Sanchitv3 <sanchitverma03032003@gmail.com>
Date: Wed, 15 Jan 2025 15:12:46 +0530
Subject: [PATCH 1/4] fix: removed statusbar code and fixed lagging while scale
 value changes

---
 .../image-viewer/src/ImageViewerContent.tsx    | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/unstyled/image-viewer/src/ImageViewerContent.tsx b/packages/unstyled/image-viewer/src/ImageViewerContent.tsx
index c4e2237d6..92d127ab1 100644
--- a/packages/unstyled/image-viewer/src/ImageViewerContent.tsx
+++ b/packages/unstyled/image-viewer/src/ImageViewerContent.tsx
@@ -7,7 +7,7 @@ import {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import { Dimensions, StatusBar } from 'react-native';
+import { Dimensions } from 'react-native';
 import type { InterfaceImageViewerContentProps } from './types';
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
@@ -100,13 +100,10 @@ const ImageViewerContent = (
             translateY.value = lastTranslateY.value + event.translationY;
           } else {
             // Normal swipe behavior when not zoomed
-            if (Math.abs(event.translationY) > Math.abs(event.translationX)) {
-              translateY.value = event.translationY;
-              scale.value = Math.max(
-                0.5,
-                1 - Math.abs(event.translationY) / SCREEN_HEIGHT
-              );
-            }
+            translateY.value = event.translationY;
+            scale.value = withSpring(
+              Math.max(0.5, 1 - Math.abs(event.translationY) / SCREEN_HEIGHT)
+            );
           }
         })
         .onEnd((event: any) => {
@@ -120,7 +117,7 @@ const ImageViewerContent = (
           if (scale.value <= 1) {
             translateX.value = 0;
             translateY.value = withSpring(0);
-            scale.value = withSpring(1);
+            scale.value = withTiming(1);
             savedScale.value = 1;
           } else {
             // When zoomed, bound the pan values
@@ -152,8 +149,6 @@ const ImageViewerContent = (
       // @ts-ignore
       const animatedStyle = useAnimatedStyle(() => {
         runOnJS(setScale)(scale.value);
-        if (scale.value <= 1) {
-        }
         return {
           transform: [
             { translateX: translateX.value },
@@ -165,7 +160,6 @@ const ImageViewerContent = (
 
       return (
         <StyledGestureHandlerRootView ref={ref}>
-          <StatusBar hidden={true} />
           {children}
           <StyledGestureDetector gesture={composedGesture}>
             <StyledAnimated style={animatedStyle}>

From e52edb73f24268fd1b38d01c50431b2bed7d588f Mon Sep 17 00:00:00 2001
From: Sanchitv3 <sanchitverma03032003@gmail.com>
Date: Thu, 16 Jan 2025 15:57:46 +0530
Subject: [PATCH 2/4] chore: ignored pin-input in dependencies.json

---
 .../src/core-components/nativewind/dependencies.json            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
index 5db25292b..ffa53f067 100644
--- 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", "image-viewer"]
+  "IgnoredComponents": ["bottomsheet", "image-viewer", "pin-input"]
 }

From b96d19e45bcd7c60a35d176d04446cbcff1d5d9a Mon Sep 17 00:00:00 2001
From: Sanchitv3 <sanchitverma03032003@gmail.com>
Date: Thu, 16 Jan 2025 15:58:51 +0530
Subject: [PATCH 3/4] chore: added statusbar hidden in stories example

---
 .../src/components/ImageViewer/ImageViewer.tsx                  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx
index 7c40983ef..22ac44607 100644
--- a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx
+++ b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Image, Pressable } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
 import {
   ImageViewer,
   ImageViewerBackdrop,
@@ -20,6 +21,7 @@ const ImageViewerBasic = ({ ...props }: any) => {
   const [visible, setVisible] = useState(false);
   return (
     <>
+      <StatusBar hidden={visible} />
       <Pressable onPress={() => setVisible(true)}>
         <Image
           source={{ uri: Images[0].url }}

From 6a8083e261f0b9979cbe8147a1e10ad556d2ac1b Mon Sep 17 00:00:00 2001
From: Sanchitv3 <sanchitverma03032003@gmail.com>
Date: Thu, 16 Jan 2025 15:59:30 +0530
Subject: [PATCH 4/4] chore: added statusbar hidden in examples

---
 .../src/components/ImageViewer/index.nw.stories.mdx         | 6 ++++++
 1 file changed, 6 insertions(+)

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 fd82d3e5b..2c6a115ec 100644
--- a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
@@ -30,6 +30,7 @@ import {
 } from 'react-native';
 import { transformedCode } from '../../utils';
 import { useState } from 'react';
+import { StatusBar } from 'expo-status-bar';
 
 import {
   CodePreview,
@@ -60,6 +61,7 @@ This is an illustration of **ImageViewer** component.
         const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }];
         return (
           <Center>
+          <StatusBar hidden={visible}/>
             <Pressable onPress={() => setVisible(true)}>
               <Image
                 source={{ uri: Images[0].url }}
@@ -102,6 +104,7 @@ This is an illustration of **ImageViewer** component.
         Pressable,
         Image,
         Center,
+        StatusBar,
       },
       argsType: {},
     }}
@@ -360,6 +363,7 @@ import { CloseIcon, Icon } from '@/components/ui/icon';
 import React, { useState } from 'react';
 import { Pressable, Image } from 'react-native';
 import { Center } from '@/components/ui/center';
+import { StatusBar } from 'expo-status-bar';
 ```
 
 <Wrapper>
@@ -377,6 +381,7 @@ import { Center } from '@/components/ui/center';
         const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }];
         return (
           <Center>
+          <StatusBar hidden={visible}/>
             <Pressable onPress={() => setVisible(true)}>
               <Image
                 source={{ uri: Images[0].url }}
@@ -419,6 +424,7 @@ import { Center } from '@/components/ui/center';
         Pressable,
         Image,
         Center,
+        StatusBar,
       },
       argsType: {},
     }}