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,35 +1,48 @@
 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',
+    name: "JavaScript",
   },
   {
     id: 2,
-        name: 'Java',
+    name: "Java",
   },
   {
     id: 3,
-        name: 'Ruby',
+    name: "Ruby",
   },
   {
     id: 4,
-        name: 'React Native',
+    name: "React Native",
   },
   {
     id: 5,
-        name: 'PHP',
+    name: "PHP",
   },
   {
     id: 6,
-        name: 'Python',
+    name: "Python",
+  }, 
+  {
+    id: 7,
+    name: "Python",
+  },
+  {
+    id: 8,
+    name: "Python",
+  },
+
+  {
+    id: 9,
+    name: "Python",
   },
 ];
 
@@ -42,17 +55,14 @@ function SchoolPicker(props) {
     //console.log(i.name);
   };
 
-
   return (
-        <View style={{ flex: 1, width: "100%", marginTop: 10 }}>
+    <View style={{ width: "100%" }}>
       <View style={styles.location}>
         <View style={styles.mapIcon}>
           <FontAwesome5
             name="university"
-                        size={28}
-                        color="white"
-                        alignItems="center"
-                        alignContent="center"
+            size={30}
+            color={colors.primary}
           />
         </View>
         <View style={styles.adressText}>
@@ -61,47 +71,38 @@ function SchoolPicker(props) {
               multi={false}
               selectedItems={selectedItems}
               onItemSelect={(item) => {
-                                selected(item)
+                selected(item);
               }}
-                            containerStyle={{ padding: 5 }}
               itemStyle={{
                 padding: 10,
                 marginTop: 2,
-                                backgroundColor: '#ddd',
-                                borderColor: '#bbb',
+                backgroundColor: "#fff",
+                borderColor: "#bbb",
                 borderWidth: 1,
                 borderRadius: 6,
                 width: "100%",
-                            }} itemTextStyle={{ color: '#222' }}
+              }}
+              itemTextStyle={{ color: "#222" }}
               itemsContainerStyle={{ maxHeight: "100%" }}
               items={items}
               chip={true}
               resetValue={false}
-                            textInputProps={
-                                {
+              textInputProps={{
                 placeholder: "Escola onde você estuda...",
                 underlineColorAndroid: "transparent",
                 style: {
                   padding: 12,
                   borderWidth: 1,
-                                        borderColor: '#ccc',
+                  borderColor: "#ccc",
                   borderRadius: 5,
                   alignItems: "flex-start",
+                  backgroundColor: colors.white,
                   alignContent: "flex-start",
                 },
-                                    onTextChange: text => console.log(text)
-                                }
-
-                            }
-                            listProps={
-                                {
-                                    nestedScrollEnabled: true,
-
-                                }
-                            }
+                onTextChange: (text) => console.log(text),
+              }}
             />
           </Fragment>
-
         </View>
       </View>
     </View>
@@ -114,26 +115,16 @@ SchoolPicker.defaultProps = {
 
 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,
+    flex: 1
   },
   mapIcon: {
-        backgroundColor: colors.primary,
-        padding: 8,
-        width: 20,
-        alignItems: "center",
-        borderRadius: 5,
-        flex: 0.10,
-        marginTop: 8,
+    paddingTop: 10,
+    alignSelf: "flex-start",
+    paddingRight: 12,
+
   },
 });
 

src/app/components/forms/FormDatePicker.js

@@ -1,35 +1,14 @@
-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,
-      }}
-      defaultDate={new Date()}
-      onDateChange={props.onDateChange}
-      onTimeChange={props.onTimeChange}
-    >
     <View
       style={{
         width: "100%",
@@ -39,17 +18,12 @@ const FormDatePicker = (props) => {
       }}
     >
       <View style={styles.dateIcon}>
-          <MaterialCommunityIcons
-            name="calendar-today"
-            size={20}
-            color="white"
-          />
+        <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")}
+          {props.date.format("DD/MM/YYYY")} {" | "} {props.time.format("HH:mm")}
         </Text>
         <View>
           <Text style={{ color: colors.primary }}>
@@ -58,14 +32,48 @@ const FormDatePicker = (props) => {
         </View>
       </View>
     </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>
 
+            <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,12 +118,13 @@ 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,