Starting to implement data filter modal

src/app/components/MapDataMenu.js

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+
+import { View, StyleSheet, Text, Button, TouchableOpacity } from "react-native";
+import SelfClosingModal from "./SelfClosingModal";
+import colors from "../config/colors";
+import { FontAwesome5 } from '@expo/vector-icons';
+import { MaterialIcons } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Shadow } from "react-native-shadow-2";
+
+function DataMenuHeader({ setShowModal }) {
+  return (
+    <View
+      style={{
+        backgroundColor: colors.primary,
+        height: 42,
+        justifyContent: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingHorizontal: 16,
+      }}
+    >
+      <Text style={styles.text}>DADOS</Text>
+
+      <TouchableOpacity
+        style={styles.topBarIcon}
+        onPress={() => setShowModal(null)}
+      >
+        <MaterialCommunityIcons name="close" size={24} color={colors.white} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function DataOriginSelector() {
+  const [dataOriginToShow, setDataOriginToShow] = useState("oficial")
+  const bgToUse = (selected) => dataOriginToShow == selected ? colors.secondary : colors.gray;
+
+  return (
+    <Shadow
+      viewStyle={{ width: "100%", height: 40 }}
+      offset={[0, 4]}
+      distance={4}
+      radius={0}
+      startColor="rgba(0, 0, 0, 0.25)"
+      paintInside={true}
+    >
+      <View
+        style={{
+          height: 40,
+          justifyContent: "center",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          backgroundColor: colors.secondary,
+        }}
+      >
+        <TouchableOpacity
+          style={[styles.choicesBtn, {backgroundColor: bgToUse("oficial")}]}
+          onPress={() => setDataOriginToShow("oficial")}
+        >
+          <MaterialIcons
+            name="account-balance"
+            size={24}
+            color={colors.white}
+            alignItems="center"
+          />
+          <Text style={[styles.text, {marginLeft: 12}]}>OFICIAL</Text>
+        </TouchableOpacity>
+
+
+        <TouchableOpacity
+          style={[styles.choicesBtn, {backgroundColor: bgToUse("citzen")}]}
+          onPress={() => setDataOriginToShow("citzen")}
+        >
+          <FontAwesome5
+            name="user-alt"
+            size={22}
+            color={colors.white}
+            alignItems="center"
+          />
+          <Text style={[styles.text, {marginLeft: 12}]}>CIDADÃO</Text>
+        </TouchableOpacity>
+      </View>
+    </Shadow>
+  );
+}
+
+function DataMenuBody({ setShowModal }) {
+  return (
+    <View
+      style={{
+        height: "60%",
+        backgroundColor: colors.white,
+      }}
+    >
+      <DataMenuHeader setShowModal={setShowModal} />
+      <DataOriginSelector />
+    </View>
+  );
+}
+
+export default function MapDataMenu(props) {
+  const [showModal, setShowModal] = useState(null);
+  return (
+    <View>
+      <Button
+        title={"VISUALIZAR DADOS NO MAPA"}
+        onPress={() => setShowModal(true)}
+      />
+      <SelfClosingModal
+        animationType="slide"
+        transparent={true}
+        showModal={showModal}
+        setShowModal={setShowModal}
+      >
+        <DataMenuBody setShowModal={setShowModal} />
+      </SelfClosingModal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  choicesBtn: {
+    width: "50%",
+    backgroundColor: colors.secondary,
+    height: "100%",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexDirection: "row"
+  },
+  text: {
+    color: colors.white,
+    alignSelf: "center",
+    fontWeight: "500",
+    fontSize: 16,
+  },
+  topBarIcon: {
+    alignSelf: "center",
+  },
+});

src/app/components/map/OpenStreetMap.js

@@ -8,6 +8,7 @@ import {
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
 import html_content from "./Map.js";
+import MapDataMenu from "../MapDataMenu";
 
 
 function bindEventsToListeners(
@@ -87,6 +88,7 @@ export default function OpenStreetMap({
           setShowModal={setMarkerListener}
           markers={markersList}
         />
+        <MapDataMenu/>
       </View>
     </View>
   );

src/app/config/colors.js

@@ -1,6 +1,6 @@
 export default {
   primary: "#006493",
-  secondary: "#4ecdc4",
+  secondary: "rgba(74, 141, 183, 0.87)",
   black: "#000",
   white: "#fff",
   medium: "#6e6969",