added municipalities field, fixed scroll form

Navigation.js

 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { NavigationContainer } from "@react-navigation/native";
+import { Entypo } from '@expo/vector-icons'; 
+import { Ionicons } from '@expo/vector-icons';
 
 // Import the screens to be used in the navigator
 import Denuncias from "./screens/Denuncias";
 import Formulario from "./screens/Formulario";
 import Lista from "./screens/Lista";
 import Drna from "./screens/Drna";
+import { TabBarIOSItem } from "react-native";
 
 const StackDenuncias = createNativeStackNavigator();
 
 
 function Tabs() {
   return (
-    <Tab.Navigator initialRouteName="Denuncias">
+    <Tab.Navigator initialRouteName="DenunciasIni">
       <Tab.Screen
         name="Denuncias"
         component={Stacks}
         options={{
-          headerShown: false,
-        }}
+                tabBarIcon: ({}) => (
+                    <Entypo name="megaphone" size={24} color="black" />
+                ),
+                 headerShown:false
+            }} 
       />
-      <Tab.Screen name="Derechos" component={Derechos} />
-      <Tab.Screen name="Analisis" component={Analisis} />
+      <Tab.Screen 
+      name="Derechos" 
+      component={Derechos} 
+      options={{
+      tabBarIcon: ({}) => (
+                    <Ionicons name="ios-newspaper-outline" size={24} color="black" />
+                )
+            }}
+      />
+      <Tab.Screen 
+      name="Analisis" 
+      component={Analisis} 
+      options={{
+                tabBarIcon: ({}) => (
+                    <Ionicons name="earth" size={24} color="black" />
+                )
+            }}   />
     </Tab.Navigator>
   );
 }

package-lock.json

         "react-native-custom-navigation-tabs": "^3.0.1",
         "react-native-dropdown-select-list": "^2.0.2",
         "react-native-gesture-handler": "~2.8.0",
+        "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "~3.18.0"
       },
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
     },
+    "node_modules/react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "peerDependencies": {
+        "react-native": ">=0.42.0"
+      }
+    },
+    "node_modules/react-native-keyboard-aware-scroll-view": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz",
+      "integrity": "sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==",
+      "dependencies": {
+        "prop-types": "^15.6.2",
+        "react-native-iphone-x-helper": "^1.0.3"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.48.4"
+      }
+    },
     "node_modules/react-native-pose": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/react-native-pose/-/react-native-pose-0.9.1.tgz",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
     },
+    "react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "requires": {}
+    },
+    "react-native-keyboard-aware-scroll-view": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz",
+      "integrity": "sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "react-native-iphone-x-helper": "^1.0.3"
+      }
+    },
     "react-native-pose": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/react-native-pose/-/react-native-pose-0.9.1.tgz",

package.json

     "react-native-custom-navigation-tabs": "^3.0.1",
     "react-native-dropdown-select-list": "^2.0.2",
     "react-native-gesture-handler": "~2.8.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0"
   },

screens/Analisis.js

   View,
   Text,
   StyleSheet,
+  Linking
 } from "react-native";
 
 // TOOL DESCRIPTIONS

screens/Derechos.js

   Pressable,
 } from "react-native";
 import { FlatList, TouchableHighlight } from "react-native-gesture-handler";
-import { ButtonLay } from "./Button.js";
-import Leyes from "./leyes.json";
-import LeyesPR from "./leyesPR.json";
-import DerechosAmb from "./derechos.json";
+import { ButtonLay } from "./components/Button.js";
+import Leyes from "./data/leyes.json";
+import LeyesPR from "./data/leyesPR.json";
+import DerechosAmb from "./data/derechos.json";
 
 const Derechos = () => {
   return (
     <>
       <View>
         <Text style={styles.container2}>1) Leyes de la Tierra</Text>
-        <View>
-          {Leyes.map((ley) => {
+        <View >
+          {Leyes.map(({id, title, link}) => {
             return (
               <>
                 <TouchableOpacity
                   style={styles.button}
+                  key={id}
                   onPress={() => {
-                    Linking.openURL(ley.link.toString());
+                    Linking.openURL(link.toString());
                   }}
                 >
-                  <Text style={styles.text}>{ley.title}</Text>
+                  <Text style={styles.text}>{title}</Text>
                 </TouchableOpacity>
               </>
             );
           2) Derechos del activista climatico
         </Text>
         <View>
-          {DerechosAmb.map((der) => {
+          {DerechosAmb.map(({id, title, link}) => {
             return (
               <>
                 <TouchableOpacity
+                 
                   style={styles.button}
                   onPress={() => {
-                    Linking.openURL(der.link.toString());
+                    Linking.openURL(link.toString());
                   }}
                 >
-                  <Text style={styles.text}>{der.title}</Text>
+                  <Text style={styles.text}  key={id} >{title}</Text>
                 </TouchableOpacity>
               </>
             );
         </View>
       </View>
 
-      <View>
+       <View>
         <Text style={styles.container2}>3) Leyes de Puerto Rico</Text>
         <View>
-          {LeyesPR.map((ley) => {
+          {LeyesPR.map(({id, title, link}) => {
             return (
               <>
                 <TouchableOpacity
                   style={styles.button}
                   onPress={() => {
-                    Linking.openURL(ley.link.toString());
+                    Linking.openURL(link.toString());
                   }}
                 >
-                  <Text style={styles.text}>{ley.title}</Text>
+                  <Text style={styles.text} key={id}>{title}</Text>
                 </TouchableOpacity>
               </>
             );

screens/Drna.js

   StyleSheet,
   TouchableOpacity,
   TextInput,
+  KeyboardAvoidingView
 } from "react-native";
 import { SelectList } from "react-native-dropdown-select-list";
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import leyesViolaciones from "./data/leyesViolaciones.json"
+import Municipalities from "./data/municipalities.json";
+
 
 const postData = (URL, data) => {
   fetch(URL, {
 };
 
 const Drna = () => {
-  const URL = "http://192.168.7.178:5001/complaints/add";
+  const URL = "http://172.20.10.2:5001/complaints/add";
   const [name, onChangeName] = React.useState(null);
   const [email, onChangeEmail] = React.useState(null);
   const [place, onChangePlace] = React.useState(null);
   const [selected, setSelected] = React.useState("");
   const [description, onChangeDescription] = React.useState(null);
-  const leyesViolaciones = [
-    { key: "1", value: "Descarga de águas contaminadas" },
-    { key: "2", value: "Olores objetables-fuertes" },
-    { key: "3", value: "Tala y/o poda de árboles" },
-    { key: "4", value: "Rellenando un bosque" },
-    { key: "5", value: "Rellenando una quebrada" },
-    { key: "6", value: "Realizando perforaciones en el suelo" },
-    { key: "7", value: "Moviendo con maquinaria tierra de un lugar a otro" },
-    { key: "8", value: "Peces y/o otros organismos muertos" },
-    { key: "9", value: "Tapando la vegetación" },
-    { key: "10", value: "Destrucción de humedal" },
-    { key: "11", value: "Construcción sospechosa" },
-    { key: "12", value: "Otros (vertederos clandestinos, entre otros)" },
-  ];
+  const [location, onChangeLocation] = React.useState(null);
+  const [municipality, setMunicipality] = React.useState(null);
 
   return (
-    <View>
-      <Text
-        style={{
-          fontSize: 30,
-          textAlign: "center",
-          marginTop: "20%",
-        }}
-      >
-        Formulario DRNA
-      </Text>
+    <KeyboardAwareScrollView>
+      <View>
+        <Text
+          style={{
+            fontSize: 30,
+            textAlign: "center",
+            marginTop: "20%",
+          }}
+        >
+          Formulario DRNA
+        </Text>
 
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={onChangeName}
-        placeholder="Nombre"
-        placeholderTextColor={"grey"}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={onChangeEmail}
-        placeholder="Email"
-        placeholderTextColor={"grey"}
-      />
-      {/* <TextInput
-            style={styles.input}
-            value={text}
-            placeholder="Fecha"
-            placeholderTextColor={"grey"}
-        /> */}
-      <SelectList
-        boxStyles={styles.input}
-        dropdownStyles={styles.input2}
-        data={leyesViolaciones}
-        setSelected={setSelected}
-        placeholder="Leyes en violacion"
-      />
-      <TextInput
-        style={styles.input}
-        value={place}
-        onChangeText={onChangePlace}
-        placeholder="Lugar de los hechos"
-        placeholderTextColor={"grey"}
-      />
-      <TextInput
-        style={styles.input2}
-        value={description}
-        placeholder="Descripcion de los hechos"
-        onChangeText={onChangeDescription}
-        placeholderTextColor={"grey"}
-      />
-      <TouchableOpacity
-        style={styles.button}
-        onPress={() =>
-          postData(URL, {
-            name: name,
-            email: email,
-            place: place,
-            complaint_status: "pending",
-            complaint_type: selected.valueOf(),
-            complaint_description: description,
-          })
-        }
-      >
-        <Text style={styles.text}>Someter</Text>
-      </TouchableOpacity>
-    </View>
+        <TextInput
+          style={styles.input}
+          value={name}
+          onChangeText={onChangeName}
+          placeholder="Nombre"
+          placeholderTextColor={"grey"}
+        />
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={onChangeEmail}
+          placeholder="Email"
+          placeholderTextColor={"grey"}
+        />
+        {/* <TextInput
+              style={styles.input}
+              value={text}
+              placeholder="Fecha"
+              placeholderTextColor={"grey"}
+          /> */}
+        <SelectList
+          boxStyles={styles.input}
+          dropdownStyles={styles.input2}
+          data={
+            leyesViolaciones.map((der) => { 
+              return(
+                der.value
+                )
+                })
+            }
+          setSelected={setSelected}
+          placeholder="Leyes en violacion"
+        />
+        <SelectList
+          boxStyles={styles.input}
+          dropdownStyles={styles.input2}
+          data={
+            Municipalities.map((der) => { 
+              return(
+                der
+                )
+                })
+            }
+          setSelected={setMunicipality}
+          placeholder="Municipio donde ocurrio"
+        />
+        <TextInput
+          style={styles.input}
+          value={location}
+          onChangeText={onChangeLocation}
+          placeholder="Coordenadas de lo ocurrido"
+          placeholderTextColor={"grey"}
+        />
+        <TextInput
+          style={styles.input}
+          value={place}
+          onChangeText={onChangePlace}
+          placeholder="Lugar de los hechos"
+          placeholderTextColor={"grey"}
+        />
+        <TextInput
+          style={styles.input2}
+          value={description}
+          placeholder="Descripcion de los hechos"
+          onChangeText={onChangeDescription}
+          placeholderTextColor={"grey"}
+        />
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() =>
+            postData(URL, {
+              name: name,
+              email: email,
+              place: place,
+              complaint_status: "pending",
+              complaint_type: selected.valueOf(),
+              complaint_description: description,
+            })
+          }
+        >
+          <Text style={styles.text}>Someter</Text>
+        </TouchableOpacity>
+      </View>
+    </KeyboardAwareScrollView>
   );
 };
 

screens/Lista.js

 
   const getComplaints = async () => {
     try {
-      const response = await fetch("http://192.168.7.178:5001/complaints/all");
+      const response = await fetch("http://172.20.10.2:5001/complaints/all");
       const json = await response.json();
       setData(json.Complaints);
     } catch (error) {

screens/leyes.json → screens/data/leyes.json

 [
     {
-        "id": 1,
+        "id": 2,
         "title": "Ley de Tierras de Puerto Rico",
         "link": "https://bvirtualogp.pr.gov/ogp/BVirtual/LeyesOrganicas/pdf/26-1941.pdf"
     },
     {
-        "id": 2,
+        "id": 3,
         "title": "Ley Sobre Politica Publica Ambiental",
         "link": "https://www.drna.pr.gov/wp-content/uploads/2019/12/Ley-416-2004-refrencias-LPRA-2018.pdf"
     },
     {
-        "id":3,
+        "id":4,
         "title":"La Carta de la Tierra",
         "link":"https://cartadelatierra.org/lea-la-carta-de-la-tierra/preambulo/"
     }

screens/data/leyesViolaciones.json

+[
+    { "key": 1, "value": "Descarga de águas contaminadas" },
+    { "key": 2, "value": "Olores objetables-fuertes" },
+    { "key": 3, "value": "Tala y/o poda de árboles" },
+    { "key": 4, "value": "Rellenando un bosque" },
+    { "key": 5, "value": "Rellenando una quebrada" },
+    { "key": 6, "value": "Realizando perforaciones en el suelo" },
+    { "key": 7, "value": "Moviendo con maquinaria tierra de un lugar a otro" },
+    { "key": 8, "value": "Peces y/o otros organismos muertos" },
+    { "key": 9, "value": "Tapando la vegetación" },
+    { "key": 10, "value": "Destrucción de humedal" },
+    { "key": 11, "value": "Construcción sospechosa" },
+    { "key": 12, "value": "Otros (vertederos clandestinos, entre otros)" }
+  ]

screens/data/municipalities.json

+["Adjuntas","Aguada","Aguadilla","Aguas Buenas","Aibonito","Arecibo","Arroyo","Añasco",
+"Barceloneta","Barranquitas","Bayamón","Cabo Rojo","Caguas","Camuy","Canóvanas","Carolina",
+"Cataño","Cayey","Ceiba","Ciales","Cidra","Coamo","Comerío","Corozal","Culebra","Dorado",
+"Fajardo","Florida","Guayama","Guayanilla","Guaynabo","Gurabo","Guánica","Hatillo","Hormigueros",
+"Humacao","Isabela","Jayuya","Juana Díaz","Juncos","Lajas","Lares","Las Marías","Las Piedras",
+"Loiza","Luquillo","Manatí","Maricao","Maunabo","Mayagüez","Moca","Morovis","Naguabo","Naranjito",
+"Orocovis","Patillas","Peñuelas","Ponce","Quebradillas","Rincón","Rio Grande","Sabana Grande"
+,"Salinas","San Germán","San Juan","San Lorenzo","San Sebastián","Santa Isabel","Toa Alta",
+"Toa Baja","Trujillo Alto","Utuado","Vega Alta","Vega Baja","Vieques","Villalba","Yabucoa","Yauco"]

screens/data/zipcode.json

+["00601","00602","00603","00604","00605","00606","00610","00611","00611",
+"00612","00613","00614","00616","00617","00622","00623","00624","00627","00631",
+"00631","00636","00637","00638","00641","00646","00647","00650","00652","00653",
+"00656","00659","00660","00662","00664","00667","00669","00670","00674","00676",
+"00677","00678","00680","00681","00682","00683","00685","00687","00688","00690",
+"00692","00693","00694","00698","00703","00704","00705","00707","00714","00715",
+"00716","00717","00718","00719","00720","00721","00721","00723","00725","00726",
+"00727","00728","00729","00730","00731","00732","00733","00734","00735","00736",
+"00737","00738","00739","00740","00741","00742","00744","00745","00745","00751",
+"00754","00757","00765","00766","00767","00769","00771","00772","00773","00775",
+"00777","00778","00780","00782","00783","00784","00785","00786","00791","00792",
+"00794","00795","00901","00902","00906","00907","00908","00909","00910","00911",
+"00912","00913","00914","00915","00916","00917","00919","00920","00921","00923",
+"00924","00925","00926","00927","00928","00929","00930","00931","00933","00934",
+"00936","00940","00949","00950","00951","00952","00953","00954","00956","00957",
+"00958","00959","00960","00961","00962","00963","00965","00966","00968","00969",
+"00970","00971","00976","00977","00978","00979","00981","00982","00983","00984",
+"00985","00986","00987","00988"]

yarn.lock

     "kleur" "^3.0.3"
     "sisteransi" "^1.0.5"
 
-"prop-types@^15.7.2":
+"prop-types@^15.6.2", "prop-types@^15.7.2":
   "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   "version" "15.8.1"
   "resolved" "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz"
   "version" "0.70.3"
 
+"react-native-iphone-x-helper@^1.0.3":
+  "integrity" "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
+  "resolved" "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz"
+  "version" "1.3.1"
+
+"react-native-keyboard-aware-scroll-view@^0.9.5":
+  "integrity" "sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA=="
+  "resolved" "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz"
+  "version" "0.9.5"
+  dependencies:
+    "prop-types" "^15.6.2"
+    "react-native-iphone-x-helper" "^1.0.3"
+
 "react-native-pose@^0.9.1":
   "integrity" "sha512-JQ17SWXk6Hetlxfj3PO09/jYt5PMwu+MZ9YPcgRp5A//EtYXvfHS+IieXDnCg36wi74yZ80MvYx025//g/tqbQ=="
   "resolved" "https://registry.npmjs.org/react-native-pose/-/react-native-pose-0.9.1.tgz"
     "react-freeze" "^1.0.0"
     "warn-once" "^0.1.0"
 
-"react-native@*", "react-native@>=0.54.0", "react-native@0.70.5":
+"react-native@*", "react-native@>=0.42.0", "react-native@>=0.48.4", "react-native@>=0.54.0", "react-native@0.70.5":
   "integrity" "sha512-5NZM80LC3L+TIgQX/09yiyy48S73wMgpIgN5cCv3XTMR394+KpDI3rBZGH4aIgWWuwijz31YYVF5504+9n2Zfw=="
   "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.70.5.tgz"
   "version" "0.70.5"