fix lightbox iOS issues, when opening an image with unknown aspect ratio

src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx

@@ -170,8 +170,6 @@ const ImageItem = ({
       width: screenSize.width,
       maxHeight: screenSize.height,
       alignSelf: 'center',
-      aspectRatio: imageAspect ?? 1 /* force onLoad */,
-      opacity: imageAspect === undefined ? 0 : 1,
     }
   })
 
@@ -180,11 +178,19 @@ const ImageItem = ({
     return {
       transform: cropContentTransform,
       width: '100%',
-      aspectRatio: imageAspect ?? 1 /* force onLoad */,
-      opacity: imageAspect === undefined ? 0 : 1,
     }
   })
 
+  /*
+   * When the aspect ratio is unknown until onLoad fires, these layout props
+   * change after mount. They must be applied via a React render rather than
+   * useAnimatedStyle
+   */
+  const imageLayoutStyle = {
+    aspectRatio: imageAspect ?? 1 /* force onLoad */,
+    opacity: imageAspect === undefined ? 0 : 1,
+  }
+
   const [showLoader, setShowLoader] = useState(false)
   const [hasLoaded, setHasLoaded] = useState(false)
   useAnimatedReaction(
@@ -225,8 +231,8 @@ const ImageItem = ({
         {showLoader && (
           <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
         )}
-        <Animated.View style={imageCropStyle}>
-          <Animated.View style={imageStyle}>
+        <Animated.View style={[imageCropStyle, imageLayoutStyle]}>
+          <Animated.View style={[imageStyle, imageLayoutStyle]}>
             <Image
               contentFit="contain"
               source={{uri: imageSrc.uri}}