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"