improve mobile cast images

mobile/src/components/feed/Cast.tsx

@@ -5,6 +5,8 @@ import { formatDistance } from 'date-fns';
 import { useCallback } from 'react';
 import { Text, View } from 'react-native';
 
+import { CastEmbeds } from './CastEmbeds';
+
 type CastProps = {
   cast: CastType;
 };
@@ -22,7 +24,7 @@ export function Cast({ cast }: CastProps) {
   return (
     <View className="w-full flex-row border-[0.25px] border-y border-gray-200 p-4">
       <Avatar user={cast.user} />
-      <View className="ml-2 mt-1 shrink grow flex-col ">
+      <View className="ml-2 mt-1 shrink grow flex-col">
         <Text ellipsizeMode="tail" numberOfLines={1}>
           <Text className="font-bold" onPress={pushProfile}>
             {cast.user.display_name}
@@ -35,6 +37,7 @@ export function Cast({ cast }: CastProps) {
         <View className="flex-row">
           <Text className="flex-1 flex-wrap">{cast.text}</Text>
         </View>
+        <CastEmbeds embeds={cast.embeds} />
       </View>
     </View>
   );

mobile/src/components/feed/CastEmbeds.tsx

@@ -0,0 +1,22 @@
+import { Embeds } from '@shared/types/models';
+import { View } from 'react-native';
+
+import { CastImageEmbed } from './CastImageEmbed';
+
+type CastEmbedsProps = {
+  embeds: Embeds;
+};
+
+export function CastEmbeds({ embeds }: CastEmbedsProps) {
+  if (embeds.images.length === 0) {
+    return null;
+  }
+
+  return (
+    <View className="mt-2">
+      {embeds.images.map((url) => (
+        <CastImageEmbed key={url} url={url} />
+      ))}
+    </View>
+  );
+}

mobile/src/components/feed/CastImageEmbed.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+
+import { Loader } from '../loader/Loader';
+
+type CastImageEmbedProps = {
+  url: string;
+};
+
+export function CastImageEmbed({ url }: CastImageEmbedProps) {
+  const [error, setError] = useState<unknown>();
+  const [size, setSize] = useState<{ width: number; height: number }>();
+  const [containerWidth, setContainerWidth] = useState<number>();
+
+  useEffect(() => {
+    Image.getSize(url, (width, height) => {
+      setSize({ width, height });
+    });
+  }, [url]);
+
+  if (error) {
+    return null;
+  }
+
+  if (!size) {
+    return <Loader />;
+  }
+
+  return (
+    <View
+      className="overflow-hidden rounded-lg border-[0.25px] border-gray-200"
+      onLayout={(e) => {
+        setContainerWidth(e.nativeEvent.layout.width);
+      }}
+    >
+      {containerWidth && (
+        <Image
+          className="max-w-full"
+          resizeMode="cover"
+          source={{ uri: url }}
+          width={size.width}
+          height={containerWidth / (size.width / size.height)}
+          onError={setError}
+        />
+      )}
+    </View>
+  );
+}