ajout flat list gome screen 🚧

App.tsx

@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
 import Meteo from './src/screen/Meteo';
 import NavBar from './src/components/NavBar';
 import DetailMeteo from './src/screen/DetailMeteo';
@@ -8,7 +8,14 @@ import MainTab from './src/navigator/Navigator';
 
 export default function App() {
   return (
-    <MainTab/>
+    <>
+    <SafeAreaView style={styles.topSafeArea}/>
+      <SafeAreaView style={styles.mainSafeArea}>
+       <MainTab></MainTab>
+      </SafeAreaView>
+    </>
+    
+    
   );
 }
 
@@ -19,4 +26,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  mainSafeArea: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  topSafeArea: {
+    flex: 0,
+    backgroundColor: 'transparent'
+  }
 });

src/components/WidgetMeteo.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather } from '../../data/stub';
+import { useNavigation } from '@react-navigation/native';
+
+type WidgetMeteoProps = {
+    item: Weather;
+}
+  
+export default function WidgetMeteo(props : WidgetMeteoProps) {
+return (
+    <View style={styles.container}>
+        <Text>{props.item.city.name}</Text>
+        <Text>{props.item.temperature} °C</Text>
+    </View>
+
+)
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+        margin: 10,
+        padding: 10,
+        borderRadius: 10,
+        shadowColor: "#000",
+        width: 150,
+        height: 150,
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+});
+  
+    

src/navigator/Navigator.tsx

@@ -12,7 +12,7 @@ export default function MainTab(){
     return (
         <NavigationContainer>
             <Tab.Navigator
-            initialRouteName="Meteo"
+            initialRouteName="Home"
             screenOptions={{headerShown : false}}>
                 <Tab.Screen name="Home" component={DetailMeteo}
                                            options={{

src/screen/AddCity.tsx

@@ -27,4 +27,3 @@ const styles = StyleSheet.create({
     },
 });
     
-    

src/screen/DetailMeteo.tsx

@@ -1,30 +1,38 @@
 import { useState } from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import { Button, FlatList, StyleSheet, Text, View } from 'react-native';
-import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather } from '../../data/stub';
+import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather, WEATHER_DATA } from '../../data/stub';
+import WidgetMeteo from '../components/WidgetMeteo';
 
 export default function DetailMeteo() {
-/*
+
-    const [meteo, setMeteo] = useState("Meteo");
+    //City
-    const [city, setCity] = useState<City>(new City("Paris", 48.856614, 2.3522219));
+    const [meteo, setMeteo] = useState<Weather>(new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-*/
+    "couvert", 20, -4.34,
-    const [weather, setWeather] = useState<Weather>(new Weather("2023-01-22 09:55:59", 10000, "Nuageux","couvert", 0.52, -4.34,82, 5.14, 1032,new City("Paris", 48.866667, 2.333333)))
+    82, 5.14, 1032,
+    new City("Paris", 48.866667, 2.333333)
+  ));
+    
     return (
       <View style={styles.container}>
-            <Text>{weather.temperature}</Text>
+        
-            <Text>{weather.humidity}</Text>
+          <FlatList style={styles.flatList} data={WEATHER_DATA} renderItem={WidgetMeteo}></FlatList>
-            <Text>{weather.windspeed}</Text>
+      
+        
       </View>
-    );
+    )
 }
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
     },
-});
+    flatList: {
+        flex: 1,
+        flexDirection: "column",
+        flexWrap: "wrap",
+    },
+  }
+);
 
 /*
 new Weather("2023-01-22 09:55:59", 10000, "Nuageux",

src/screen/Meteo.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import { Button, StyleSheet, Text, View, SafeAreaView } from 'react-native';
 import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather } from '../../data/stub';
 
 export default function Meteo() {
@@ -10,6 +10,7 @@ export default function Meteo() {
 
     return (
         <View style={styles.container}>
+            <SafeAreaView/>
             <Text>{city.name}</Text>
             <Text>{city.latitude}</Text>
             <Text>{city.longitude}</Text>