adding images to dataMenu

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/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"),
                 },
             ]
     });
@@ -67,13 +73,13 @@ const MapDataProvider = ({ children }) => {
         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);
 
     }