From 9d47dfcf8856443ccab083e8d6e3e05eb2436c3d Mon Sep 17 00:00:00 2001
From: Tom McGuire <Mcgtom10@gmail.com>
Date: Wed, 26 Jun 2024 13:10:49 -0700
Subject: [PATCH] fix(nft-video): initial load height on iOS (#5580)

### Description

Follow up to #5566 where iOS's initial load of iOS could obscure the
full screen controls. This also cleans up the navigation options and
moves them into `src/nfts/NftsInfoCarousel.tsx`.

| iOS Before | iOS After |
| ----- | ----- |
| <video
src="https://github.com/valora-inc/wallet/assets/26950305/f884e901-31d4-42e8-b2f7-b1b6dacb07ca"
/> | <video
src="https://github.com/valora-inc/wallet/assets/26950305/b55776a9-7e37-42fa-a261-e4e2d95bbb97"
/> |

### Test plan

- [x] Tested locally on iOS
- [x] Tested locally on Android

### Related issues

- N/A

### Backwards compatibility

Yes

### Network scalability

N/A
---
 src/navigator/Navigator.tsx   |  6 +-----
 src/nfts/NftMedia.tsx         |  5 ++---
 src/nfts/NftsInfoCarousel.tsx | 20 +++++++++++++++++++-
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/navigator/Navigator.tsx b/src/navigator/Navigator.tsx
index f291901c45c..2d4fe076882 100644
--- a/src/navigator/Navigator.tsx
+++ b/src/navigator/Navigator.tsx
@@ -569,11 +569,7 @@ const nftScreens = (Navigator: typeof Stack) => (
     <Navigator.Screen
       name={Screens.NftsInfoCarousel}
       component={NftsInfoCarousel}
-      options={{
-        ...headerWithBackButton,
-        animation: 'slide_from_right',
-        animationDuration: 130,
-      }}
+      options={NftsInfoCarousel.navigationOptions as NativeStackNavigationOptions}
     />
   </>
 )
diff --git a/src/nfts/NftMedia.tsx b/src/nfts/NftMedia.tsx
index 500e3099cf7..545f41af0c2 100644
--- a/src/nfts/NftMedia.tsx
+++ b/src/nfts/NftMedia.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Platform, View } from 'react-native'
+import { View } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import Video, { ResizeMode } from 'react-native-video'
 import { NftEvents } from 'src/analytics/Events'
@@ -139,10 +139,9 @@ export default function NftMedia({
             }}
             key={`${nft.contractAddress}-${nft.tokenId}-${reloadAttempt}`}
             style={{
-              height: Platform.OS === 'android' ? scaledHeight : height,
+              height: shouldAutoScaleHeight ? scaledHeight : height,
               width: variables.width,
               zIndex: 1, // Make sure the video player is in front of the loading skeleton
-              marginTop: 0,
             }}
             onLoad={({ naturalSize }) => {
               const aspectRatio = naturalSize.width / naturalSize.height
diff --git a/src/nfts/NftsInfoCarousel.tsx b/src/nfts/NftsInfoCarousel.tsx
index b076850f3f1..c460b43a17b 100644
--- a/src/nfts/NftsInfoCarousel.tsx
+++ b/src/nfts/NftsInfoCarousel.tsx
@@ -1,3 +1,4 @@
+import { useHeaderHeight } from '@react-navigation/elements'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -6,6 +7,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import Touchable from 'src/components/Touchable'
 import ImageErrorIcon from 'src/icons/ImageErrorIcon'
 import OpenLinkIcon from 'src/icons/OpenLinkIcon'
+import { headerWithBackButton } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
@@ -106,6 +108,7 @@ export default function NftsInfoCarousel({ route }: Props) {
   const { nfts, networkId } = route.params
   const [activeNft, setActiveNft] = useState<Nft | null>(nfts[0] ?? null)
   const { t } = useTranslation()
+  const headerHeight = useHeaderHeight()
 
   const blockExplorerUri = useMemo(() => {
     if (
@@ -161,7 +164,11 @@ export default function NftsInfoCarousel({ route }: Props) {
   }
 
   return (
-    <SafeAreaView edges={[]} style={styles.safeAreaView} testID="NftsInfoCarousel">
+    <SafeAreaView
+      style={[styles.safeAreaView, { paddingTop: headerHeight }]}
+      edges={[]}
+      testID="NftsInfoCarousel"
+    >
       <ScrollView>
         {/* Main Nft Video or Image */}
         <NftMedia
@@ -233,6 +240,17 @@ export default function NftsInfoCarousel({ route }: Props) {
   )
 }
 
+NftsInfoCarousel.navigationOptions = () => ({
+  ...headerWithBackButton,
+  headerTransparent: true,
+  headerShown: true,
+  headerStyle: {
+    backgroundColor: 'transparent',
+  },
+  animation: 'slide_from_right',
+  animationDuration: 130,
+})
+
 const styles = StyleSheet.create({
   attributeText: {
     ...fontStyles.regular,