vue city details, non l'étoile n'est toujours pas à droite

iut-expo-starter/screens/CityList.tsx

@@ -1,10 +1,10 @@
-import { View, Text, StyleSheet, TouchableHighlight } from "react-native"
-import { FlatList } from "react-native-gesture-handler"
+import { View, Text, StyleSheet, TouchableHighlight, Image } from "react-native"
+import { FlatList, TextInput } from "react-native-gesture-handler"
 import { CITIES_DATA, City, getCurrentWeather, FAVORITE_CITY_DATA } from "../data/stub"
 import { VilleCompopo } from "../components/VilleCompopo";
 import { TopBar } from "../components/TopBar";
 import { useDispatch, useSelector } from "react-redux";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { getWeatherList } from "../redux/actions/getWeatherList";
 
 
@@ -15,6 +15,8 @@ export default function CityList({navigation}){
     // Create a const that will hold the react-redux events dispatcher
     const dispatch = useDispatch();
     
+    const [cityName, setCityName] = useState('');
+    
     // Let's define a hook that will be used to update the rendered state after the return will be called
     // You cannot perform side-effects outside of a useEffect hook
     useEffect(() => {
@@ -28,12 +30,12 @@ export default function CityList({navigation}){
     return (
         <View style={{flex: 1, width: "100%", alignItems: "center"}}>
             <TopBar/>
+            <TextInput style={leStyle.searchBar} clearTextOnFocus={true} placeholder="Search a city name" onChangeText={(cityName) => setCityName({cityName})}/>
             <FlatList
-            data={weatherList}
-            keyExtractor={item =>item.name}
-            renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("CityDetails", {"weather": item})}><VilleCompopo weather={item} fav={FAVORITE_CITY_DATA}/></TouchableHighlight>}
-            style={leStyle.container} 
-            />
+                data={weatherList}
+                keyExtractor={item =>item.name}
+                renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("CityDetails", {"weather": item})}><VilleCompopo weather={item} fav={FAVORITE_CITY_DATA}/></TouchableHighlight>}
+                style={leStyle.container}/>
         </View>
     )
 }
@@ -45,4 +47,12 @@ const leStyle = StyleSheet.create({
         alignContent: 'center',
         width: '100%'
     },
+    searchBar: {
+        width: "90%",
+        margin: 20,
+        height: 30,
+        backgroundColor: "powderblue",
+        borderRadius: 10,
+        textAlign: "center"
+    }
 });