updating date-time and location picker layout

src/app/components/EventLocationInput.js

@@ -3,6 +3,7 @@ import { EventLocationContext } from "../context/EventLocationContext";
 
 import { Text } from "react-native";
 import { dimensions } from "../config/dimensions";
+import colors from "../config/colors";
 
 const EventLocationInput = () => {
     const context = useContext(EventLocationContext);
@@ -11,7 +12,8 @@ const EventLocationInput = () => {
         <Text style={{
             fontSize: dimensions.text.default,
             textAlign: "justify",
-            flex: 1
+            flex: 1,
+            backgroundColor: colors.secondary,
         }}>
             {context.eventLocation}
         </Text>

src/app/components/forms/FormDatePicker.js

@@ -52,17 +52,17 @@ const FormDatePicker = (props) => {
     setShow(false);
 
     if (mode == "date") {
-        setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
-        props.onDateChange(auxDate);
-        setMode("time");
-        setShow(true); // to show the picker again in time mode
-      } 
-      else {
-        setTime(moment(auxDate));
-        props.onTimeChange(auxDate);
-        setShow(false);
-        setMode("date");
-      }
+      setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
+      props.onDateChange(auxDate);
+      setMode("time");
+      setShow(true); // to show the picker again in time mode
+    }
+    else {
+      setTime(moment(auxDate));
+      props.onTimeChange(auxDate);
+      setShow(false);
+      setMode("date");
+    }
   };
 
   const renderDatePicker = () => {
@@ -108,8 +108,13 @@ const FormDatePicker = (props) => {
         </View>
         <View style={styles.dateInput}>
           <Text style={{ fontSize: dimensions.text.default }}>
-            {" "}{date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
+            {" "}{date.format("DD/MM/YYYY")} {" | "} {time.format("HH:mm")}
           </Text>
+          <View>
+            <Text style={{ color: colors.primary }}>
+              Defina a data do evento
+            </Text>
+          </View>
         </View>
       </View>
       {Platform.OS !== "ios" && show && renderDatePicker()}
@@ -177,8 +182,8 @@ const FormDatePicker = (props) => {
 FormDatePicker.defaultProps = {
   textStyle: {},
   defaultDate: moment(),
-  onDateChange: () => {},
-  onTimeChange: () => {},
+  onDateChange: () => { },
+  onTimeChange: () => { },
 };
 
 const styles = StyleSheet.create({
@@ -198,7 +203,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   dateInput: {
-    flex: 0.8,
+    flex: 0.9,
     backgroundColor: colors.white,
     paddingLeft: 5,
   },
@@ -208,7 +213,7 @@ const styles = StyleSheet.create({
     width: 20,
     alignItems: "center",
     borderRadius: 5,
-    flex: 0.2,
+    flex: 0.1,
   },
 });
 

src/app/components/forms/FormLocationPicker.js

@@ -1,16 +1,18 @@
-import React from "react";
+import React, { useContext } from "react";
 import { StyleSheet, Text, View, PixelRatio } from "react-native";
 
 import { MaterialIcons } from "@expo/vector-icons";
 import colors from "../../config/colors";
 import EventLocationInput from "../EventLocationInput";
+import { dimensions } from "../../config/dimensions";
+import { EventLocationContext } from "../../context/EventLocationContext";
 
 function FormLocationPicker() {
+    const context = useContext(EventLocationContext);
+    const local = context.eventLocation.toString();
 
     return (
-        <View style={{ width:"100%", 
-        paddingLeft: (PixelRatio.get() >3 || PixelRatio.getFontScale() > 1.14  ? 0 : 15), 
-        marginTop: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? 10 : 0)}}>
+        <View style={{ marginTop: 10, width: "100%" }}>
             <View style={styles.location}>
                 <View style={styles.mapIcon}>
                     <MaterialIcons
@@ -22,16 +24,20 @@ function FormLocationPicker() {
                     />
                 </View>
                 <View style={styles.adressText}>
-                    <Text>
-                        <EventLocationInput />
+                    <Text style={{
+                        fontSize: dimensions.text.default,
+                        textAlign: "justify",
+                        flex: 1,
+                    }}>
+                        {local}
                     </Text>
+                    <View>
+                        <Text style={{ color: colors.primary, height: 50 }}>
+                            Defina o local no mapa
+                </Text>
+                    </View>
                 </View>
             </View>
-            <View>
-                <Text style={{ color: colors.primary }}>
-                    Defina o local no mapa
-            </Text>
-            </View>
         </View>
     );
 }
@@ -39,14 +45,14 @@ function FormLocationPicker() {
 const styles = StyleSheet.create({
     location: {
         //flex: 1,
-        width:"100%",
+        width: "100%",
         flexDirection: "row",
         alignItems: "flex-start",
         justifyContent: "space-between",
-       // backgroundColor: colors.secondary,
+        // backgroundColor: colors.secondary,
     },
     adressText: {
-        flex: 0.80,
+        flex: 0.90,
         paddingLeft: 5,
     },
     mapIcon: {
@@ -55,7 +61,7 @@ const styles = StyleSheet.create({
         width: 20,
         alignItems: "center",
         borderRadius: 5,
-        flex: 0.20,
+        flex: 0.10,
     },
 });
 

src/app/context/CurrentLocationContext.js

@@ -41,9 +41,9 @@ const CurrentLocationProvider = ({ children }) => {
         const address = await Location.reverseGeocodeAsync(coordenadas);
         if (address[0] != undefined) {
             var street = (address[0].street == null ? "" : address[0].street);
-            var number = (address[0].name == null ? "" : address[0].name);
-            var district = (address[0].district == null ? "" : address[0].district);
-            setCurrentLocation(street + ", "+ number + "\n" + district , coordenadas.x);
+            var number = (address[0].name == null ? "" : ", " + address[0].name);
+            var district = (address[0].district == null ? "" : "\n" + address[0].district);
+            setCurrentLocation(street + number +  district , coordenadas.x);
         }
         else{//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
             setCurrentLocation("Erro ao carregar localização", coordenadas.x);

src/app/screens/MapFormScreen.js

@@ -24,9 +24,9 @@ const MapFormScreen = (props) => {
     const address = await Location.reverseGeocodeAsync(coordenadas);
     if (address[0] != undefined) {      
       var street = (address[0].street == null ? "" : address[0].street);
-      var number = (address[0].name == null ? "" : address[0].name);
-      var district = (address[0].district == null ? "" : address[0].district);
-      context.saveNewLocation(street + ", " + number + "\n" + district, coordenadas);
+      var number = (address[0].name == null ? "" : ", " + address[0].name);
+      var district = (address[0].district == null ? "" : "\n" + address[0].district);
+      context.saveNewLocation(street + number +  district, coordenadas);
     } else {
       //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
       context.saveNewLocation("Erro ao carregar endereço", coordenadas);
@@ -63,7 +63,7 @@ const MapFormScreen = (props) => {
           ...lat_long_delta,
         }}
         onRegionChangeComplete={(r) => {
-          console.log(r);
+         // console.log(r);
           setMarker({ latitude: r.latitude, longitude: r.longitude });
         }}
       />

src/app/screens/PluviometerSharingDataScreen.js

@@ -87,18 +87,14 @@ function PluviometerSharingDataScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
+              flexDirection: "column",
               justifyContent: "space-between",
               alignContent: "flex-start",
             }}
           >
             {/*Data da coleta:*/}
             <View
-              style={{
-                flex: 0.48,
-                borderRightColor: colors.primary,
-                borderRightWidth: 1,
-              }}
+              style={{ flex: 1 }}
             >
               <FormDatePicker
                 textStyle={{
@@ -111,7 +107,7 @@ function PluviometerSharingDataScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.52 }}>
+            <View style={{ flex: 1 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >

src/app/screens/RainSharingDataScreen.js

@@ -131,7 +131,7 @@ function RainSharingDataScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
+              flexDirection: "column",
               justifyContent: "space-between",
               alignContent: "flex-start",
             }}
@@ -139,9 +139,7 @@ function RainSharingDataScreen(props) {
             {/*Data da coleta:*/}
             <View
               style={{
-                flex: 0.48,
-                borderRightColor: colors.primary,
-                borderRightWidth: 1,
+                flex: 1,
               }}
             >
               <FormDatePicker
@@ -155,7 +153,7 @@ function RainSharingDataScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.52 }}>
+            <View style={{ flex: 1 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >

src/app/screens/RiverFloodSharingDataScreen.js

@@ -129,18 +129,14 @@ function RiverFloodSharingDataScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
+              flexDirection: "column",
               justifyContent: "space-between",
               alignContent:"flex-start",
             }}
           >
             {/*Data da coleta:*/}
             <View
-              style={{
-                flex: 0.48,
-                borderRightColor: colors.primary,
-                borderRightWidth: 1,
-              }}
+              style={{ flex: 1 }}
             >
               <FormDatePicker
                 textStyle={{
@@ -153,7 +149,7 @@ function RiverFloodSharingDataScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.52 }}>
+            <View style={{ flex: 1 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >

src/app/screens/SharingFloodZonesScreen.js

@@ -115,18 +115,14 @@ function SharingFloodZonesScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
+              flexDirection: "column",
               justifyContent: "space-between",
               alignContent:"flex-start",
             }}
           >
             {/*Data da coleta:*/}
             <View
-              style={{
-                flex: 0.48,
-                borderRightColor: colors.primary,
-                borderRightWidth: 1,
-              }}
+              style={{ flex: 0.1 }}
             >
               <FormDatePicker
                 textStyle={{
@@ -139,7 +135,7 @@ function SharingFloodZonesScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.51 }}>
+            <View style={{ flex: 1 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >