allowed card to be swiped above the header

artsy · Dec 17, 2024 · efcb344 · efcb344
1 parent 7e3c779
commit efcb344
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/src/app/Components/FancySwiper/FancySwiperCard.tsx b/src/app/Components/FancySwiper/FancySwiperCard.tsx
@@ -1,5 +1,5 @@
 import { memo } from "react"
-import { Animated, GestureResponderHandlers, StyleSheet } from "react-native"
+import { Animated, GestureResponderHandlers } from "react-native"
 import { OFFSET_X } from "./FancySwiper"
 
 export interface Card {
@@ -27,8 +27,7 @@ export const FancySwiperCard = memo(
     return (
       <Animated.View
         style={[
-          StyleSheet.absoluteFillObject,
-          { zIndex: -1, backgroundColor: "white" },
+          { position: "absolute", zIndex: -1, backgroundColor: "white" },
           isTopCard && animatedStyle,
         ]}
         {...rest}

diff --git a/src/app/Navigation/routes.tsx b/src/app/Navigation/routes.tsx
@@ -61,6 +61,7 @@ import { MakeOfferModalQueryRenderer } from "app/Scenes/Inbox/Components/Convers
 import { PurchaseModalQueryRenderer } from "app/Scenes/Inbox/Components/Conversations/PurchaseModal"
 import { ConversationQueryRenderer } from "app/Scenes/Inbox/Screens/Conversation"
 import { ConversationDetailsQueryRenderer } from "app/Scenes/Inbox/Screens/ConversationDetails"
+import { InfiniteDiscoveryView } from "app/Scenes/InfiniteDiscovery/InfiniteDiscovery"
 import { MyAccountQueryRenderer } from "app/Scenes/MyAccount/MyAccount"
 import { MyAccountDeleteAccountQueryRenderer } from "app/Scenes/MyAccount/MyAccountDeleteAccount"
 import { MyAccountEditEmailQueryRenderer } from "app/Scenes/MyAccount/MyAccountEditEmail"
@@ -781,13 +782,13 @@ export const artsyDotNetRoutes = defineRoutes([
   {
     path: "/infinite-discovery",
     name: "InfiniteDiscovery",
-    Component: InboxQueryRenderer,
+    Component: InfiniteDiscoveryView,
     options: {
+      hidesBottomTabs: true,
       screenOptions: {
         headerShown: false,
       },
     },
-    Queries: [InboxScreenQuery],
   },
   {
     path: "/inquiry/:artworkID",

diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
@@ -1,4 +1,13 @@
-import { Button, Flex, Image, Screen, Text, Touchable, useTheme } from "@artsy/palette-mobile"
+import {
+  Button,
+  Flex,
+  Image,
+  Screen,
+  Text,
+  Touchable,
+  useScreenDimensions,
+  useTheme,
+} from "@artsy/palette-mobile"
 import { FancySwiper } from "app/Components/FancySwiper/FancySwiper"
 import { Card } from "app/Components/FancySwiper/FancySwiperCard"
 import { InfiniteDiscoveryContext } from "app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext"
@@ -14,6 +23,7 @@ export const InfiniteDiscoveryView: React.FC = () => {
 
 export const InfiniteDiscovery: React.FC = () => {
   const { color } = useTheme()
+  const { width: screenWidth } = useScreenDimensions()
 
   const artworks = InfiniteDiscoveryContext.useStoreState((state) => state.artworks)
   const currentArtwork = InfiniteDiscoveryContext.useStoreState((state) => state.currentArtwork)
@@ -52,7 +62,11 @@ export const InfiniteDiscovery: React.FC = () => {
             <Button variant="outlineGray">Follow</Button>
           </Flex>
           <Flex alignItems="center">
-            <Image src="https://d32dm0rphc51dk.cloudfront.net/Wor_U4FSvsAmEAEFj1iyVg/medium.jpg" />
+            <Image
+              src="https://d32dm0rphc51dk.cloudfront.net/Wor_U4FSvsAmEAEFj1iyVg/medium.jpg"
+              width={screenWidth}
+              aspectRatio={0.79}
+            />
           </Flex>
           <Flex flexDirection="row" justifyContent="space-between" testID="artwork-info">
             <Flex>
@@ -76,21 +90,23 @@ export const InfiniteDiscovery: React.FC = () => {
 
   return (
     <Screen>
-      <Screen.Header
-        title="Discovery"
-        leftElements={
-          <Touchable onPress={handleBackPressed}>
-            <Text variant="xs">Back</Text>
-          </Touchable>
-        }
-        hideLeftElements={!canGoBack}
-        rightElements={
-          <Touchable onPress={handleExitPressed}>
-            <Text variant="xs">Exit</Text>
-          </Touchable>
-        }
-      />
       <Screen.Body fullwidth>
+        <Flex zIndex={-100}>
+          <Screen.Header
+            title="Discovery"
+            leftElements={
+              <Touchable onPress={handleBackPressed}>
+                <Text variant="xs">Back</Text>
+              </Touchable>
+            }
+            hideLeftElements={!canGoBack}
+            rightElements={
+              <Touchable onPress={handleExitPressed}>
+                <Text variant="xs">Exit</Text>
+              </Touchable>
+            }
+          />
+        </Flex>
         <FancySwiper
           cards={artworkCards}
           hideActionButtons