layout - select location

src/app/components/forms/FormDatePicker.js

@@ -94,16 +94,15 @@ const FormDatePicker = (props) => {
           justifyContent: "space-between",
         }}
       >
-          <View style={styles.dateIcon}>
-          <MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center"/>
-          </View>
-          <View style={styles.dateInput}>
-            <Text style={{ fontSize: dimensions.text.default }}>
-              {" "}
-              {date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
-            </Text>
-          </View>
+        <View style={styles.dateIcon}>
+          <MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center" />
         </View>
+        <View style={styles.dateInput}>
+          <Text style={{ fontSize: dimensions.text.default }}>
+            {" "} {date.format("DD/MM/YYYY")} {"\n "} {time.format("HH:mm")}
+          </Text>
+        </View>
+      </View>
       {Platform.OS !== "ios" && show && renderDatePicker()}
 
       {Platform.OS === "ios" && show && (
@@ -190,19 +189,18 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   dateInput: {
-    flex: 0.91,
+    flex: 0.80,
     backgroundColor: colors.white,
     borderRadius: 25,
-    padding: 10,
     marginVertical: 10,
   },
-  dateIcon:{
+  dateIcon: {
     backgroundColor: colors.cerulean,
-     padding: 10, 
-     width: 20, 
-     alignItems: "center",
-     borderRadius: 5,
-     flex: 0.09,
+    padding: 8,
+    width: 20,
+    alignItems: "center",
+    borderRadius: 5,
+    flex: 0.20,
   }
 });
 

src/app/components/forms/FormLocationPicker.js

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+
+import { MaterialIcons } from '@expo/vector-icons';
+import colors from "../../config/colors";
+import { Colors } from "react-native/Libraries/NewAppScreen";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+const FormLocationPicker = (props) => {
+    return (
+        <TouchableOpacity>
+            <View>
+                <View style={styles.location}>
+                    <View style={styles.mapIcon}>
+                        <MaterialIcons name="location-on" size={28} color="white" alignItems="center" alignContent="center" />
+                    </View>
+                    <View style={styles.adressText}>
+                        <Text>{""} Endereço {"\n "}...</Text>
+                    </View>
+                </View>
+                <Text style={{ color: colors.primary }}>Defina o local no mapa</Text>
+            </View>
+        </TouchableOpacity>
+    );
+
+}
+
+const styles = StyleSheet.create({
+    location: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    adressText: {
+        flex: 0.78,
+        backgroundColor: colors.white,
+        borderRadius: 25,
+        marginVertical: 10,
+
+    },
+    mapIcon: {
+        backgroundColor: colors.cerulean,
+        padding: 8,
+        width: 20,
+        alignItems: "center",
+        borderRadius: 5,
+        flex: 0.20,
+    }
+});
+
+export default FormLocationPicker;

src/app/navigation/SharingDataOptionsNavigator.js

@@ -26,7 +26,7 @@ function SharingDataOptionsNavigator() {
         name="RainSharingData"
         component={RainSharingDataScreen}
         options={{
-          title: "Enviar uma informação",
+          title: "Chuva",
           headerStyle: {
             backgroundColor: "white",
           },
@@ -36,7 +36,7 @@ function SharingDataOptionsNavigator() {
         name="FloodSharingData"
         component={SharingFloodZonesScreen}
         options={{
-          title: "Enviar uma informação",
+          title: "Ponto de alagamento",
           headerStyle: {
             backgroundColor: "white",
           },
@@ -46,7 +46,7 @@ function SharingDataOptionsNavigator() {
         name="PluviometerSharingData"
         component={PluviometerSharingDataScreen}
         options={{
-          title: "Enviar uma informação",
+          title: "Pluviômetro",
           headerStyle: {
             backgroundColor: "white",
           },
@@ -56,7 +56,7 @@ function SharingDataOptionsNavigator() {
         name="RiverFloodData"
         component={RiverFloodSharingDataScreen}
         options={{
-          title: "Enviar uma informação",
+          title: "Nível de água no rio",
           headerStyle: {
             backgroundColor: "white",
           },

src/app/screens/PluviometerSharingDataScreen.js

@@ -16,6 +16,7 @@ import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 import moment from "moment";
+import FormLocationPicker from "../components/forms/FormLocationPicker";
 
 const dims = scaleDimsFromWidth(85, 85, 25);
 
@@ -72,7 +73,7 @@ function PluviometerSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <View style={{ marginTop: 30, flex: 1 }}>
+          <View style={{ flex: 1 }}>
             <Text style={styles.labelStyle}>Quantidade de chuva (mm):</Text>
             <FormField
               keyboardType="decimal-pad"
@@ -87,20 +88,26 @@ function PluviometerSharingDataScreen(props) {
             name="images"
             styles={{ width: 50 }}
           />
-          
-          <View style={{ marginTop: 10, flex: 1 }}>
+
+          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
             {/*Data da coleta:*/}
-            <FormDatePicker
-              textStyle={{
-                padding: 15,
-                borderColor: colors.gray,
-                borderWidth: 3,
-              }}
-              defaultDate={new Date()}
-              onDateChange={(value) => setDateTime(value)}
-              onTimeChange={(value) => setTime(value)}
-            />
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+              <FormDatePicker
+                textStyle={{
+                  borderColor: colors.gray,
+                  borderWidth: 3,
+                }}
+                defaultDate={new Date()}
+                onDateChange={(value) => setDateTime(value)}
+                onTimeChange={(value) => setTime(value)}
+              />
+            </View>
+            {/*Local do evento:*/}
+            <View style={{ flex: 0.48 }}>
+              <FormLocationPicker />
+            </View>
           </View>
+
           <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
           <View style={{ flex: 1 }}></View>
         </Form>

src/app/screens/RainSharingDataScreen.js

@@ -20,6 +20,7 @@ import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import assets from "../config/assets";
 import moment from "moment";
 import FormDatePicker from "../components/forms/FormDatePicker";
+import FormLocationPicker from "../components/forms/FormLocationPicker";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -161,18 +162,23 @@ function RainSharingDataScreen(props) {
 
           <FormImagePicker backgroundColor={colors.primary} name="images" />
 
-          <View style={{ marginTop: 10, flex: 1 }}>
+          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
             {/*Data da coleta:*/}
-            <FormDatePicker
-              textStyle={{
-                padding: 15,
-                borderColor: colors.gray,
-                borderWidth: 3,
-              }}
-              defaultDate={new Date()}
-              onDateChange={(value) => setDateTime(value)}
-              onTimeChange={(value) => setTime(value)}
-            />
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+              <FormDatePicker
+                textStyle={{
+                  borderColor: colors.gray,
+                  borderWidth: 3,
+                }}
+                defaultDate={new Date()}
+                onDateChange={(value) => setDateTime(value)}
+                onTimeChange={(value) => setTime(value)}
+              />
+            </View>
+            {/*Local do evento:*/}
+            <View style={{ flex: 0.48 }}>
+              <FormLocationPicker />
+            </View>
           </View>
 
           <FormField

src/app/screens/RiverFloodSharingDataScreen.js

@@ -21,6 +21,7 @@ import assets from "../config/assets";
 import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import moment from "moment";
 import FormDatePicker from "../components/forms/FormDatePicker";
+import FormLocationPicker from "../components/forms/FormLocationPicker";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -139,18 +140,23 @@ function RiverFloodSharingDataScreen(props) {
 
           <FormImagePicker backgroundColor={colors.primary} name="images" />
 
-          <View style={{ marginTop: 10, flex: 1 }}>
+          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
             {/*Data da coleta:*/}
-            <FormDatePicker
-              textStyle={{
-                padding: 15,
-                borderColor: colors.gray,
-                borderWidth: 3,
-              }}
-              defaultDate={new Date()}
-              onDateChange={(value) => setDateTime(value)}
-              onTimeChange={(value) => setTime(value)}
-            />
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+              <FormDatePicker
+                textStyle={{
+                  borderColor: colors.gray,
+                  borderWidth: 3,
+                }}
+                defaultDate={new Date()}
+                onDateChange={(value) => setDateTime(value)}
+                onTimeChange={(value) => setTime(value)}
+              />
+            </View>
+            {/*Local do evento:*/}
+            <View style={{ flex: 0.48 }}>
+              <FormLocationPicker />
+            </View>
           </View>
 
           <FormField

src/app/screens/SharingFloodZonesScreen.js

@@ -15,6 +15,7 @@ import Screen from "../components/Screen";
 import assets from "../config/assets";
 import moment from "moment";
 import FormDatePicker from "../components/forms/FormDatePicker";
+import FormLocationPicker from "../components/forms/FormLocationPicker";
 
 function submitForm(props) {
   console.log(props);
@@ -105,19 +106,24 @@ function SharingFloodZonesScreen(props) {
           )}
 
           <FormImagePicker name="images" height={10} />
-          
-          <View style={{ marginTop: 10, flex: 1 }}>
+
+          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
             {/*Data da coleta:*/}
-            <FormDatePicker
-              textStyle={{
-                padding: 15,
-                borderColor: colors.gray,
-                borderWidth: 3,
-              }}
-              defaultDate={new Date()}
-              onDateChange={(value) => setDateTime(value)}
-              onTimeChange={(value) => setTime(value)}
-            />
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+              <FormDatePicker
+                textStyle={{
+                  borderColor: colors.gray,
+                  borderWidth: 3,
+                }}
+                defaultDate={new Date()}
+                onDateChange={(value) => setDateTime(value)}
+                onTimeChange={(value) => setTime(value)}
+              />
+            </View>
+            {/*Local do evento:*/}
+            <View style={{ flex: 0.48 }}>
+              <FormLocationPicker />
+            </View>
           </View>
 
           <FormField