ajout switch settings page + option component 🔨

src/components/CityListItem.tsx

@@ -11,36 +11,40 @@ type CityListItemProps = {
 
 export default function CityListItem(props: CityListItemProps) {
     return (
-    <View>
+        <>
             <View style={styles.container}>
-        <View style={{width: "80%"}}>
-        <Text>{props.item.name}</Text>
-        <Text>{props.item.name}</Text>
-        <Text>{props.item.longitude}</Text>
-        <Text>{props.item.latitude}</Text>
-        </View>
+
+                <Text style={styles.text}>{props.item.name}</Text>
             </View>
             <View style={styles.separator} />
-    </View>
+        </>
+
     )
 }
 
 const styles = StyleSheet.create({
     container: {
-    flex: 1,
-    flexDirection: "row",
-    marginHorizontal: "30%"
+        flex: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
     },
     separator: {
         marginVertical: 4,
-    backgroundColor: "rgba(255,255,255,0.3)",
+        backgroundColor: "rgba(223,223,223,1)",
         height: 1,
         width: '90%',
     },
     teaserImage: {
         width: 50,
         height: 50,
-}
+    },
+    text: {
+        fontWeight: "bold",
+        color: "black",
+        margin: 10,
+        width: '100%',
+    },
 });
 
-    

src/components/OptionComponent.tsx

@@ -0,0 +1,54 @@
+//item for meteo in list
+
+import React from 'react';
+import { StyleSheet, Text, View, Image, TouchableOpacity, Switch } from 'react-native';
+import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather } from '../../data/stub';
+import { useNavigation } from '@react-navigation/native';
+import { useState } from 'react';
+
+type OptionComponentProps = {
+    nameOption: String;
+}
+
+export default function OptionComponent(props: OptionComponentProps) {
+    const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+    return (
+        <>
+            <View style={styles.container}>
+                <Text style={styles.text}>{props.nameOption}</Text>
+                <Switch trackColor={{ false: '#767577' }}    
+                    onValueChange={toggleSwitch}
+                    value={isEnabled}></Switch>
+            </View>
+        </>
+
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+        width: '80%',
+    },
+    separator: {
+        marginVertical: 4,
+        backgroundColor: "rgba(223,223,223,1)",
+        height: 1,
+        width: '90%',
+    },
+    teaserImage: {
+        width: 50,
+        height: 50,
+    },
+    text: {
+        fontWeight: "bold",
+        color: "black",
+        margin: 10,
+        width: '100%',
+    },
+});
+

src/components/WidgetMeteo.tsx

@@ -29,7 +29,6 @@ const styles = StyleSheet.create({
         flex: 0,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: '#F5FCFF',
         margin: 10,
         padding: 10,
         shadowColor: "#000",

src/navigator/Navigator.tsx

@@ -6,6 +6,7 @@ import { FontAwesome } from "@expo/vector-icons";
 import DetailMeteo from "../screen/DetailMeteo";
 import Meteo from "../screen/Meteo";
 import AddCity from "../screen/AddCity";
+import Settings from "../screen/Settings";
 const Tab = createBottomTabNavigator();
 
 export default function MainTab() {
@@ -29,7 +30,7 @@ export default function MainTab() {
                         title: 'Add',
                         tabBarIcon: ({ color }) => <FontAwesome name="plus" size={24} color="black" />,
                     }} />
-                <Tab.Screen name="Settings" component={Meteo}
+                <Tab.Screen name="Settings" component={Settings}
                     options={{
                         title: 'Settings',
                         tabBarIcon: ({ color }) => <TabBarIcon name="cog" color="black" />

src/screen/AddCity.tsx

@@ -29,31 +29,30 @@ export default function AddCity() {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: 'rgba(223,223,223,0.3)',
-        alignItems: 'center',
         justifyContent: 'center',
+        alignItems: 'center',
+        margin: 10,
     },
     textInput: {
-        height: 40,
-        borderColor: 'gray',
-        borderRadius: 10,
-        borderWidth: 1,
-        width: "90%",
-        margin: 10
+        width: "90%"
 
     },
     searchBar: {
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        height: 50,
-        backgroundColor: "rgba(255,255,255,0.3)",
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 0.5,
+        borderColor: '#000',
+        height: 40,
+        borderRadius: 10,
+        margin: 10,
     },
     imageLoupe: {
-        width: 20,
-        height: 20,
-        margin: 10
+        padding: 10,
+        margin: 5,
+        height: 15,
+        width: 15,
+        resizeMode: 'stretch',
+        alignItems: 'center',
     }
 });
-    

src/screen/Settings.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { Button, StyleSheet, Text, View, SafeAreaView, FlatList, ListViewBase } from 'react-native';
+import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather } from '../../data/stub';
+import CityListItem from '../components/CityListItem';
+import OptionComponent from '../components/OptionComponent';
+
+export default function Settings() {
+
+    const [meteo, setMeteo] = useState("Meteo");
+    const [city, setCity] = useState<City>(new City("Paris", 48.856614, 2.3522219));
+
+
+    return (
+        <View style={styles.container}>
+            <SafeAreaView/>
+            <OptionComponent nameOption="Dark Theme"></OptionComponent>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingTop: 20,
+    },
+});