Fixing modal datamenu ScrollView height bug.

src/app/components/MapDataMenu.js

@@ -92,7 +92,7 @@ function DataOriginSelector({ dataOriginToShow, setDataOriginToShow }) {
   );
 }
 
-// FIXME: Change icon values in the future 
+// FIXME: Change icon values in the future
 const dataOptions = {
   oficial: [
     {
@@ -146,24 +146,34 @@ function Border() {
   return (
     <View
       style={{
-        width: 0.95 * screen_width,
+        width: 0.91 * screen_width,
         alignSelf: "center",
         height: 2,
         borderRadius: 2,
         paddingHorizontal: 16,
-        backgroundColor: colors.lightestGray,
+        // backgroundColor: colors.separatorGray,
       }}
     />
   );
 }
 
-function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
+function ListDataOptions(
+  dataOptionsToShow,
+  dataOriginToShow,
+  setDataOptionsToShow,
+  option
+) {
   const item = dataOptionsToShow[dataOriginToShow][option.code];
-  const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]:  {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};
-
+  const dataOptionObject = {
+    ...dataOptionsToShow,
+    [dataOriginToShow]: {
+      ...dataOptionsToShow[dataOriginToShow],
+      [option.code]: !item,
+    },
+  };
 
   return (
-    <View>
+    <View key={option.code}>
       <View
         style={{
           flex: 1,
@@ -197,9 +207,10 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
           )}
         </View>
 
-
         <TouchableOpacity
-          onPress={() => {setDataOptionsToShow(dataOptionObject)}}
+          onPress={() => {
+            setDataOptionsToShow(dataOptionObject);
+          }}
         >
           <View
             style={{
@@ -208,12 +219,10 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
               height: 36,
               justifyContent: "center",
               borderRadius: 6,
-              backgroundColor:  item  ? colors.activated : colors.notActivated,
+              backgroundColor: item ? colors.activated : colors.notActivated,
             }}
           >
-            <Text style={styles.text}>
-              {item ? "ADICIONAR" : "REMOVER"}
-            </Text>
+            <Text style={styles.text}>{item ? "ADICIONAR" : "REMOVER"}</Text>
           </View>
         </TouchableOpacity>
       </View>
@@ -222,13 +231,32 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
   );
 }
 
-function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
+function DataOriginOptions({
+  dataOriginToShow,
+  dataOptionsToShow,
+  setDataOptionsToShow,
+}) {
   return (
-    <View paddingTop={8} height={"100%"}>
-      <ScrollView        >
+    <View
+      style={{
+        paddingTop: 8,
+        flexDirection: "column",
+      }}
+    >
+      <ScrollView
+        height={270}
+        automaticallyAdjustContentInsets={true}
+      >
+        <View>
         {dataOptions[dataOriginToShow].map((option) =>
-          ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
+          ListDataOptions(
+            dataOptionsToShow,
+            dataOriginToShow,
+            setDataOptionsToShow,
+            option
+          )
         )}
+          </View>
       </ScrollView>
     </View>
   );
@@ -249,13 +277,10 @@ function DataMenuBody({ setShowModal }) {
       riverFlood: true,
     },
   });
-  console.log(dataOptionsToShow)
+
   return (
     <View
-      style={{
-        height: "60%",
-        backgroundColor: colors.white,
-      }}
+      backgroundColor={colors.grayBG}
     >
       <DataMenuHeader setShowModal={setShowModal} />
       <DataOriginSelector
@@ -274,12 +299,14 @@ function DataMenuBody({ setShowModal }) {
 export default function MapDataMenu(props) {
   const [showModal, setShowModal] = useState(null);
   return (
-    <View>
+    <View
+    >
       <Button
         title={"VISUALIZAR DADOS NO MAPA"}
         onPress={() => setShowModal(true)}
       />
       <SelfClosingModal
+        style={{position:"absolute"}}
         animationType="slide"
         transparent={true}
         showModal={showModal}

src/app/components/SelfClosingModal.js

@@ -5,12 +5,13 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
 } from "react-native";
-import { screen_height, screen_width } from "../config/dimensions";
+import { screen_width } from "../config/dimensions";
+import colors from "../config/colors";
 
 export default function SelfClosingModal(props) {
 
   return (
-    <View style={styles.centeredView}>
+    <View style={[styles.centeredView, props.style]}>
       <Modal
         animationType={props.animationType}
         transparent={props.transparent}
@@ -36,12 +37,13 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
     alignItems: "center",
     marginTop: 22,
+    marginBottom: 49,
   },
   modalView: {
     flexShrink: 1,
     margin: 20,
     width: screen_width,
-    backgroundColor: "white",
+    backgroundColor: colors.grayBG,
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
     marginBottom: 0,

src/app/config/colors.js

@@ -11,10 +11,12 @@ export default {
   activated: "rgba(26, 138, 17, 0.63)",
   lightGray: "#C4C4C4",
   gray: "#999999",
+  separatorGray: "#D9D9D9",
   subText: "#8B8C8C",
   lightestGray: "#F0F0F0",
   lightBlue: "#1976D2",
   gold: "#ffd700",
   toggle: "#e5eff4",
+  grayBG: "#EEECEC",
 
 };