page détail ajout différentes zone

src/screen/DetailCity.tsx

@@ -1,16 +1,37 @@
 import { useState } from 'react';
-import { FlatList, Button, StyleSheet, Text, View, TextInput, Image } from 'react-native';
+import { FlatList, Button, StyleSheet, Text, View, TextInput, Image, ScrollView, TabBarIOSItem } from 'react-native';
 
 import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather } from '../../data/stub';
 import CityListItem from '../components/CityListItem';
+import { Ionicons, AntDesign } from '@expo/vector-icons';
 
-export default function DetailCity({route}) {
+export default function DetailCity({ route }) {
 
     const weather = route.params.weather;
     return (
         <View style={styles.container}>
-            <Text>{weather.temperature}</Text>
+
+            <View style={styles.temperature}>
+                <Text style={styles.weatherText}>{weather.city.name}</Text>
+                <Text style={styles.temperatureText}>{weather.temperature} °</Text>
+            </View>
+            <View style={styles.nexttemp}>
+                <View style={{flexDirection:"row"}}>
+                    <AntDesign name="clockcircleo" size={15} />
+                    <Text style={{ fontSize: 15 }}>HOURLY FORECAST</Text>
+                </View>
+
+            </View>
+            <View style={styles.nextdays}>
+                <View style={{flexDirection:"row"}}>
+                    <AntDesign name="calendar" size={15} />
+                    <Text style={{ fontSize: 15 }}>10-DAY FORECAST</Text>
+                </View>
+            </View>
+
         </View>
+
+
     );
 
 }
@@ -18,30 +39,51 @@ export default function DetailCity({route}) {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        justifyContent: 'center',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+    },
+    temperature: {
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
         alignItems: 'center',
+        borderRadius: 10,
         margin: 10,
     },
-    textInput: {
+    nexttemp: {
-        width: "90%"
+        flexDirection: 'row',
-
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        height: 130,
+        borderRadius: 10,
+        margin: 10,
+        width: '90%',
+        backgroundColor: 'rgba(223,223,223,1)',
+        paddingLeft: "3%",
+        paddingTop: "3%",
     },
-    searchBar: {
+    nextdays: {
         flexDirection: 'row',
-        justifyContent: 'center',
+        justifyContent: 'flex-start',
-        alignItems: 'center',
+        alignItems: 'flex-start',
-        borderWidth: 0.5,
+        height: "50%",
-        borderColor: '#000',
-        height: 40,
         borderRadius: 10,
         margin: 10,
+        width: '90%',
+        backgroundColor: 'rgba(223,223,223,1)',
+        marginBottom: 100,
+        paddingLeft: "3%",
+        paddingTop: "3%",
     },
-    imageLoupe: {
+    weatherText: {
-        padding: 10,
+        fontSize: 40,
-        margin: 5,
+    },
-        height: 15,
+    temperatureText: {
-        width: 15,
+        fontSize: 80,
-        resizeMode: 'stretch',
+    },
-        alignItems: 'center',
+    scrollView: {
+        width: '100%',
+        padding: 0,
     }
 });