From 8e85b79aee65be58d9c27147d04d3cb28bccf3d3 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Wed, 21 Jan 2026 10:00:07 +0100
Subject: [PATCH] Show multiple URLs in mobile app (#1465)

---
 apps/mobile-app/app/(tabs)/items/[id].tsx | 61 ++++++++++++++++-------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/apps/mobile-app/app/(tabs)/items/[id].tsx b/apps/mobile-app/app/(tabs)/items/[id].tsx
index 9b5d0c4d1..094a25220 100644
--- a/apps/mobile-app/app/(tabs)/items/[id].tsx
+++ b/apps/mobile-app/app/(tabs)/items/[id].tsx
@@ -128,13 +128,48 @@ export default function ItemDetailsScreen() : React.ReactNode {
 
   // Extract URL fields for display
   const urlFields = item.Fields.filter(field => field.FieldType === FieldTypes.URL && field.Value);
-  const firstUrl = urlFields.length > 0
-    ? (Array.isArray(urlFields[0].Value) ? urlFields[0].Value[0] : urlFields[0].Value)
-    : null;
 
   // Get email for EmailPreview
   const email = getFieldValue(item, FieldKey.LoginEmail);
 
+  /**
+   * Render all URL values from URL fields.
+   */
+  const renderUrls = (): React.ReactNode => {
+    if (urlFields.length === 0) {
+      return null;
+    }
+
+    return (
+      <View style={styles.urlContainer}>
+        {urlFields.flatMap((urlField) => {
+          // Handle both single string and array of strings
+          const urlValues = Array.isArray(urlField.Value) ? urlField.Value : [urlField.Value];
+
+          return urlValues.map((urlValue, idx) => {
+            const isValidUrl = /^https?:\/\//i.test(urlValue);
+            const key = `${urlField.FieldKey}-${idx}`;
+
+            return isValidUrl ? (
+              <RobustPressable
+                key={key}
+                onPress={() => Linking.openURL(urlValue)}
+              >
+                <Text style={[styles.serviceUrl, { color: colors.primary }]}>
+                  {urlValue}
+                </Text>
+              </RobustPressable>
+            ) : (
+              <Text key={key} style={[styles.serviceUrl, { color: colors.textMuted }]}>
+                {urlValue}
+              </Text>
+            );
+          });
+        })}
+      </View>
+    );
+  };
+
   return (
     <ThemedContainer>
       <ThemedScrollView>
@@ -144,21 +179,7 @@ export default function ItemDetailsScreen() : React.ReactNode {
             <ThemedText type="title" style={styles.serviceName}>
               {item.Name}
             </ThemedText>
-            {firstUrl && (
-              /^https?:\/\//i.test(firstUrl) ? (
-                <RobustPressable
-                  onPress={() => Linking.openURL(firstUrl)}
-                >
-                  <Text style={[styles.serviceUrl, { color: colors.primary }]}>
-                    {firstUrl}
-                  </Text>
-                </RobustPressable>
-              ) : (
-                <Text style={styles.serviceUrl}>
-                  {firstUrl}
-                </Text>
-              )
-            )}
+            {renderUrls()}
           </View>
         </ThemedView>
         <EmailPreview email={email} />
@@ -208,4 +229,8 @@ const styles = StyleSheet.create({
   serviceUrl: {
     fontSize: 14,
   },
+  urlContainer: {
+    gap: 2,
+    marginTop: 2,
+  },
 });
\ No newline at end of file