diff --git a/apps/mobile/src/icons/MaximizeIcon.tsx b/apps/mobile/src/icons/MaximizeIcon.tsx
new file mode 100644
index 000000000..dd3682dee
--- /dev/null
+++ b/apps/mobile/src/icons/MaximizeIcon.tsx
@@ -0,0 +1,39 @@
+import { useColorScheme } from 'nativewind';
+import React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+import colors from '~/shared/theme/colors';
+
+export function MaximizeIcon({ ...props }: SvgProps) {
+ const { colorScheme } = useColorScheme();
+ const strokeColor = colorScheme === 'dark' ? colors.white : colors.black['800'];
+
+ return (
+
+ );
+}
diff --git a/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx b/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx
index 497c75de2..9cd60838d 100644
--- a/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx
+++ b/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx
@@ -1,6 +1,6 @@
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import { useColorScheme } from 'nativewind';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
import { ScrollView, View } from 'react-native';
import FastImage from 'react-native-fast-image';
import { graphql, useFragment } from 'react-relay';
@@ -9,6 +9,8 @@ import { useToggleTokenAdmire } from 'src/hooks/useToggleTokenAdmire';
import { BookmarkIcon } from 'src/icons/BookmarkIcon';
import { PoapIcon } from 'src/icons/PoapIcon';
import { ShareIcon } from 'src/icons/ShareIcon';
+import { MaximizeIcon } from 'src/icons/MaximizeIcon';
+import Lightbox from 'react-native-lightbox-v2';
import { BackButton } from '~/components/BackButton';
import { TokenFailureBoundary } from '~/components/Boundaries/TokenFailureBoundary/TokenFailureBoundary';
@@ -18,6 +20,7 @@ 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 {
CreatorProfilePictureAndUsernameOrAddress,
OwnerProfilePictureAndUsername,
@@ -96,6 +99,7 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
);
const { colorScheme } = useColorScheme();
+ const [isLightboxOpen, setIsLightboxOpen] = useState(false);
const token = query.tokenById;
const ownerWalletAddress =
@@ -169,6 +173,10 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
[colorScheme]
);
+ const handleMaximizeToggle = () => {
+ setIsLightboxOpen((currIsLightboxOpen) => !currIsLightboxOpen);
+ };
+
return (
@@ -188,14 +196,20 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
/>
-
-
-
-
-
-
+
+ setIsLightboxOpen(false)}
+ onOpen={() => setIsLightboxOpen(true)}
+ >
+
+
+
+
+
+
@@ -211,6 +225,14 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
{tokenDefinition.name}
+
+
+
schema.graphql"
},
"dependencies": {
+ "@openspacelabs/react-native-zoomable-view": "^2.1.6",
+ "add": "^2.0.6",
"nextjs-routes": "^1.0.8",
"react": "^18.2.0",
"react-hotkeys-hook": "^4.3.8",
+ "react-native-lightbox-v2": "^0.9.0",
"react-relay": "^15.0.0",
"relay-runtime": "^15.0.0",
- "web3-utils": "^4.2.1"
+ "web3-utils": "^4.2.1",
+ "yarn": "^1.22.22"
},
"engines": {
"node": "20.5.0"
diff --git a/yarn.lock b/yarn.lock
index b6e7bcd93..3020d3b1d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6847,6 +6847,18 @@ __metadata:
languageName: node
linkType: hard
+"@openspacelabs/react-native-zoomable-view@npm:^2.1.6":
+ version: 2.2.0
+ resolution: "@openspacelabs/react-native-zoomable-view@npm:2.2.0"
+ dependencies:
+ prop-types: ^15.7.2
+ peerDependencies:
+ react: ">=16.8.0"
+ react-native: ">=0.54.0"
+ checksum: 3227ec0954b52440ed3a69781582c08901df7a8fc265ceed4eef3d948a1826f4ccf293a45fe14d2f93e1d8863e5122563543ba506c11bfe37a3679f12ddb6027
+ languageName: node
+ linkType: hard
+
"@parcel/watcher-android-arm64@npm:2.4.1":
version: 2.4.1
resolution: "@parcel/watcher-android-arm64@npm:2.4.1"
@@ -12746,6 +12758,13 @@ __metadata:
languageName: node
linkType: hard
+"add@npm:^2.0.6":
+ version: 2.0.6
+ resolution: "add@npm:2.0.6"
+ checksum: e2d23d40494565dfed4acd65e478570c444db5ac6c053551ed429c39ea0f2c99d83df63e7befec936df601827d2254d06a2fb6f7dcfd2022e810b25eab818b8c
+ languageName: node
+ linkType: hard
+
"aes-js@npm:3.0.0":
version: 3.0.0
resolution: "aes-js@npm:3.0.0"
@@ -20217,10 +20236,12 @@ __metadata:
resolution: "gallery-monorepo@workspace:."
dependencies:
"@moonrepo/cli": ^1.21.2
+ "@openspacelabs/react-native-zoomable-view": ^2.1.6
"@types/react-relay": ^14.1.3
"@types/relay-runtime": ^14.1.8
"@typescript-eslint/eslint-plugin": ^6.15.0
"@typescript-eslint/parser": ^6.15.0
+ add: ^2.0.6
eslint: ^8.56.0
eslint-config-prettier: ^9.1.0
eslint-plugin-react-hooks: ^4.6.0
@@ -20232,12 +20253,14 @@ __metadata:
prettier: ^2.8.4
react: ^18.2.0
react-hotkeys-hook: ^4.3.8
+ react-native-lightbox-v2: ^0.9.0
react-relay: ^15.0.0
relay-compiler: ^15.0.0
relay-runtime: ^15.0.0
tsconfig-moon: ^1.2.2
typescript: ^5.0.0
web3-utils: ^4.2.1
+ yarn: ^1.22.22
languageName: unknown
linkType: soft
@@ -29324,6 +29347,16 @@ __metadata:
languageName: node
linkType: hard
+"react-native-lightbox-v2@npm:^0.9.0":
+ version: 0.9.0
+ resolution: "react-native-lightbox-v2@npm:0.9.0"
+ peerDependencies:
+ react: ">=16.8.0"
+ react-native: ">=0.61.0"
+ checksum: ffedc7e58348ca28ea3a20baa7fa7d4b6cb493473e5f36a701aca22dc59c47606d64d667bb64ac7a1c2c1af686fcd99cd2883bd713797664517f0ed98ad03929
+ languageName: node
+ linkType: hard
+
"react-native-linear-gradient@npm:^2.6.2":
version: 2.6.2
resolution: "react-native-linear-gradient@npm:2.6.2"
@@ -35642,6 +35675,16 @@ __metadata:
languageName: node
linkType: hard
+"yarn@npm:^1.22.22":
+ version: 1.22.22
+ resolution: "yarn@npm:1.22.22"
+ bin:
+ yarn: bin/yarn.js
+ yarnpkg: bin/yarn.js
+ checksum: 59aeef5ccfd3347287f939448e6d3594f0a42f74025b9bdc2a277641c1d4070c07a38b6e7c35e695f77410b0269a5a43c78535786564f86f39c9f781e6efa311
+ languageName: node
+ linkType: hard
+
"yauzl@npm:^2.10.0, yauzl@npm:^2.4.2":
version: 2.10.0
resolution: "yauzl@npm:2.10.0"