Release/image [email protected]

example/storybook-nativewind/.storybook/preview.js

@@ -108,6 +108,8 @@ export const parameters = {
         [
           'Recipes',
           ['Linear Gradient'],
+          'Tutorials',
+          ['Building Ecommerce App'],
           'More',
           [
             'Upgrade to v2',

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 }}

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: {},
     }}
@@ -364,6 +367,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>
@@ -381,6 +385,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 }}
@@ -423,6 +428,7 @@ import { Center } from '@/components/ui/center';
         Pressable,
         Image,
         Center,
+        StatusBar,
       },
       argsType: {},
     }}

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"]
 }

example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx

@@ -0,0 +1,98 @@
+'use client';
+import { Box } from '@/components/ui/box';
+import React, { useEffect } from 'react';
+
+declare global {
+  interface Window {
+    onYouTubeIframeAPIReady: () => void;
+    YT: any;
+  }
+}
+
+const VadimStream = () => {
+  useEffect(() => {
+    // Only load the API if it hasn't been loaded yet
+    if (!document.getElementById('youtube-api')) {
+      const tag = document.createElement('script');
+      tag.id = 'youtube-api';
+      tag.src = 'https://www.youtube.com/iframe_api';
+      const firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
+    }
+
+    // Initialize players when API is ready
+    const initializePlayers = () => {
+      new window.YT.Player('player1', {
+        events: {
+          onStateChange: (event: any) => {
+            if (event.data === window.YT.PlayerState.PLAYING) {
+              const player2Frame = document.getElementById(
+                'player2'
+              ) as HTMLIFrameElement;
+              player2Frame?.contentWindow?.postMessage(
+                '{"event":"command","func":"pauseVideo","args":""}',
+                '*'
+              );
+            }
+          },
+        },
+      });
+
+      new window.YT.Player('player2', {
+        events: {
+          onStateChange: (event: any) => {
+            if (event.data === window.YT.PlayerState.PLAYING) {
+              const player1Frame = document.getElementById(
+                'player1'
+              ) as HTMLIFrameElement;
+              player1Frame?.contentWindow?.postMessage(
+                '{"event":"command","func":"pauseVideo","args":""}',
+                '*'
+              );
+            }
+          },
+        },
+      });
+    };
+
+    // If API is already loaded, initialize players directly
+    if (window.YT && window.YT.Player) {
+      initializePlayers();
+    } else {
+      // Otherwise wait for API to load
+      window.onYouTubeIframeAPIReady = initializePlayers;
+    }
+
+    return () => {
+      // Only reset the ready handler, don't remove the script
+      window.onYouTubeIframeAPIReady = () => {};
+    };
+  }, []);
+
+  return (
+    <Box className="relative flex-1 w-full h-full gap-5 flex-col md:flex-row">
+      <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
+        <iframe
+          id="player1"
+          width="100%"
+          height="100%"
+          src="https://www.youtube.com/embed/FBXUPJ9_Xl0?enablejsapi=1"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </Box>
+      <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
+        <iframe
+          id="player2"
+          width="100%"
+          height="100%"
+          src="https://www.youtube.com/embed/9ErkOcDWJxI?enablejsapi=1"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default VadimStream;

example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx

@@ -0,0 +1,16 @@
+---
+title: Learn to build Ecommerce App using gluestack
+
+description: Tutorial to build Ecommerce App using gluestack-ui from Youtube guru notJust.dev (Vadim)
+---
+
+import { Meta } from '@storybook/addon-docs';
+import VadimStream from '../../../extra-components/nativewind/VadimStream';
+
+<Meta title="with-nativewind/Guides/Tutorials/Building Ecommerce App" />
+
+# Learn about gluestack from Youtube guru [notJust.dev](https://www.youtube.com/@notjustdev)
+
+Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range of developer tools and frameworks, including Gluestack-UI.
+
+<VadimStream />

packages/unstyled/image-viewer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-ui/image-viewer
 
+## 0.0.11
+
+### Patch Changes
+
+- fix: fixed lagging while swipping down image to close ImageViewer
+
 ## 0.0.10
 
 ### Patch Changes

packages/unstyled/image-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/image-viewer",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "lib/index",
   "module": "lib/index",
   "types": "lib/index.d.ts",

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}>