fix(ui): ImageBubble cropping issue

src/screens/chat-screen/components/message-components/ComposedBubble.tsx

@@ -97,8 +97,10 @@ export const ComposedBubble = (props: ComposedBubbleProps) => {
                 <Animated.View key={attachment.fileType + index} style={tailwind.style('my-2')}>
                   <ImageBubbleContainer
                     imageSrc={attachment.dataUrl}
-                    width={300 - 24 - (isPrivate ? 13 : 0)}
-                    height={215}
+                    imageWidth={attachment.width}
+                    imageHeight={attachment.height}
+                    displayMaxWidth={300 - 24 - (isPrivate ? 13 : 0)}
+
                   />
                 </Animated.View>
               );

src/screens/chat-screen/components/message-components/ImageBubble.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { Image } from 'expo-image';
+import { Galeria } from '@nandorojo/galeria';
+import { tailwind } from '@/theme';
+
+/**
+ * ImageBubble component for displaying images in chat messages.
+ * Automatically calculates aspect ratio from backend dimensions or detects on load,
+ * respecting max width constraints while maintaining proper image proportions.
+ */
+
+type ImageCellProps = {
+  imageSrc: string;
+  imageWidth?: number; 
+  imageHeight?: number;
+};
+
+type ImageContainerProps = ImageCellProps & {
+  displayMaxWidth?: number;
+};
+
+export const ImageBubbleContainer = (props: ImageContainerProps) => {
+  const { 
+    imageSrc, 
+    imageWidth, 
+    imageHeight, 
+    displayMaxWidth = 300 
+  } = props;
+
+  const [detectedSize, setDetectedSize] = useState<{width: number, height: number} | null>(null);
+
+  const actualWidth = imageWidth ?? detectedSize?.width;
+  const actualHeight = imageHeight ?? detectedSize?.height;
+
+  const renderWidth = actualWidth 
+    ? Math.min(actualWidth, displayMaxWidth) 
+    : displayMaxWidth;
+
+  const aspectRatio = (actualWidth && actualHeight) 
+    ? (actualWidth / actualHeight) 
+    : 1;
+
+  return (
+    <Galeria urls={[imageSrc]}>
+      <Galeria.Image>
+        <Image
+          source={{ uri: imageSrc }}
+          contentFit="cover"
+          onLoad={(e) => {
+            if (!imageWidth || !imageHeight) {
+              setDetectedSize({
+                width: e.source.width,
+                height: e.source.height,
+              });
+            }
+          }}
+          style={[
+            tailwind.style('bg-gray-200 overflow-hidden rounded-lg'),
+            { 
+              width: renderWidth,         
+              aspectRatio: aspectRatio,   
+            },
+          ]}
+        />
+      </Galeria.Image>
+    </Galeria>
+  );
+};
+
+export const ImageBubble = (props: ImageCellProps) => {
+  return <ImageBubbleContainer {...props} />;
+};

src/types/Message.ts

@@ -38,6 +38,8 @@ export type ImageMetadata = {
   fallbackTitle: string;
   coordinatesLat: number;
   coordinatesLong: number;
+  width?: number;
+  height?: number;
 };
 
 export type MessageContentAttributes = {