pause

src/app/article/[id].tsx

@@ -13,6 +13,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SymbolView } from 'expo-symbols';
 import { useLocalSearchParams } from 'expo-router';
+import RenderHtml from 'react-native-render-html';
 
 import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
@@ -81,9 +82,46 @@ export default function ArticleDetailScreen() {
     });
   };
 
+  const extractImagesFromHtml = (html: string): string[] => {
+    const imgRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/gi;
+    const images: string[] = [];
+    let match;
+    while ((match = imgRegex.exec(html)) !== null) {
+      if (match[1] && !images.includes(match[1])) {
+        images.push(match[1]);
+      }
+    }
+    return images;
+  };
+
+  const getGalleryImages = (): string[] => {
+    const images: string[] = [];
+    if (article?.content) {
+      images.push(...extractImagesFromHtml(article.content));
+    }
+    if (article?.description) {
+      images.push(...extractImagesFromHtml(article.description));
+    }
+    return [...new Set(images)];
+  };
+
+  const galleryImages = getGalleryImages();
+
   const renderContent = (content?: string) => {
     if (!content) return null;
     
+    const isHtml = /<[a-z][\s\S]*>/i.test(content);
+    
+    if (isHtml) {
+      return (
+        <RenderHtml
+          contentWidth={350}
+          source={{ html: content }}
+          baseStyle={styles.content}
+        />
+      );
+    }
+    
     return (
       <ThemedText style={styles.content}>
         {content}
@@ -169,6 +207,26 @@ export default function ArticleDetailScreen() {
           </Pressable>
         </ThemedView>
 
+        {galleryImages.length > 0 && (
+          <ThemedView style={styles.gallery}>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.galleryContent}
+            >
+              {galleryImages.map((imgUrl, index) => (
+                <Pressable key={index} onPress={() => Linking.openURL(imgUrl)}>
+                  <Image
+                    source={{ uri: imgUrl }}
+                    style={styles.galleryImage}
+                    resizeMode="cover"
+                  />
+                </Pressable>
+              ))}
+            </ScrollView>
+          </ThemedView>
+        )}
+
         {article.description && (
           <ThemedView style={styles.section}>
             <ThemedText type="default" style={styles.description}>
@@ -244,6 +302,18 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  gallery: {
+    paddingVertical: Spacing.two,
+  },
+  galleryContent: {
+    paddingHorizontal: Spacing.four,
+    gap: Spacing.two,
+  },
+  galleryImage: {
+    width: 200,
+    height: 150,
+    borderRadius: Spacing.two,
+  },
   section: {
     padding: Spacing.four,
     paddingTop: 0,