fix(nft-videos): prevent app crash on nft video loads (#5566)

### Description

This prevents the app from crashing when attempting to load NFT videos
on iOS. It also adjusts the layout for iOS which previously used a
header workaround prior to the changes in #5565.

### Test plan

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

### Related issues

- Fixes ACT-1230

### Backwards compatibility

Yes

### Network scalability

N/A

ios/Podfile

@@ -24,6 +24,13 @@ require_relative "../node_modules/react-native/scripts/react_native_pods"
 require_relative "../node_modules/@react-native-community/cli-platform-ios/native_modules"
 require_relative "../node_modules/react-native-permissions/scripts/setup"
 
+# Code to be added for react-native-video/Video
+# https://github.com/TheWidlarzGroup/react-native-video/issues/3737
+MIN_IOS_OVERRIDE = '13.0'
+if Gem::Version.new(MIN_IOS_OVERRIDE) > Gem::Version.new(min_ios_version_supported)
+  min_ios_version_supported = MIN_IOS_OVERRIDE
+end
+
 platform :ios, min_ios_version_supported
 prepare_react_native_project! 
 

ios/Podfile.lock

@@ -564,6 +564,9 @@ PODS:
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
     - react-native-video/Video (= 6.1.2)
+  - react-native-video/Video (6.1.2):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
   - react-native-webview (13.8.6):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -1271,6 +1274,6 @@ SPEC CHECKSUMS:
   TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
   Yoga: fb40589bb1a96e2573358586fc2903b3811ce254
 
-PODFILE CHECKSUM: 81b64061bfc811164c7f86731fc3327e217c8ce4
+PODFILE CHECKSUM: b2bc3d3413b41af3eb01acd7ffcf28a91b7e0bfb
 
 COCOAPODS: 1.15.2

src/nfts/NftMedia.tsx

@@ -1,4 +1,3 @@
-import { useHeaderHeight } from '@react-navigation/elements'
 import React, { useEffect, useState } from 'react'
 import { Platform, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
@@ -71,7 +70,6 @@ export default function NftMedia({
   const [status, setStatus] = useState<Status>(!nft.metadata ? 'error' : 'loading')
   const [scaledHeight, setScaledHeight] = useState(DEFAULT_HEIGHT)
   const [reloadAttempt, setReloadAttempt] = useState(0)
-  const headerHeight = useHeaderHeight()
 
   const fetchingNfts = useSelector(nftsLoadingSelector)
 
@@ -141,10 +139,10 @@ export default function NftMedia({
             }}
             key={`${nft.contractAddress}-${nft.tokenId}-${reloadAttempt}`}
             style={{
-              height: shouldAutoScaleHeight ? scaledHeight : height,
+              height: Platform.OS === 'android' ? scaledHeight : height,
               width: variables.width,
-              marginTop: Platform.OS === 'ios' ? headerHeight / 2 : 0, // Otherwise the fullscreen option is hidden on iOS
               zIndex: 1, // Make sure the video player is in front of the loading skeleton
+              marginTop: 0,
             }}
             onLoad={({ naturalSize }) => {
               const aspectRatio = naturalSize.width / naturalSize.height