Adjusting pluviometerRegister screen

src/app/components/DatePicker.js

@@ -98,13 +98,13 @@ export default function DatePicker(props) {
         locale={"pt-br"}
         minimumDate={new Date(moment().subtract(1, "month"))}
         maximumDate={new Date(moment())}
-        // formatChosenDate={(selectedDate) => {
-        //   if (mode == "date") {
-        //     return moment(selectedDate).format("DD/mm/YYYY");
-        //   } else {
-        //     return moment(selectedDate).format("HH:mm");
-        //   }
-        // }} //formatar a data e hora do selected date
+        formatChosenDate={(selectedDate) => {
+          if (mode == "date") {
+            return moment(selectedDate).format("DD/mm/YYYY");
+          } else {
+            return moment(selectedDate).format("HH:mm");
+          }
+        }} //formatar a data e hora do selected date
         display={Platform.OS === "ios" ? "spinner" : "default"}
         onChange={Platform.OS === "ios" ? onChange : androidOnChange}
       />

src/app/components/PickEventDateLocation.js

@@ -23,7 +23,7 @@ export default function PickEventDateLocation({
         paddingBottom:24
       }}
     >
-      <View>
+      {/* <View> */}
       <FormDatePicker
         textStyle={{
           borderColor: colors.gray,
@@ -35,7 +35,7 @@ export default function PickEventDateLocation({
         onTimeChange={(value) => setTime(value)}
         time={time}
       />
-      </View>
+      {/* </View> */}
       {location && (
         <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
           <FormLocationPicker />

src/app/components/SchoolPicker.js

@@ -1,140 +1,131 @@
-import React, { useState,  Fragment } from "react";
+import React, { useState, Fragment } from "react";
 import { StyleSheet, View } from "react-native";
 
-import { FontAwesome5 } from '@expo/vector-icons';
+import { FontAwesome5 } from "@expo/vector-icons";
 import colors from "../config/colors";
-import SearchableDropdown from 'react-native-searchable-dropdown';
+import SearchableDropdown from "react-native-searchable-dropdown";
 
 const items = [
-    //substituir posteriormente pelas escolas
-    {
-        id: 1,
-        name: 'JavaScript',
-    },
-    {
-        id: 2,
-        name: 'Java',
-    },
-    {
-        id: 3,
-        name: 'Ruby',
-    },
-    {
-        id: 4,
-        name: 'React Native',
-    },
-    {
-        id: 5,
-        name: 'PHP',
-    },
-    {
-        id: 6,
-        name: 'Python',
-    },
+  //substituir posteriormente pelas escolas
+  {
+    id: 1,
+    name: "JavaScript",
+  },
+  {
+    id: 2,
+    name: "Java",
+  },
+  {
+    id: 3,
+    name: "Ruby",
+  },
+  {
+    id: 4,
+    name: "React Native",
+  },
+  {
+    id: 5,
+    name: "PHP",
+  },
+  {
+    id: 6,
+    name: "Python",
+  }, 
+  {
+    id: 7,
+    name: "Python",
+  },
+  {
+    id: 8,
+    name: "Python",
+  },
+
+  {
+    id: 9,
+    name: "Python",
+  },
 ];
 
 function SchoolPicker(props) {
-    const [selectedItems, setSelectedItems] = useState(null);
-
-    const selected = ( i ) => {
-        setSelectedItems(i);
-        props.itemSelected(i);
-        //console.log(i.name);
-    };
-
-
-    return (
-        <View style={{ flex: 1, width: "100%", marginTop: 10 }}>
-            <View style={styles.location}>
-                <View style={styles.mapIcon}>
-                    <FontAwesome5
-                        name="university"
-                        size={28}
-                        color="white"
-                        alignItems="center"
-                        alignContent="center"
-                    />
-                </View>
-                <View style={styles.adressText}>
-                    <Fragment>
-                        <SearchableDropdown
-                            multi={false}
-                            selectedItems={selectedItems}
-                            onItemSelect={(item) => {
-                                selected(item)
-                            }}
-                            containerStyle={{ padding: 5 }}
-                            itemStyle={{
-                                padding: 10,
-                                marginTop: 2,
-                                backgroundColor: '#ddd',
-                                borderColor: '#bbb',
-                                borderWidth: 1,
-                                borderRadius: 6,
-                                width: "100%",                                
-                            }} itemTextStyle={{ color: '#222' }}
-                            itemsContainerStyle={{ maxHeight: "100%" }}
-                            items={items}
-                            chip={true}
-                            resetValue={false}
-                            textInputProps={
-                                {
-                                    placeholder: "Escola onde você estuda...",
-                                    underlineColorAndroid: "transparent",
-                                    style: {
-                                        padding: 12,
-                                        borderWidth: 1,
-                                        borderColor: '#ccc',
-                                        borderRadius: 5,
-                                        alignItems:"flex-start",
-                                        alignContent:"flex-start",
-                                    },
-                                    onTextChange: text => console.log(text)
-                                }
+  const [selectedItems, setSelectedItems] = useState(null);
 
-                            }
-                            listProps={
-                                {
-                                    nestedScrollEnabled: true,
+  const selected = (i) => {
+    setSelectedItems(i);
+    props.itemSelected(i);
+    //console.log(i.name);
+  };
 
-                                }
-                            }
-                        />
-                    </Fragment>
-
-                </View>
-            </View>
+  return (
+    <View style={{ width: "100%" }}>
+      <View style={styles.location}>
+        <View style={styles.mapIcon}>
+          <FontAwesome5
+            name="university"
+            size={30}
+            color={colors.primary}
+          />
+        </View>
+        <View style={styles.adressText}>
+          <Fragment>
+            <SearchableDropdown
+              multi={false}
+              selectedItems={selectedItems}
+              onItemSelect={(item) => {
+                selected(item);
+              }}
+              itemStyle={{
+                padding: 10,
+                marginTop: 2,
+                backgroundColor: "#fff",
+                borderColor: "#bbb",
+                borderWidth: 1,
+                borderRadius: 6,
+                width: "100%",
+              }}
+              itemTextStyle={{ color: "#222" }}
+              itemsContainerStyle={{ maxHeight: "100%" }}
+              items={items}
+              chip={true}
+              resetValue={false}
+              textInputProps={{
+                placeholder: "Escola onde você estuda...",
+                underlineColorAndroid: "transparent",
+                style: {
+                  padding: 12,
+                  borderWidth: 1,
+                  borderColor: "#ccc",
+                  borderRadius: 5,
+                  alignItems: "flex-start",
+                  backgroundColor: colors.white,
+                  alignContent: "flex-start",
+                },
+                onTextChange: (text) => console.log(text),
+              }}
+            />
+          </Fragment>
         </View>
-    );
+      </View>
+    </View>
+  );
 }
 
 SchoolPicker.defaultProps = {
-    itemSelected: () =>{ },
+  itemSelected: () => {},
 };
 
 const styles = StyleSheet.create({
-    location: {
-        //flex: 1,
-        width: "100%",
-        flexDirection: "row",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        zIndex: 10,
-        position: "absolute",
-        backgroundColor: colors.white,
-    },
-    adressText: {
-        flex: 0.90,
-    },
-    mapIcon: {
-        backgroundColor: colors.primary,
-        padding: 8,
-        width: 20,
-        alignItems: "center",
-        borderRadius: 5,
-        flex: 0.10,
-        marginTop: 8,
-    },
+  location: {
+    flexDirection: "row",
+  },
+  adressText: {
+    flex: 1
+  },
+  mapIcon: {
+    paddingTop: 10,
+    alignSelf: "flex-start",
+    paddingRight: 12,
+
+  },
 });
 
 export default SchoolPicker;

src/app/components/forms/FormDatePicker.js

@@ -1,71 +1,79 @@
-import React, { useState } from "react";
-import {
-  Modal,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-  Platform,
-  TouchableOpacity,
-  Alert,
-} from "react-native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import DateTimePicker from "@react-native-community/datetimepicker";
 
-import moment from "moment";
 import colors from "../../config/colors";
 import { dimensions } from "../../config/dimensions";
-import { showMessage } from "react-native-flash-message";
 import DatePicker from "../../components/DatePicker";
 
-const FormDatePicker = (props) => {
-  console.log("date " + props.date + " time " + props.time)
+function EventsDatePicker(props) {
   return (
-    <DatePicker
-      textStyle={{
-        borderColor: colors.gray,
-        borderWidth: 3,
+    <View
+      style={{
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-start",
       }}
-      defaultDate={new Date()}
-      onDateChange={props.onDateChange}
-      onTimeChange={props.onTimeChange}
     >
-      <View
-        style={{
-          width: "100%",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "flex-start",
-        }}
-      >
-        <View style={styles.dateIcon}>
-          <MaterialCommunityIcons
-            name="calendar-today"
-            size={20}
-            color="white"
-          />
-        </View>
-        <View style={styles.dateInput}>
-          <Text style={{ fontSize: dimensions.text.default }}>
-            {" "}
-            {props.date.format("DD/MM/YYYY")} {" | "}{" "}
-            {props.time.format("HH:mm")}
+      <View style={styles.dateIcon}>
+        <MaterialCommunityIcons name="calendar-today" size={20} color="white" />
+      </View>
+      <View style={styles.dateInput}>
+        <Text style={{ fontSize: dimensions.text.default }}>
+          {" "}
+          {props.date.format("DD/MM/YYYY")} {" | "} {props.time.format("HH:mm")}
+        </Text>
+        <View>
+          <Text style={{ color: colors.primary }}>
+            {props.subtitle ? props.subtitle : " Defina a data do evento"}
           </Text>
-          <View>
-            <Text style={{ color: colors.primary }}>
-              {props.subtitle ? props.subtitle : " Defina a data do evento"}
-            </Text>
-          </View>
         </View>
       </View>
-    </DatePicker>
+    </View>
+  );
+}
+
+function PluvRegisterPicker(props) {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+      }}
+    >
+        <MaterialCommunityIcons name="calendar-today" size={30} color={colors.primary} />
+      <View style={styles.dateInput}>
+        <Text style={{ fontSize: dimensions.text.default }}>
+          {props.date.format("DD/MM/YYYY")} {" | "} {props.time.format("HH:mm")}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export default function FormDatePicker({ formTypeFace = "events", ...props }) {
+  return (
+      <DatePicker
+        textStyle={{
+          borderColor: colors.gray,
+          borderWidth: 3,
+        }}
+        defaultDate={new Date()}
+        onDateChange={props.onDateChange}
+        onTimeChange={props.onTimeChange}
+      >
+        {formTypeFace == "events"
+          ? EventsDatePicker(props)
+          : PluvRegisterPicker(props)}
+      </DatePicker>
   );
-};
+}
 
 const styles = StyleSheet.create({
   dateInput: {
-    paddingLeft: 16,
-    height: "100%",
+    paddingLeft: 12,
     flexDirection: "column",
     justifyContent: "center",
   },
@@ -78,5 +86,3 @@ const styles = StyleSheet.create({
     borderRadius: 5,
   },
 });
-
-export default FormDatePicker;

src/app/components/forms/FormLocationPicker.js

@@ -12,12 +12,11 @@ function FormLocationPicker({ subtitle }) {
 
   return (
       <View style={styles.location}>
-
         <View style={styles.mapIcon}>
           <MaterialIcons
             name="location-on"
-            size={20}
-            color="white"
+            size={30}
+            color={colors.primary}
           />
         </View>
 
@@ -33,15 +32,12 @@ function FormLocationPicker({ subtitle }) {
             {subtitle ? subtitle : "Defina o local no mapa"}
           </Text>
         </View>
-
       </View>
   );
 }
 
 const styles = StyleSheet.create({
   location: {
-    flex: 1,
-    width: "100%",
     flexDirection: "row",
     alignContent: "space-around",
     justifyContent: "flex-start",
@@ -49,13 +45,10 @@ const styles = StyleSheet.create({
 
   adressText: {
     height: "100%",
-    paddingLeft: 24,
+    paddingLeft: 12,
   },
 
   mapIcon: {
-    backgroundColor: colors.primary,
-    width: 40,
-    height: 40,
     justifyContent: "center",
     alignItems: "center",
     borderRadius: 5,

src/app/components/forms/SubmitButton.js

@@ -4,12 +4,13 @@ import { useFormikContext } from "formik";
 import Button from "../Button";
 import {View} from "react-native";
 
-function SubmitButton({ title }) {
+function SubmitButton({ title, paddingHorizontal = 16 }) {
   const { handleSubmit } = useFormikContext();
 
   return (
   <View
-    style={{paddingHorizontal: 16}}>
+    style={{paddingHorizontal: paddingHorizontal}}
+  >
       <Button  title={title} onPress={handleSubmit} />
     </View>
   );

src/app/config/colors.js

@@ -1,6 +1,6 @@
 export default {
   primary: "#006493",
-  secondary: "rgba(74, 141, 183, 0.87)",
+  secondary: "#4A8DB7",
   black: "#000",
   white: "#fff",
   medium: "#6e6969",

src/app/screens/PluviometerRegisterScreen.js

@@ -13,6 +13,7 @@ import { EventLocationContext } from "../context/EventLocationContext";
 import SchoolPicker from "../components/SchoolPicker";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import DatePicker from "../components/DatePicker";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 const dims = scaleDimsFromWidth(85, 85, 25);
 
@@ -30,7 +31,11 @@ function PluviometerRegisterScreen(props) {
   const [school, setSchool] = useState();
 
   return (
-    <View style={styles.container}>
+    <View
+      style={{
+        padding: 16,
+      }}
+    >
       <Form
         initialValues={{}}
         onSubmit={() => {
@@ -43,9 +48,12 @@ function PluviometerRegisterScreen(props) {
           });
         }}
       >
+        {/* <KeyboardAwareScrollView */}
+        {/* keyboardShouldPersistTaps={"handled"} */}
+        {/* > */}
         <View
           style={{
-            alignContent: "flex-start",
+            height: "100%",
           }}
         >
           <Text style={styles.title}>Cadastro do Pluviômetro</Text>
@@ -54,38 +62,47 @@ function PluviometerRegisterScreen(props) {
             <Text
               style={{
                 marginTop: 24,
+                marginBottom: 12,
                 fontSize: dimensions.text.secondary,
                 fontWeight: "bold",
                 textAlign: "left",
-                color: colors.primary,
+                color: colors.secondary,
               }}
             >
               Data do cadastro:{" "}
             </Text>
 
-            <FormDatePicker
-              onDateChange={(value) => setDate(value)}
-              onTimeChange={(value) => setTime(value)}
-              date={date}
-              time={time}
-            />
-          </View>
+            <View
+              style={{
+                marginBottom: 24
+              }}
+            >
+              <FormDatePicker
+                onDateChange={(value) => setDate(value)}
+                onTimeChange={(value) => setTime(value)}
+                date={date}
+                time={time}
+                formTypeFace={"pluviometerRegister"}
+              />
+            </View>
 
-          {/* <View style={{ marginTop: 5 }}> */}
-          {/*   <Text style={styles.label}>Escola: </Text> */}
-          {/*   <SchoolPicker itemSelected={(value) => setSchool(value)} /> */}
-          {/* </View> */}
+            <TouchableOpacity
+              onPress={() => props.navigation.navigate("FormMap")}
+            >
+              <View>
+                <Text style={styles.label}>Endereço do pluviômetro*: </Text>
+                <FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
+              </View>
+            </TouchableOpacity>
 
-          {/* <TouchableOpacity */}
-          {/*   onPress={() => props.navigation.navigate("FormMap")} */}
-          {/* > */}
-          {/*   <View> */}
-          {/*     <Text style={styles.label}>Endereço do pluviômetro: </Text> */}
-          {/*     <FormLocationPicker subtitle="Defina o endereço do pluviômetro" /> */}
-          {/*   </View> */}
-          {/* </TouchableOpacity> */}
+            <View style={{ marginTop: 24, marginBottom: 12 }}>
+              <Text style={styles.label}>Instituição: </Text>
+              <SchoolPicker itemSelected={(value) => setSchool(value)} />
+            </View>
 
-          <SubmitButton title="Cadastrar" alignContent="flex-end" />
+            <SubmitButton title="Cadastrar" paddingHorizontal={0} />
+          </View>
+          {/* </KeyboardAwareScrollView> */}
         </View>
       </Form>
     </View>
@@ -93,9 +110,6 @@ function PluviometerRegisterScreen(props) {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-  },
   image: {
     width: dims.width * 0.8,
     height: dims.height * 0.8,
@@ -104,16 +118,17 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: dimensions.text.secondary,
+    marginBottom: 12,
     fontWeight: "bold",
     textAlign: "left",
-    color: colors.lightBlue,
+    color: colors.secondary,
   },
   title: {
-    fontSize: 16,
+    fontSize: 18,
     fontWeight: "bold",
     textAlign: "center",
     color: colors.primary,
-  }, 
+  },
 });
 
 export default PluviometerRegisterScreen;