layout - select location

src/app/components/forms/FormDatePicker.js

@@ -99,8 +99,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>
@@ -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: {
     backgroundColor: colors.cerulean,
-     padding: 10, 
+    padding: 8,
     width: 20,
     alignItems: "center",
     borderRadius: 5,
-     flex: 0.09,
+    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"
@@ -88,11 +89,11 @@ function PluviometerSharingDataScreen(props) {
             styles={{ width: 50 }}
           />
 
-          <View style={{ marginTop: 10, flex: 1 }}>
+          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
             {/*Data da coleta:*/}
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
               <FormDatePicker
                 textStyle={{
-                padding: 15,
                   borderColor: colors.gray,
                   borderWidth: 3,
                 }}
@@ -101,6 +102,12 @@ function PluviometerSharingDataScreen(props) {
                 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,11 +162,11 @@ 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:*/}
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
               <FormDatePicker
                 textStyle={{
-                padding: 15,
                   borderColor: colors.gray,
                   borderWidth: 3,
                 }}
@@ -174,6 +175,11 @@ function RainSharingDataScreen(props) {
                 onTimeChange={(value) => setTime(value)}
               />
             </View>
+            {/*Local do evento:*/}
+            <View style={{ flex: 0.48 }}>
+              <FormLocationPicker />
+            </View>
+          </View>
 
           <FormField
             maxLength={255}

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,11 +140,11 @@ 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:*/}
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
               <FormDatePicker
                 textStyle={{
-                padding: 15,
                   borderColor: colors.gray,
                   borderWidth: 3,
                 }}
@@ -152,6 +153,11 @@ function RiverFloodSharingDataScreen(props) {
                 onTimeChange={(value) => setTime(value)}
               />
             </View>
+            {/*Local do evento:*/}
+            <View style={{ flex: 0.48 }}>
+              <FormLocationPicker />
+            </View>
+          </View>
 
           <FormField
             maxLength={255}

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);
@@ -106,11 +107,11 @@ 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:*/}
+            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
               <FormDatePicker
                 textStyle={{
-                padding: 15,
                   borderColor: colors.gray,
                   borderWidth: 3,
                 }}
@@ -119,6 +120,11 @@ function SharingFloodZonesScreen(props) {
                 onTimeChange={(value) => setTime(value)}
               />
             </View>
+            {/*Local do evento:*/}
+            <View style={{ flex: 0.48 }}>
+              <FormLocationPicker />
+            </View>
+          </View>
 
           <FormField
             maxLength={255}