Merge branch 'main' of github.com:IGSD-UoW/WPD-MobileApp

src/app/components/FloatButton.js

@@ -50,31 +50,37 @@ function FloatButton(props) {
           id: 1,
           name: 'Chuva',
           isSelected: context.layers.values[0].isSelected,
+          image: require("../assets/dataMenu/chuva.png"),
         },
         {
           id: 2,
           name: 'Ponto de alagamento',
           isSelected: context.layers.values[1].isSelected,
+          image: require("../assets/dataMenu/alagamento.png"),
         },
         {
           id: 3,
           name: 'Pluviômetro artesanal',
           isSelected: context.layers.values[2].isSelected,
+          image: require("../assets/dataMenu/pluviometroArtesanal.png"),
         },
         {
           id: 4,
           name: 'Pluviômetro oficial',
-          isSelected: context.layers.values[3].isSelected
+          isSelected: context.layers.values[3].isSelected,
+          image: require("../assets/dataMenu/pluviometroOficial.png"),
         },
         {
           id: 5,
           name: 'Água no rio',
           isSelected: context.layers.values[4].isSelected,
+          image: require("../assets/dataMenu/aguaRio.png"),
         },
         {
           id: 6,
           name: 'Área de inundação',
           isSelected: context.layers.values[5].isSelected,
+          image: require("../assets/dataMenu/areaInundacao.png"),
         },
       ]
   });
@@ -91,6 +97,7 @@ function FloatButton(props) {
         item={item}
         onPress={() => selectedItens(item)}
         icon={icon}
+        image={item.image}
       />
     );
   };

src/app/components/MenuItens.js

@@ -1,23 +1,26 @@
-import React  from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View, Image } from "react-native";
 import { MaterialIcons } from '@expo/vector-icons';
 
 import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
-import { Ionicons } from '@expo/vector-icons';
 
-function MenuItens({ item, onPress, icon }) {   
+function MenuItens({ item, onPress, icon, image }) {
     return (
         <TouchableOpacity onPress={onPress} style={[styles.item]}>
-            <View style={{ flexDirection: "row", flex: 1, paddingTop: 20 }}>
-                <View style={{ flexDirection: "row", flex: 0.20 }}>
-                    <Ionicons name="md-rainy" size={24} color={colors.lightBlue} />
+            <View style={{ flexDirection: "row", flex: 1, paddingTop: 20, justifyContent: "center" }}>
+                <View style={{ flexDirection: "row", flex: 0.15, justifyContent:"center" }}>
+                    <Image
+                        style={{ width: 30, height: 25 }}
+                        resizeMode= "contain"
+                        source={image}
+                    />
                 </View>
                 <View style={{ flexDirection: "row", flex: 0.70 }}>
                     <Text style={[styles.text]}>{item.name}</Text>
                 </View>
                 <View
-                    style={{ flex: 0.10, alignSelf: "flex-start", flexDirection: "row" }}>
+                    style={{ flex: 0.15, alignSelf: "flex-start", flexDirection: "row", justifyContent: "flex-start" }}>
                     <MaterialIcons name={icon} size={24} color={colors.lightBlue} />
                 </View>
             </View>

src/app/components/forms/FormLocationPicker.js

@@ -26,8 +26,6 @@ function FormLocationPicker({ subtitle }) {
                 <View style={styles.adressText}>
                     <Text style={{
                         fontSize: dimensions.text.default,
-                        textAlign: "justify",
-                        flex: 1,
                     }}>
                         {local}
                     </Text>
@@ -53,6 +51,9 @@ const styles = StyleSheet.create({
     },
     adressText: {
         flex: 0.90,
+        height: "100%",
+        flexDirection: "column",
+        justifyContent: "center",
         paddingLeft: 5,
     },
     mapIcon: {

src/app/context/MapDataContext.js

@@ -13,31 +13,37 @@ const MapDataProvider = ({ children }) => {
                     id: 1,
                     name: 'Chuva',
                     isSelected: true,
+                    image: require("../assets/dataMenu/chuva.png"),
                 },
                 {
                     id: 2,
                     name: 'Ponto de alagamento',
                     isSelected: true,
+                    image: require("../assets/dataMenu/alagamento.png"),
                 },
                 {
                     id: 3,
                     name: 'Pluviômetro artesanal',
                     isSelected: true,
+                    image: require("../assets/dataMenu/pluviometroArtesanal.png"),
                 },
                 {
                     id: 4,
                     name: 'Pluviômetro oficial',
-                    isSelected: false
+                    isSelected: false,
+                    image: require("../assets/dataMenu/pluviometroOficial.png"),
                 },
                 {
                     id: 5,
                     name: 'Água no rio',
                     isSelected: true,
+                    image: require("../assets/dataMenu/aguaRio.png"),
                 },
                 {
                     id: 6,
                     name: 'Área de inundação',
                     isSelected: false,
+                    image: require("../assets/dataMenu/areaInundacao.png"),
                 },
             ]
     });
@@ -66,14 +72,14 @@ const MapDataProvider = ({ children }) => {
     const setChanges = (data) => {
         const json = JSON.stringify(data);
         const obj = JSON.parse(json);
-        
-       layers.values = obj;
-      setRain(layers.values[0].isSelected);
-      setFlood(layers.values[1].isSelected);
-      setPluviometer(layers.values[2].isSelected);
-      setOfficialPluviometer(layers.values[3].isSelected);
-      setRiver(layers.values[4].isSelected);      
-      setFloodAreas(layers.values[5].isSelected);
+
+        layers.values = obj;
+        setRain(layers.values[0].isSelected);
+        setFlood(layers.values[1].isSelected);
+        setPluviometer(layers.values[2].isSelected);
+        setOfficialPluviometer(layers.values[3].isSelected);
+        setRiver(layers.values[4].isSelected);
+        setFloodAreas(layers.values[5].isSelected);
 
     }
 

src/app/navigation/AppNavigator.js

@@ -66,7 +66,7 @@ const AppNavigator = () => (
       options={{
         tabBarIcon: ({ color, size }) => (
           <MaterialCommunityIcons
-            name="bell-outline"
+            name="bell"
             color={color}
             size={size}
           />

src/app/navigation/FeedNavigator.js

@@ -8,7 +8,7 @@ const FeedNavigator = () => (
   <Stack.Navigator>
     <Stack.Screen name="Home" component={MapFeedScreen}
       options={{
-        title: "Home",
+        title: "Pega Chuva",
         headerStyle: {
           backgroundColor: "white",
         },