Preserve shape in lightbox

src/screens/Profile/Header/Shell.tsx

@@ -72,6 +72,7 @@ let ProfileHeaderShell = ({
               height: 1000,
               width: 1000,
             },
+            shape: 'circle',
           },
         ],
         index: 0,

src/view/com/lightbox/ImageViewing/@types/index.ts

@@ -24,4 +24,5 @@ export type ImageSource = {
   thumbRect: MeasuredDimensions | null
   alt?: string
   dimensions: Dimensions | null
+  shape: 'circle' | 'rect' | 'rounded-rect'
 }

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

@@ -297,7 +297,7 @@ const ImageItem = ({
       ref={containerRef}
       // Necessary to make opacity work for both children together.
       renderToHardwareTextureAndroid
-      style={[styles.container, animatedStyle]}>
+      style={[styles.container, animatedStyle, {}]}>
       <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
       <GestureDetector gesture={composedGesture}>
         <Image
@@ -305,7 +305,16 @@ const ImageItem = ({
           source={{uri: imageSrc.uri}}
           placeholderContentFit="contain"
           placeholder={{uri: imageSrc.thumbUri}}
-          style={styles.image}
+          style={{
+            width: SCREEN.width,
+            height: imageAspect ? SCREEN.width / imageAspect : undefined,
+            borderRadius:
+              imageSrc.shape === 'circle'
+                ? SCREEN.width / 2
+                : imageSrc.shape === 'rounded-rect'
+                ? 20
+                : 0,
+          }}
           accessibilityLabel={imageSrc.alt}
           accessibilityHint=""
           accessibilityIgnoresInvertColors
@@ -321,9 +330,7 @@ const styles = StyleSheet.create({
     width: SCREEN.width,
     height: SCREEN.height,
     overflow: 'hidden',
-  },
-  image: {
-    flex: 1,
+    justifyContent: 'center',
   },
   loading: {
     position: 'absolute',

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

@@ -137,6 +137,12 @@ const ImageItem = ({
           style={{
             width: SCREEN.width,
             height: imageAspect ? SCREEN.width / imageAspect : undefined,
+            borderRadius:
+              imageSrc.shape === 'circle'
+                ? SCREEN.width / 2
+                : imageSrc.shape === 'rounded-rect'
+                ? 20
+                : 0,
           }}
           accessibilityLabel={imageSrc.alt}
           accessibilityHint=""

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -87,6 +87,7 @@ export function ProfileSubpageHeader({
               height: 1000,
               width: 1000,
             },
+            shape: 'rounded-rect',
           },
         ],
         index: 0,

src/view/com/util/post-embeds/index.tsx

@@ -155,6 +155,7 @@ export function PostEmbeds({
           images: items.map((item, i) => ({
             ...item,
             thumbRect: thumbRects[i] ?? null,
+            shape: 'rect',
           })),
           index,
         })