working with two issues

gallery-so · May 10, 2024 · 8cfde56 · 8cfde56
1 parent 040c2a2
commit 8cfde56
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 15 deletions.
diff --git a/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx b/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx
@@ -1,17 +1,19 @@
+import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
-import { useCallback, useMemo, useState, useRef } from 'react';
-import { ScrollView, Dimensions, View } from 'react-native';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Dimensions, ScrollView, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
+import Lightbox from 'react-native-lightbox-v2';
 import { graphql, useFragment } from 'react-relay';
 import { useNavigateToCommunityScreen } from 'src/hooks/useNavigateToCommunityScreen';
 import { useToggleTokenAdmire } from 'src/hooks/useToggleTokenAdmire';
 import { BookmarkIcon } from 'src/icons/BookmarkIcon';
+import { CloseIcon } from 'src/icons/CloseIcon';
+import { MaximizeIcon } from 'src/icons/MaximizeIcon';
 import { PoapIcon } from 'src/icons/PoapIcon';
 import { ShareIcon } from 'src/icons/ShareIcon';
-import { MaximizeIcon } from 'src/icons/MaximizeIcon';
-import { CloseIcon } from 'src/icons/CloseIcon';
-import Lightbox from 'react-native-lightbox-v2';
+import Zoom from 'react-native-zoom-reanimated';
 
 import { BackButton } from '~/components/BackButton';
 import { TokenFailureBoundary } from '~/components/Boundaries/TokenFailureBoundary/TokenFailureBoundary';
@@ -21,12 +23,11 @@ import { IconContainer } from '~/components/IconContainer';
 import { MintLinkButton } from '~/components/MintLinkButton';
 import { Pill } from '~/components/Pill';
 import ProcessedText from '~/components/ProcessedText/ProcessedText';
-import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
-import { useSafeAreaPadding } from '~/components/SafeAreaViewWithPadding';
 import {
   CreatorProfilePictureAndUsernameOrAddress,
   OwnerProfilePictureAndUsername,
 } from '~/components/ProfilePicture/ProfilePictureAndUserOrAddress';
+import { useSafeAreaPadding } from '~/components/SafeAreaViewWithPadding';
 import { Typography } from '~/components/Typography';
 import { NftDetailSectionQueryFragment$key } from '~/generated/NftDetailSectionQueryFragment.graphql';
 import { PostIcon } from '~/navigation/MainTabNavigator/PostIcon';
@@ -46,7 +47,7 @@ type Props = {
   queryRef: NftDetailSectionQueryFragment$key;
 };
 
-const { width } = Dimensions.get('window');
+const { width, height } = Dimensions.get('window');
 
 export function NftDetailSection({ onShare, queryRef }: Props) {
   const route = useRoute<RouteProp<MainTabStackNavigatorParamList, 'NftDetail'>>();
@@ -104,6 +105,7 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
 
   const { colorScheme } = useColorScheme();
   const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+  const [isLightboxFullyOpen, setIsLightboxFullyOpen] = useState(false);
 
   const token = query.tokenById;
   const ownerWalletAddress =
@@ -173,15 +175,22 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
   });
 
   const customHeader = useCallback(
-    (close) => {
+    (close: () => void) => {
       return (
         <View
           className="flex-row justify-end items-center px-3 bg-black-800"
           style={{
             paddingTop: top,
           }}
         >
-          <IconContainer color="faint" icon={<CloseIcon />} onPress={close} />
+          <IconContainer
+            color="faint"
+            icon={<CloseIcon />}
+            onPress={close}
+            eventElementId={null}
+            eventName={null}
+            eventContext={null}
+          />
         </View>
       );
     },
@@ -201,8 +210,8 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
 
   const thumbnailRef = useRef<View | null>(null);
   const [thumbnailPosition, setThumbnailPosition] = useState({
-    width: width * 0.9,
-    height: width * 0.9,
+    width: width,
+    height: width,
     x: 0,
     y: 0,
   });
@@ -229,6 +238,14 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
     setIsLightboxOpen(false);
   };
 
+  const handleLightboxDidOpen = () => {
+    setIsLightboxFullyOpen(true);
+  };
+
+  const handleLightboxWillClose = () => {
+    setIsLightboxFullyOpen(false);
+  };
+
   return (
     <ScrollView>
       <View className="flex flex-col space-y-3 px-4 pb-4">
@@ -252,17 +269,33 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
             <Lightbox
               isOpen={isLightboxOpen}
               onClose={handleCloseLightbox}
+              didOpen={handleLightboxDidOpen}
+              willClose={handleLightboxWillClose}
+              onLayout={() => setIsLightboxFullyOpen(false)}
               onOpen={handleOpenLightbox}
               backgroundColor={colors.black['800']}
-              swipeToDismiss={true}
+              swipeToDismiss={false}
               renderHeader={customHeader}
               doubleTapZoomEnabled={false}
               renderContent={() => (
                 <TokenFailureBoundary tokenRef={token} variant="large">
                   <NftDetailAssetCacheSwapper
                     cachedPreviewAssetUrl={route.params.cachedPreviewAssetUrl}
                   >
-                    <NftDetailAsset tokenRef={token} />
+                    <Zoom
+                      contentContainerStyle={{
+                        display: 'flex',
+                        width: width,
+                        flexGrow: 1,
+                        backgroundColor: colors.black['800'],
+                      }}
+                      style={{ display: 'flex', flexGrow: 1 }}
+                      doubleTapConfig={{
+                        minZoomScale: 1,
+                      }}
+                    >
+                      <NftDetailAsset tokenRef={token} />
+                    </Zoom>
                   </NftDetailAssetCacheSwapper>
                 </TokenFailureBoundary>
               )}
@@ -305,7 +338,7 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
             <GalleryTouchableOpacity
               onPress={handleMaximizeToggle}
               eventElementId="NFT Detail Maximize Icon"
-              eventName="NFT Detail Maximize Icon Clicked"
+              eventName="NFT Detail Maximize Icon Pressed"
               eventContext={contexts['NFT Detail']}
             >
               <MaximizeIcon />

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react": "^18.2.0",
     "react-hotkeys-hook": "^4.3.8",
     "react-native-lightbox-v2": "^0.9.0",
+    "react-native-zoom-reanimated": "^1.4.5",
     "react-relay": "^15.0.0",
     "relay-runtime": "^15.0.0",
     "web3-utils": "^4.2.1",

diff --git a/yarn.lock b/yarn.lock
@@ -20254,6 +20254,7 @@ __metadata:
     react: ^18.2.0
     react-hotkeys-hook: ^4.3.8
     react-native-lightbox-v2: ^0.9.0
+    react-native-zoom-reanimated: ^1.4.5
     react-relay: ^15.0.0
     relay-compiler: ^15.0.0
     relay-runtime: ^15.0.0
@@ -29558,6 +29559,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-zoom-reanimated@npm:^1.4.5":
+  version: 1.4.5
+  resolution: "react-native-zoom-reanimated@npm:1.4.5"
+  peerDependencies:
+    react-native-gesture-handler: "*"
+    react-native-reanimated: ">=2.0.0"
+  checksum: c2c7b69f481db3ad4d92f0758c0d28a98c9d8aec8ec98cfca945202cc0ab415a8a9b4349c985882441a8e8f743d73ed0a37fd808fb3b3d141de8d53aa12a6ac6
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.73.4":
   version: 0.73.4
   resolution: "react-native@npm:0.73.4"