connected front end with backend & reformated code

Navigation.js

@@ -2,91 +2,50 @@ import React from "react";
 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 Derechos from "./screens/Derechos";
 import Analisis from "./screens/Analisis";
 import Formulario from "./screens/Formulario";
 import Lista from "./screens/Lista";
 import Drna from "./screens/Drna";
-import { TabBarIOSItem } from "react-native";
 
 const StackDenuncias = createNativeStackNavigator();
 
 function Stacks() {
-    return (
-        <StackDenuncias.Navigator
-         initialRouteName="DenunciasIni"
-        >
-           
-            <StackDenuncias.Screen
-                name="DenunciasIni"
-                component={Denuncias}
-            />
-            <StackDenuncias.Screen
-                name="Formulario"
-                component={Formulario}
-            />
-            <StackDenuncias.Screen
-                name="Lista"
-                component={Lista}
-            />
-            <StackDenuncias.Screen
-                name="Drna"
-                component={Drna}
-            />
-           
-        </StackDenuncias.Navigator>
-    )
+  return (
+    <StackDenuncias.Navigator initialRouteName="DenunciasIni">
+      <StackDenuncias.Screen name="DenunciasIni" component={Denuncias} />
+      <StackDenuncias.Screen name="Formulario" component={Formulario} />
+      <StackDenuncias.Screen name="Lista" component={Lista} />
+      <StackDenuncias.Screen name="Drna" component={Drna} />
+    </StackDenuncias.Navigator>
+  );
 }
 
 const Tab = createBottomTabNavigator();
 
 function Tabs() {
-    return (
-        <Tab.Navigator
-        initialRouteName="Denuncias">
-            <Tab.Screen 
-            name="Denuncias" 
-            component={Stacks} 
-            options={{
-                tabBarIcon: ({}) => (
-                    <Entypo name="megaphone" size={24} color="black" />
-                ),
-                headerShown:false
-                
-            }} 
-           
-
-            />
-            <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>
-    );
+  return (
+    <Tab.Navigator initialRouteName="Denuncias">
+      <Tab.Screen
+        name="Denuncias"
+        component={Stacks}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Tab.Screen name="Derechos" component={Derechos} />
+      <Tab.Screen name="Analisis" component={Analisis} />
+    </Tab.Navigator>
+  );
 }
 
-export default function Navigation(){
-    return (
-        <NavigationContainer>
-            <Tabs />
-        </NavigationContainer>
-    );
-}
+export default function Navigation() {
+  return (
+    <NavigationContainer>
+      <Tabs />
+    </NavigationContainer>
+  );
+}

screens/Analisis.js

@@ -1,144 +1,26 @@
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Linking, Pressable} from "react-native";
-import Tools from "./analisis.json";
-
-// TOOL DESCRIPTIONS
-const bodyEJScreen = "EJScreen es..... Presione para ir al enlace."
-const bodyCEJST = "CEJST es..... Presione para ir al enlace."
-const bodyEJAtlas = "EJAtlas es..... Presione para ir al enlace."
-const bodyIPCC = "El ''Intergovernmental Panel on Climate Change'' o IPCC es..... Presione para ir al enlace."
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+} from "react-native";
 
 const Analisis = () => {
-    return (
-        <View>
-
-            {/* TAB TITLE CODE*/}
-            {/* TAB TITLE */}
-            <Text style={styles.Tab}> 
-                Enlaces a Herramientas de Análisis Externas
-            </Text>
-
-            {/* FIRST TOOL CODE*/}
-            {/* FIRST TOOL TITLE */}
-            <View style={styles.Number}>
-                <Text style={styles.Number}>
-                    1)</Text>
-                <Text style={styles.Title} 
-                onPress={ ()=> Linking.openURL('https://ejscreen.epa.gov/mapper/') }>
-                    Enlace a EJScreen
-                </Text>
-            </View>
-            {/* FIRST TOOL BODY */}
-            <View style={styles.Bullet}>
-                <Text style={styles.Bullet}>
-                    {'\u002D'}
-                </Text>
-                <Text style={styles.Body}>
-                    {bodyEJScreen}
-                </Text>
-            </View>
-
-            {/* SECOND TOOL CODE*/}
-            {/* SECOND TOOL TITLE */}
-            <View style={styles.Number}>
-                <Text style={styles.Number}>
-                    2)</Text>
-                <Text style={styles.Title} 
-                onPress={ ()=> Linking.openURL('https://screeningtool.geoplatform.gov/en/#3/33.47/-97.5') }>
-                    Enlace a CEJST
-                </Text>
-            </View>
-            {/* SECOND TOOL BODY */}
-            <View style={styles.Bullet}>
-                <Text style={styles.Bullet}>
-                    {'\u002D'}
-                </Text>
-                <Text style={styles.Body}>
-                    {bodyCEJST}
-                </Text>
-            </View>
-
-            {/* THIRD TOOL CODE*/}
-            {/* THIRD TOOL TITLE */}
-            <View style={styles.Number}>
-                <Text style={styles.Number}>
-                    3)</Text>
-                <Text style={styles.Title} 
-                onPress={ ()=> Linking.openURL('https://ejatlas.org/') }>
-                    Enlace a EJAtlas
-                </Text>
-            </View>
-            {/* THIRD TOOL BODY */}
-            <View style={styles.Bullet}>
-                <Text style={styles.Bullet}>
-                    {'\u002D'}
-                </Text>
-                <Text style={styles.Body}>
-                    {bodyEJAtlas}
-                </Text>
-            </View>
-
-            {/* FOURTH TOOL CODE*/}
-            {/* FOURTH TOOL TITLE */}
-            <View style={styles.Number}>
-                <Text style={styles.Number}>
-                    4)</Text>
-                <Text style={styles.Title} 
-                onPress={ ()=> Linking.openURL('https://www.ipcc.ch/') }>
-                    Enlace al IPCC
-                </Text>
-            </View>
-            {/* FOURTH TOOL BODY */}
-            <View style={styles.Bullet}>
-                <Text style={styles.Bullet}>
-                    {'\u002D'}
-                </Text>
-                <Text style={styles.Body}>
-                    {bodyIPCC}
-                </Text>
-            </View>
-        
-        </View>
-    )
-}
-
-const styles = StyleSheet.create({
-    Tab: { fontSize: 30,
-           textAlign: "center",
-           marginTop: "12%",
-           marginLeft: "1.4%",
-           marginRight: "1.4%"
-    },
-
-    Number: { fontSize: 23,
-        textAlign: "left",
-        marginLeft: "2.5%",
-        marginTop: "5.5%",
-        flexDirection: 'row'
-    },
-
-    Title: { fontSize: 23,
-                textAlign: "left",
-                marginTop: "5.5%", 
-                color: "#6495ed",
-                flex: 0,
-                paddingLeft: 6
-    },
-
-    Body: { fontSize: 18,
-                textAlign: "left",
-                marginTop: "2%",
-                flex: 1, 
-                paddingLeft: 5
-    }, 
-
-    Bullet: { fontSize: 18,
-              textAlign: "left",
-              marginLeft: "6%",
-              marginTop: "2%",
-              flexDirection: 'row'
-    }
-  });
-
-export default Analisis
-
+  return (
+    <View>
+      <Text
+        style={{
+          fontSize: 30,
+          textAlign: "center",
+          marginTop: "20%",
+        }}
+      >
+        Herramientas de analisis
+      </Text>
+    </View>
+  );
+};
+
+export default Analisis;

screens/Button.js

@@ -1,24 +1,32 @@
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity,  Linking, Button, Pressable} from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Linking,
+  Button,
+  Pressable,
+} from "react-native";
 
 const ButtonLay = StyleSheet.create({
-      button: {
-        width:250,
-        alignSelf: 'center',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 32,
-        borderRadius: 4,
-        elevation: 3,
-        backgroundColor: '#009688',
-        marginTop: "5%"
-      },
-      text: {
-        fontSize: 16,
-        lineHeight: 21,
-        fontWeight: 'bold',
-        letterSpacing: 0.25,
-        color: 'white',
-      }
-    })
+  button: {
+    width: 250,
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: "#009688",
+    marginTop: "5%",
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: "bold",
+    letterSpacing: 0.25,
+    color: "white",
+  },
+});

screens/Denuncias.js

@@ -3,68 +3,60 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { NavigationContainer } from "@react-navigation/native";
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity} from "react-native";
-
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 
 const Denuncias = () => {
-
-    const currNav = useNavigation()
-
-    return (
-        <View>
-            <Text
-                style={{
-                    fontSize: 30,
-                    textAlign: "center",
-                    marginTop: "20%"
-                }}
-            
-            >Llenar formulario y 
-            listado de denuncias</Text>
-
-            <TouchableOpacity
-            style={styles.button}
-            onPress={() => currNav.navigate("Formulario")}
-        
-                >
-                <Text style={styles.text}> Formularios </Text>
-            </TouchableOpacity>
-
-            
-            <TouchableOpacity
-            style={styles.button}
-            onPress={() => currNav.navigate("Lista")}
-            >
-                <Text style={styles.text}>Listado</Text>
-            </TouchableOpacity>
-
-
-        </View>
-
-
-    )
-}
-
-export default Denuncias
+  const currNav = useNavigation();
+
+  return (
+    <View>
+      <Text
+        style={{
+          fontSize: 30,
+          textAlign: "center",
+          marginTop: "20%",
+        }}
+      >
+        Llenar formulario y listado de denuncias
+      </Text>
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => currNav.navigate("Formulario")}
+      >
+        <Text style={styles.text}> Formularios </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => currNav.navigate("Lista")}
+      >
+        <Text style={styles.text}>Listado</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default Denuncias;
 
 const styles = StyleSheet.create({
-    button: {
-      width:250,
-      alignSelf: 'center',
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingVertical: 12,
-      paddingHorizontal: 32,
-      borderRadius: 4,
-      elevation: 3,
-      backgroundColor: '#009688',
-      marginTop: "5%"
-    },
-    text: {
-      fontSize: 16,
-      lineHeight: 21,
-      fontWeight: 'bold',
-      letterSpacing: 0.25,
-      color: 'white',
-    }
-  })
+  button: {
+    width: 250,
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: "#009688",
+    marginTop: "5%",
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: "bold",
+    letterSpacing: 0.25,
+    color: "white",
+  },
+});

screens/Derechos.js

@@ -1,115 +1,125 @@
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity,  Linking, Pressable} from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Linking,
+  Pressable,
+} from "react-native";
 import { FlatList, TouchableHighlight } from "react-native-gesture-handler";
-import {ButtonLay} from "./Button.js";
+import { ButtonLay } from "./Button.js";
 import Leyes from "./leyes.json";
 import LeyesPR from "./leyesPR.json";
 import DerechosAmb from "./derechos.json";
 
 const Derechos = () => {
-    return (
-
-        <><View>
-
-            <Text style={styles.container2}>1) Leyes de la Tierra</Text>
-            <View>
-                {Leyes.map(ley => {
-                    return (
-                        <><TouchableOpacity style={styles.button}
-                        
-                        onPress={() => {
-                            Linking.openURL(ley.link.toString());
-                        }}>
-                            <Text style={styles.text}>{ley.title}</Text>
-                        </TouchableOpacity></>
-                    );
-                })}
-            </View>
-
-        </View>
-        
+  return (
+    <>
+      <View>
+        <Text style={styles.container2}>1) Leyes de la Tierra</Text>
         <View>
-                <Text style={styles.container2}>2) Derechos del activista climatico</Text>
-                <View>
-                {DerechosAmb.map(der => {
-                    return (
-                        <><TouchableOpacity style={styles.button}
-                        
-                        onPress={() => {
-                            Linking.openURL(der.link.toString());
-                        }}>
-                            <Text style={styles.text}>{der.title}</Text>
-                        </TouchableOpacity></>
-                    );
-                })}
-            </View>
-
-
-            </View>
-            
-            
-            <View>
-                <Text style={styles.container2}>3) Leyes de Puerto Rico</Text>
-                <View>
-                {LeyesPR.map(ley => {
-                    return (
-                        <><TouchableOpacity style={styles.button}
-                        
-                        onPress={() => {
-                            Linking.openURL(ley.link.toString());
-                        }}>
-                            <Text style={styles.text}>{ley.title}</Text>
-                        </TouchableOpacity></>
-                    );
-                })}
-            </View>
-            </View></>
-
+          {Leyes.map((ley) => {
+            return (
+              <>
+                <TouchableOpacity
+                  style={styles.button}
+                  onPress={() => {
+                    Linking.openURL(ley.link.toString());
+                  }}
+                >
+                  <Text style={styles.text}>{ley.title}</Text>
+                </TouchableOpacity>
+              </>
+            );
+          })}
+        </View>
+      </View>
 
+      <View>
+        <Text style={styles.container2}>
+          2) Derechos del activista climatico
+        </Text>
+        <View>
+          {DerechosAmb.map((der) => {
+            return (
+              <>
+                <TouchableOpacity
+                  style={styles.button}
+                  onPress={() => {
+                    Linking.openURL(der.link.toString());
+                  }}
+                >
+                  <Text style={styles.text}>{der.title}</Text>
+                </TouchableOpacity>
+              </>
+            );
+          })}
+        </View>
+      </View>
 
-    );
-}
+      <View>
+        <Text style={styles.container2}>3) Leyes de Puerto Rico</Text>
+        <View>
+          {LeyesPR.map((ley) => {
+            return (
+              <>
+                <TouchableOpacity
+                  style={styles.button}
+                  onPress={() => {
+                    Linking.openURL(ley.link.toString());
+                  }}
+                >
+                  <Text style={styles.text}>{ley.title}</Text>
+                </TouchableOpacity>
+              </>
+            );
+          })}
+        </View>
+      </View>
+    </>
+  );
+};
 
 const styles = StyleSheet.create({
-    container: {
-        fontSize: 25,
-        textAlign: "center",
-        marginTop: "10%"
-    },
-
-    container2: {
-        fontSize: 25,
-        textAlign: "left",
-        marginTop: "10%",
-        marginLeft: "5%"
-    },
+  container: {
+    fontSize: 25,
+    textAlign: "center",
+    marginTop: "10%",
+  },
 
-    laws: {
-        fontSize: 15,
-        textAlign: "center",
-        marginTop: "5%"
-    },
-    button: {
-        width:320,
-        alignSelf: 'center',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 32,
-        borderRadius: 4,
-        elevation: 3,
-        backgroundColor: '#009688',
-        marginTop: "2%"
-      },
-      text: {
-        fontSize: 16,
-        lineHeight: 21,
-        fontWeight: 'bold',
-        letterSpacing: 0.25,
-        color: 'white',
-        textAlign: "center"
-      }
-})
+  container2: {
+    fontSize: 25,
+    textAlign: "left",
+    marginTop: "10%",
+    marginLeft: "5%",
+  },
 
-export default Derechos
+  laws: {
+    fontSize: 15,
+    textAlign: "center",
+    marginTop: "5%",
+  },
+  button: {
+    width: 250,
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: "#009688",
+    marginTop: "5%",
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: "bold",
+    letterSpacing: 0.25,
+    color: "white",
+    textAlign: "center",
+  },
+});
 
+export default Derechos;

screens/Drna.js

@@ -1,120 +1,158 @@
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity, TextInput} from "react-native";
-import { SelectList } from 'react-native-dropdown-select-list';
-
-
-
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+} from "react-native";
+import { SelectList } from "react-native-dropdown-select-list";
 
+const postData = (URL, data) => {
+  fetch(URL, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  })
+    .then((response) => response.json())
+    .then((responseJson) => {
+      console.log(responseJson);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
 
 const Drna = () => {
-    const [text, onChangeText] = React.useState(null);
-    const [number, onChangeNumber] = React.useState(null);
-    const [selected, setSelected] = React.useState("");
-    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 URL = "http://192.168.50.171:5000/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)" },
+  ];
 
-    return (
-        <View>
-            <Text
-                style={{
-                    fontSize: 30,
-                    textAlign: "center",
-                    marginTop: "20%"
-                }}
-            
-            >Formulario DRNA</Text>
+  return (
+    <View>
+      <Text
+        style={{
+          fontSize: 30,
+          textAlign: "center",
+          marginTop: "20%",
+        }}
+      >
+        Formulario DRNA
+      </Text>
 
-        <TextInput
-            style={styles.input}
-            value={text}
-            placeholder="Nombre"
-            placeholderTextColor={"grey"}
-        />
-        <TextInput
-            style={styles.input}
-            value={text}
-            placeholder="Email"
-            placeholderTextColor={"grey"}
-        />
-        <TextInput
+      <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 
+        /> */}
+      <SelectList
         boxStyles={styles.input}
         dropdownStyles={styles.input2}
         data={leyesViolaciones}
         setSelected={setSelected}
         placeholder="Leyes en violacion"
-    
-        />
-        <TextInput
-            style={styles.input}
-            value={text}
-            placeholder="Lugar de los hechos"
-            placeholderTextColor={"grey"}
-        />
-        <TextInput
-            style={styles.input2}
-            value={text}
-            placeholder="Descripcion de los hechos"
-            placeholderTextColor={"grey"}
-        />
-    <TouchableOpacity style={styles.button}>
-                <Text style={styles.text}>Someter</Text>
-    </TouchableOpacity>
-        </View>
-    )
-}
+      />
+      <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_type: selected.valueOf(),
+            complaint_description: description,
+          })
+        }
+      >
+        <Text style={styles.text}>Someter</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
 
-export default Drna
+export default Drna;
 
 const styles = StyleSheet.create({
-    input: {
-      height: 40,
-      margin: 12,
-      borderWidth: 0.5,
-      padding: 10,
-      borderRadius:10
-    },
-    input2: {
-        height: 100,
-        margin: 12,
-        borderWidth: 0.5,
-        padding: 15,
-        borderRadius:10
-      },
-      button: {
-        width:250,
-        alignSelf: 'center',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 32,
-        borderRadius: 4,
-        elevation: 3,
-        backgroundColor: '#009688',
-        marginTop: "5%"
-      },
-      text: {
-        fontSize: 16,
-        lineHeight: 21,
-        fontWeight: 'bold',
-        letterSpacing: 0.25,
-        color: 'white',
-      }
-  });
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 0.5,
+    padding: 10,
+    borderRadius: 10,
+  },
+  input2: {
+    height: 100,
+    margin: 12,
+    borderWidth: 0.5,
+    padding: 15,
+    borderRadius: 10,
+  },
+  button: {
+    width: 250,
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: "#009688",
+    marginTop: "5%",
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: "bold",
+    letterSpacing: 0.25,
+    color: "white",
+  },
+});

screens/Formulario.js

@@ -3,56 +3,68 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { NavigationContainer } from "@react-navigation/native";
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Linking} from "react-native";
-
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Linking,
+} from "react-native";
 
 const Formulario = () => {
-    const currNav = useNavigation()
-    return (
-        <View>
-            <Text
-                style={{
-                    fontSize: 30,
-                    textAlign: "center",
-                    marginTop: "20%"
-                }}
-            
-            >Llenar formulario EPA y DRNA</Text>
-    
-            <TouchableOpacity style={styles.button}
-            onPress={() => currNav.navigate("Drna")}>
-                    <Text style={styles.text}>Formulario DRNA</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button}
-            onPress={() => {
-                            Linking.openURL("https://echo.epa.gov/denuncie-violaciones-ambientales");
-                        }}>
-                <Text style={styles.text}>Formulario EPA</Text>
-            </TouchableOpacity>
-        </View>
-    )
-}
+  const currNav = useNavigation();
+  return (
+    <View>
+      <Text
+        style={{
+          fontSize: 30,
+          textAlign: "center",
+          marginTop: "20%",
+        }}
+      >
+        Llenar formulario EPA y DRNA
+      </Text>
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => currNav.navigate("Drna")}
+      >
+        <Text style={styles.text}>Formulario DRNA</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => {
+          Linking.openURL(
+            "https://echo.epa.gov/denuncie-violaciones-ambientales"
+          );
+        }}
+      >
+        <Text style={styles.text}>Formulario EPA</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
 
-export default Formulario
+export default Formulario;
 
 const styles = StyleSheet.create({
-    button: {
-      width:250,
-      alignSelf: 'center',
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingVertical: 12,
-      paddingHorizontal: 32,
-      borderRadius: 4,
-      elevation: 3,
-      backgroundColor: '#009688',
-      marginTop: "5%"
-    },
-    text: {
-      fontSize: 16,
-      lineHeight: 21,
-      fontWeight: 'bold',
-      letterSpacing: 0.25,
-      color: 'white',
-    }
-  })
+  button: {
+    width: 250,
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: "#009688",
+    marginTop: "5%",
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: "bold",
+    letterSpacing: 0.25,
+    color: "white",
+  },
+});

screens/Lista.js

@@ -1,19 +1,52 @@
-import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity} from "react-native";
+import React, { useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
 
 const Lista = () => {
-    return (
-        <View>
-            <Text
-                style={{
-                    fontSize: 30,
-                    textAlign: "center",
-                    marginTop: "20%"
-                }}
-            
-            >Listado de denuncias</Text>
-        </View>
-    )
-}
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
 
-export default Lista
+  const getComplaints = async () => {
+    try {
+      const response = await fetch("http://192.168.50.171:5000/complaints/all");
+      const json = await response.json();
+      setData(json.Complaints);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getComplaints();
+  }, []);
+
+  return (
+    <View style={{ flex: 1, padding: 24 }}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({ id }, index) => id}
+          renderItem={({ item }) => (
+            <Text style={{ padding: 8 }}>
+              ID:{item.id}, Tipo de denuncia: {item.complaint_type}, Hecha por:{" "}
+              {item.name}, en el lugar: {item.place}, descripcion del problema:{" "}
+              {item.complaint_description}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default Lista;