:feat google search image

components/discovery/PersonRow.tsx

@@ -1,10 +1,15 @@
 import { FontAwesome } from "@expo/vector-icons";
-import { useNavigation } from "@react-navigation/native";
 import { router } from "expo-router";
 import React from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 
-export type PersonLite = { id?: number; personId?: number; name?: string; birthDate?: string | null; imageUrl?: string | null };
+export type PersonLite = {
+  id?: number;
+  personId?: number;
+  name?: string;
+  birthDate?: string | null;
+  imageUrl?: string | null;
+};
 
 const calcAge = (birthDate?: string | null): number | null => {
   if (!birthDate) return null;
@@ -22,10 +27,7 @@ type Props = {
   onPress?: () => void;
 };
 
-
-
-export default function PersonRow({ person, onPress }: Props) {
-  const navigation = useNavigation();
+export default function PersonRow({ person }: Props) {
   const age = calcAge(person.birthDate);
   const id = person.personId ?? person.id;
 
@@ -36,7 +38,8 @@ export default function PersonRow({ person, onPress }: Props) {
         pathname: "/participant",
         params: { participantId: String(id), name: person.name },
       });
-    }, []
+    },
+    [person.name]
   );
 
   return (
@@ -50,7 +53,10 @@ export default function PersonRow({ person, onPress }: Props) {
         <FontAwesome name="user" size={22} color="#ccc" />
       </View>
       <View style={{ flex: 1 }}>
-        <Text style={styles.personName}>{person.name || "Unbekannt"}{age != null ? ` (${age})` : ""}</Text>
+        <Text style={styles.personName}>
+          {person.name || "Unbekannt"}
+          {age != null ? ` (${age})` : ""}
+        </Text>
         {/* <Text style={styles.personMeta}>aus: unterschiedlichen Shows</Text> */}
       </View>
       <FontAwesome name="chevron-right" size={14} color="#888" />
@@ -59,8 +65,25 @@ export default function PersonRow({ person, onPress }: Props) {
 }
 
 const styles = StyleSheet.create({
-  personRow: { width: "100%", flexDirection: "row", alignItems: "center", backgroundColor: "#1b1e2b", borderRadius: 10, paddingHorizontal: 10, paddingVertical: 10, marginBottom: 8 },
-  avatarCircle: { width: 40, height: 40, borderRadius: 999, backgroundColor: "#2a2f45", alignItems: "center", justifyContent: "center", marginRight: 10 },
+  personRow: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#1b1e2b",
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    marginBottom: 8,
+  },
+  avatarCircle: {
+    width: 40,
+    height: 40,
+    borderRadius: 999,
+    backgroundColor: "#2a2f45",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10,
+  },
   personName: { color: "white", fontSize: 16, fontWeight: "600" },
   personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
 });