🚧 Adding the list view page, but has to be modified

app/(tabs)/_layout.tsx

@@ -7,8 +7,8 @@ import { HapticTab } from '@/components/haptic-tab';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Colors } from '@/constants/theme';
 import { useColorScheme } from '@/hooks/use-color-scheme';
-import TabTwoScreen from './explore';
-import HomeScreen from './index';
+import TabTwoScreen from './index';
+import HomeScreen from './bonjourFL';
 
 const Tabs = createBottomTabNavigator();
 
@@ -23,10 +23,10 @@ export default function TabLayout() {
         tabBarButton: HapticTab,
       }}>
       <Tabs.Screen
-        name="index"
+        name="bonjourFL"
         component={HomeScreen}
         options={{
-          title: 'Home',
+          title: 'Bonjour',
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
         }}
       />

app/(tabs)/bonjourFL.tsx

@@ -0,0 +1,148 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useMemo, useState } from 'react';
+import { Button, FlatList, Image, StyleSheet, Text, TextInput, View } from 'react-native';
+import rawConcerts from '../../data/concerts.json';
+
+type Concert = {
+  group: string;
+  date: string;
+  nationality: string;
+  location: string;
+  price: number;
+  ticketsLeft: number;
+  Image: string;
+  favorite: boolean;
+};
+
+export default function BonjourScreen() {
+
+  const router = useRouter();
+  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
+  const [search, setSearch] = useState('');
+
+
+  const concertsData: Concert[] = Array.isArray(rawConcerts)
+    ? (rawConcerts as Concert[])
+    : [];
+
+  const filteredData = useMemo(() => {
+    if (!Array.isArray(concertsData)) return [];
+    const q = search.trim().toLowerCase();
+    if (!q) return concertsData;
+    return concertsData.filter(
+      (item) => !!item && (item.group ?? '').toLowerCase().includes(q)
+    );
+  }, [concertsData, search]);
+
+
+  const renderItem = ({ item, index }: { item?: Concert; index: number })  => {
+    if (!item) {
+      // optionnel : afficher un placeholder pour debug
+      // return <View style={styles.card}><Text>Item manquant</Text></View>;
+      return null;
+    }
+    return(
+    <View style={styles.card}>
+      <Image source={{ uri: item.Image }} style={styles.image} />
+      <View style={styles.info}>
+        <Text style={styles.group}>{item.group}</Text>
+        <Text>{item.date}</Text>
+        <Text>{item.location}</Text>
+        <Text>Prix : {item.price} €</Text>
+        <Text>Places restantes : {item.ticketsLeft}</Text>
+      </View>
+    </View>);
+  };
+
+  return(
+    <View style={styles.container}>
+      <FlatList
+        data={filteredData}
+        renderItem={renderItem}
+        keyExtractor={(_, index) => index.toString()}
+        contentContainerStyle={{ paddingBottom: 40 }}
+        ListHeaderComponent={
+          <View style={styles.header}>
+            <Text style={styles.text}>
+              Bonjour {prenom} {nom}
+            </Text>
+
+            {/* 🔍 Champ de recherche */}
+            <TextInput
+              style={styles.input}
+              placeholder="Rechercher un groupe..."
+              value={search}
+              onChangeText={setSearch}
+            />
+          </View>
+        }
+        ListEmptyComponent={
+          <Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
+        }
+      />
+
+      <View style={styles.footer}>
+        <Button title="Retour" onPress={() => router.back()} />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    marginTop: 60,
+    marginBottom: 20,
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  text: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  input: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 10,
+    padding: 10,
+    fontSize: 16,
+  },
+  card: {
+    flexDirection: 'row',
+    marginHorizontal: 20,
+    marginBottom: 15,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    padding: 10,
+    backgroundColor: '#fafafa',
+  },
+  image: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+    marginRight: 10,
+  },
+  info: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  group: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginBottom: 5,
+  },
+  footer: {
+    padding: 20,
+  },
+  empty: {
+    textAlign: 'center',
+    marginTop: 30,
+    color: '#888',
+  },
+});

app/_layout.tsx

@@ -15,8 +15,8 @@ export default function RootLayout() {
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
-        <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
         <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
       </Stack>
       <StatusBar style="auto" />