align date-time and location picker

src/app/components/EventLocationInput.js

@@ -2,12 +2,19 @@ import React, { useContext } from "react";
 import { EventLocationContext } from "../context/EventLocationContext";
 
 import { Text } from "react-native";
+import { dimensions } from "../config/dimensions";
 
 const EventLocationInput = () => {
     const context = useContext(EventLocationContext);
 
-    return(
-        <Text> {context.eventLocation} </Text>
+    return (
+        <Text style={{
+            fontSize: dimensions.text.default,
+            textAlign: "justify",
+            flex: 1
+        }}>
+            {context.eventLocation}
+        </Text>
     );
 
 }

src/app/components/forms/FormDatePicker.js

@@ -72,6 +72,7 @@ const FormDatePicker = (props) => {
         value={new Date(auxDate)}
         mode={mode}
         is24Hour={true}
+        locale={"pt-br"}
         minimumDate={new Date(moment().subtract(1, "month"))}
         maximumDate={new Date(moment())}
         formatChosenDate={(selectedDate) => {
@@ -91,9 +92,9 @@ const FormDatePicker = (props) => {
     <TouchableOpacity onPress={() => setShow(true)}>
       <View
         style={{
-          flex: 1,
+          width: "100%",
           flexDirection: "row",
-          alignItems: "center",
+          alignItems: "flex-start",
           justifyContent: "space-between",
         }}
       >
@@ -107,8 +108,7 @@ 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")} {"\n"} {time.format("HH:mm")}
           </Text>
         </View>
       </View>
@@ -199,9 +199,8 @@ const styles = StyleSheet.create({
   },
   dateInput: {
     flex: 0.8,
-    backgroundColor: colors.white,
-    borderRadius: 25,
-    marginVertical: 10,
+    backgroundColor: colors.white,    
+    paddingLeft: 5,
   },
   dateIcon: {
     backgroundColor: colors.primary,

src/app/components/forms/FormLocationPicker.js

@@ -8,7 +8,7 @@ import EventLocationInput from "../EventLocationInput";
 function FormLocationPicker() {
 
     return (
-        <View>
+        <View style={{ width:"100%", paddingLeft: 15 }}>
             <View style={styles.location}>
                 <View style={styles.mapIcon}>
                     <MaterialIcons
@@ -21,37 +21,39 @@ function FormLocationPicker() {
                 </View>
                 <View style={styles.adressText}>
                     <Text>
-                            <EventLocationInput/>
+                        <EventLocationInput />
                     </Text>
                 </View>
             </View>
-            <Text style={{ color: colors.primary }}>
-                Defina o local no mapa
+            <View>
+                <Text style={{ color: colors.primary }}>
+                    Defina o local no mapa
             </Text>
+            </View>
         </View>
     );
 }
 
 const styles = StyleSheet.create({
     location: {
-        flex: 1,
+        //flex: 1,
+        width:"100%",
         flexDirection: "row",
-        alignItems: "center",
+        alignItems: "flex-start",
         justifyContent: "space-between",
+       // backgroundColor: colors.secondary,
     },
     adressText: {
-        flex: 0.78,
-        backgroundColor: colors.white,
-        borderRadius: 25,
-        marginVertical: 10,
+        flex: 0.80,
+        paddingLeft: 5,
     },
     mapIcon: {
         backgroundColor: colors.primary,
         padding: 8,
         width: 20,
-        alignItems: "center",
+        alignItems: "flex-start",
         borderRadius: 5,
-        flex: 0.2,
+        flex: 0.20,
     },
 });
 

src/app/screens/PluviometerSharingDataScreen.js

@@ -86,6 +86,7 @@ function PluviometerSharingDataScreen(props) {
               flex: 1,
               flexDirection: "row",
               justifyContent: "space-between",
+              alignContent:"flex-start",
             }}
           >
             {/*Data da coleta:*/}
@@ -107,7 +108,7 @@ function PluviometerSharingDataScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.48 }}>
+            <View style={{ flex: 0.52 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >

src/app/screens/RainSharingDataScreen.js

@@ -132,6 +132,7 @@ function RainSharingDataScreen(props) {
               flex: 1,
               flexDirection: "row",
               justifyContent: "space-between",
+              alignContent:"flex-start",
             }}
           >
             {/*Data da coleta:*/}
@@ -153,7 +154,7 @@ function RainSharingDataScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.48 }}>
+            <View style={{ flex: 0.52 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >

src/app/screens/RiverFloodSharingDataScreen.js

@@ -130,6 +130,7 @@ function RiverFloodSharingDataScreen(props) {
               flex: 1,
               flexDirection: "row",
               justifyContent: "space-between",
+              alignContent:"flex-start",
             }}
           >
             {/*Data da coleta:*/}
@@ -151,7 +152,7 @@ function RiverFloodSharingDataScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.48 }}>
+            <View style={{ flex: 0.52 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >

src/app/screens/SharingFloodZonesScreen.js

@@ -118,6 +118,7 @@ function SharingFloodZonesScreen(props) {
               flex: 1,
               flexDirection: "row",
               justifyContent: "space-between",
+              alignContent:"flex-start",
             }}
           >
             {/*Data da coleta:*/}
@@ -139,7 +140,7 @@ function SharingFloodZonesScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.48 }}>
+            <View style={{ flex: 0.51 }}>
               <TouchableOpacity
                 onPress={() => props.navigation.navigate("FormMap")}
               >