Animate lightbox in and out

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -302,11 +302,6 @@ const ImageItem = ({
       committedTransform.value = withClampedSpring(finalTransform)
     })
 
-  const innerStyle = useAnimatedStyle(() => ({
-    width: '100%',
-    aspectRatio: imageAspect,
-  }))
-
   const composedGesture = isScrollViewBeingDragged
     ? // If the parent is not at rest, provide a no-op gesture.
       Gesture.Manual()
@@ -317,12 +312,9 @@ const ImageItem = ({
         singleTap,
       )
 
-  const type = imageSrc.type
-  const borderRadius =
-    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
   return (
     <GestureDetector gesture={composedGesture}>
-      <Animated.View style={imageStyle} renderToHardwareTextureAndroid>
+      <Animated.View renderToHardwareTextureAndroid>
         <Animated.View
           ref={containerRef}
           // Necessary to make opacity work for both children together.
@@ -330,11 +322,11 @@ const ImageItem = ({
           style={[styles.container, animatedStyle]}>
           <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
           <AnimatedImage
-            contentFit="contain"
+            contentFit="cover"
             source={{uri: imageSrc.uri}}
-            placeholderContentFit="contain"
+            placeholderContentFit="cover"
             placeholder={{uri: imageSrc.thumbUri}}
-            style={[innerStyle, {borderRadius}]}
+            style={imageStyle}
             accessibilityLabel={imageSrc.alt}
             accessibilityHint=""
             accessibilityIgnoresInvertColors

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -18,7 +18,6 @@ import Animated, {
   measure,
   runOnJS,
   useAnimatedRef,
-  useAnimatedStyle,
 } from 'react-native-reanimated'
 import {useSafeAreaFrame} from 'react-native-safe-area-context'
 import {Image, ImageStyle} from 'expo-image'
@@ -67,16 +66,6 @@ const ImageItem = ({
       : 1,
   )
 
-  const animatedStyle = useAnimatedStyle(() => {
-    const screenSize = measure(safeAreaRef) ?? screenSizeDelayedForJSThreadOnly
-    return {
-      width: screenSize.width,
-      maxHeight: screenSize.height,
-      alignSelf: 'center',
-      aspectRatio: imageAspect,
-    }
-  })
-
   const scrollHandler = useAnimatedScrollHandler({
     onScroll(e) {
       const nextIsScaled = e.zoomScale > 1
@@ -143,9 +132,6 @@ const ImageItem = ({
     singleTap,
   )
 
-  const type = imageSrc.type
-  const borderRadius =
-    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
   return (
     <GestureDetector gesture={composedGesture}>
       <Animated.ScrollView
@@ -158,15 +144,14 @@ const ImageItem = ({
         onScroll={scrollHandler}
         bounces={scaled}
         bouncesZoom={true}
-        style={imageStyle}
         centerContent>
         <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
         <AnimatedImage
-          contentFit="contain"
+          contentFit="cover"
           source={{uri: imageSrc.uri}}
-          placeholderContentFit="contain"
+          placeholderContentFit="cover"
           placeholder={{uri: imageSrc.thumbUri}}
-          style={[animatedStyle, {borderRadius}]}
+          style={imageStyle}
           accessibilityLabel={imageSrc.alt}
           accessibilityHint=""
           enableLiveTextInteraction={showControls && !scaled}