improving pluviometer register screen

src/app/components/SchoolPicker.js

@@ -1,5 +1,5 @@
 import React, { useContext, useState, Component, Fragment } from "react";
-import { StyleSheet, Text, View, PixelRatio, Picker } from "react-native";
+import { StyleSheet, Text, View, PixelRatio, Picker, KeyboardAvoidingView } from "react-native";
 
 import { MaterialIcons } from "@expo/vector-icons";
 import { FontAwesome5 } from '@expo/vector-icons';
@@ -7,8 +7,10 @@ import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
 import Screen from "./Screen";
 import SearchableDropdown from 'react-native-searchable-dropdown';
+import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 const items = [
+    //substituir posteriormente pelas escolas
     {
         id: 1,
         name: 'JavaScript',
@@ -35,83 +37,98 @@ const items = [
     },
 ];
 
-function SchoolPicker() {
+function SchoolPicker(props) {
     const [selectedItems, setSelectedItems] = useState(null);
-    console.log(selectedItems);
+
+    const selected = ( i ) => {
+        setSelectedItems(i);
+        props.itemSelected(i);
+        //console.log(i.name);
+    };
 
 
     return (
-            <View style={{ flex: 1, width: "100%" }}>
-                <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) => {
-                                    setSelectedItems(item)
-                                }}
-                                containerStyle={{ padding: 5 }}
-                                itemStyle={{
-                                    padding: 10,
-                                    marginTop: 2,
-                                    backgroundColor: '#ddd',
-                                    borderColor: '#bbb',
-                                    borderWidth: 1,
-                                    borderRadius: 5,
-                                }} itemTextStyle={{ color: '#222' }}
-                                items={items}
-                                chip={true}
-                                resetValue={false}
-                                textInputProps={
-                                    {
-                                        placeholder: "Escola onde você estuda...",
-                                        underlineColorAndroid: "transparent",
-                                        style: {
-                                            padding: 12,
-                                            borderWidth: 1,
-                                            borderColor: '#ccc',
-                                            borderRadius: 5,
-                                        },
-                                        onTextChange: text => console.log(text)
-                                    }
+        <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: "80%" }}
+                            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)
                                 }
-                                listProps={
-                                    {
-                                        nestedScrollEnabled: false,
-                                    
-                                    }
+
+                            }
+                            listProps={
+                                {
+                                    nestedScrollEnabled: true,
+
                                 }
-                            />
-                        </Fragment>
+                            }
+                        />
+                    </Fragment>
 
-                    </View>
                 </View>
             </View>
+        </View>
     );
 }
 
+SchoolPicker.defaultProps = {
+    itemSelected: () =>{ },
+};
+
 const styles = StyleSheet.create({
     location: {
         //flex: 1,
         width: "100%",
         flexDirection: "row",
         alignItems: "flex-start",
-        justifyContent: "space-between",
-        // backgroundColor: colors.secondary,
+        justifyContent: "center",
+        zIndex: 10,
+        position: "absolute",
+        backgroundColor: colors.white,
     },
     adressText: {
         flex: 0.90,
-        paddingLeft: 5,
     },
     mapIcon: {
         backgroundColor: colors.primary,
@@ -120,6 +137,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         borderRadius: 5,
         flex: 0.10,
+        marginTop: 8,
     },
 });
 

src/app/components/forms/FormDatePicker.js

@@ -16,6 +16,8 @@ import colors from "../../config/colors";
 import { dimensions } from "../../config/dimensions";
 
 const FormDatePicker = (props) => {
+  const [disabled,setDisabled]=useState(props.disabled);
+
   const { textStyle, defaultDate } = props;
   const [date, setDate] = useState(moment(defaultDate));
   const [show, setShow] = useState(false);
@@ -23,6 +25,7 @@ const FormDatePicker = (props) => {
   const [mode, setMode] = useState("date");
   const [time, setTime] = useState(moment(defaultDate));
 
+
   const onChange = (e, selectedDate) => {
     setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
   };
@@ -89,7 +92,7 @@ const FormDatePicker = (props) => {
   };
 
   return (
-    <TouchableOpacity onPress={() => setShow(true)}>
+    <TouchableOpacity disabled={disabled} onPress={() => setShow(true)}>
       <View
         style={{
           width: "100%",
@@ -112,7 +115,7 @@ const FormDatePicker = (props) => {
           </Text>
           <View>
             <Text style={{ color: colors.primary }}>
-              Defina a data do evento
+              {(props.subtitle ? props.subtitle : " Defina a data do evento")}
             </Text>
           </View>
         </View>
@@ -205,7 +208,9 @@ const styles = StyleSheet.create({
   dateInput: {
     flex: 0.9,
     backgroundColor: colors.white,
-    paddingLeft: 5,
+    height: "100%",
+    flexDirection: "column",
+    justifyContent: "center",
   },
   dateIcon: {
     backgroundColor: colors.primary,

src/app/components/forms/FormLocationPicker.js

@@ -7,7 +7,7 @@ import EventLocationInput from "../EventLocationInput";
 import { dimensions } from "../../config/dimensions";
 import { EventLocationContext } from "../../context/EventLocationContext";
 
-function FormLocationPicker() {
+function FormLocationPicker({ subtitle }) {
     const context = useContext(EventLocationContext);
     const local = context.eventLocation.toString();
 
@@ -33,7 +33,7 @@ function FormLocationPicker() {
                     </Text>
                     <View>
                         <Text style={{ color: colors.primary, height: 50 }}>
-                            Defina o local no mapa
+                            {(subtitle ? subtitle : "Defina o local no mapa" )}
                 </Text>
                     </View>
                 </View>

src/app/screens/PluviometerRegisterScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
-import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView } from "react-native";
+import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView, KeyboardAvoidingView, Platform } from "react-native";
 import * as Yup from "yup";
 import {
     Form,
@@ -17,9 +17,11 @@ import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 import moment from "moment";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
 import { EventLocationContext } from "../context/EventLocationContext";
 import SchoolPicker from "../components/SchoolPicker";
+import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+
 
 
 const dims = scaleDimsFromWidth(85, 85, 25);
@@ -27,69 +29,79 @@ const dims = scaleDimsFromWidth(85, 85, 25);
 function PluviometerRegisterScreen(props) {
     const context = useContext(EventLocationContext);
 
-    const amount = 2;
-
     useEffect(() => {
         context.defaultLocation();
     }, []);
+
     const location = context.eventCoordinates;
     const address = context.eventLocation;
-
     const [dateTime, setDateTime] = useState(moment());
-    const [time, setTime] = useState(moment());
+    const [school, setSchool] = useState();
 
     return (
         <Screen style={styles.container}>
-            <Form>
-                <View style={{ flex: 1 }}>
-                    <View
-                        style={{
-                            flex: 1,
-                            flexDirection: "column",
-                            justifyContent: "space-between",
-                            alignContent: "flex-start",
-                        }}
+            <Form
+            initialValues={{
 
-                    >
+            }}
+            onSubmit={() => {
+            //insertRainData({ ...values, rain, location, date, time, address });
+            showMessage({
+                message: "Ainda não implementado",
+                duration: 1950,
+                icon: "warning",
+                type: "warning",
+                onPress: () => { },
+              });
+            //props.navigation.navigate("Home");
+          }}>
 
-                        <View style={{ flex: 1 }}>
-                            <Text style={styles.title}> Cadastro do Pluviômetro </Text>
-                        </View>
-                        {/*Data da coleta:*/}
-
-                        <View
-                            style={{ flex: 2 }}
-                        >
-                            <Text style={styles.label}> Data do cadastro: </Text>
+                <View
+                    style={{
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        alignContent: "flex-start",
+                        flex: 0.9,
+                    }}
+                >
+                    <View style={{ flex: 0.8 }}>
+                        <Text style={styles.title}> Cadastro do Pluviômetro </Text>
+                    </View>
+                    <View style={{ flex: 2 }}>
+                        <Text style={styles.label}>Escola: </Text>
+                        <SchoolPicker
+                            itemSelected={(value) => setSchool(value)} />
+                    </View>
 
-                            <FormDatePicker
-                                textStyle={{
-                                    borderColor: colors.gray,
-                                    borderWidth: 3,
-                                }}
-                                defaultDate={new Date()}
-                                onDateChange={(value) => setDateTime(value)}
-                                onTimeChange={(value) => setTime(value)}
-                            />
-                        </View>
+                    <View style={{ flex: 2 }}>
                         {/*Local do evento:*/}
-                        <View style={{ flex: 2 }}>
-                            <ScrollView>
-                            <Text style={styles.label}> Endereço do pluviômetro: </Text>
-                            <TouchableOpacity
-                                onPress={() => props.navigation.navigate("FormMap")}
-                            >
-                                <FormLocationPicker />
-                            </TouchableOpacity>
-                            </ScrollView>
-                        </View>
-                        <View style={{ flex: 4 }}>
-                            <Text style={styles.label}> Escola: </Text>
-                            <SchoolPicker />
-                        </View>
+                        <Text style={styles.label}>Endereço do pluviômetro: </Text>
+                        <ScrollView>
+                            <FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
+                        </ScrollView>
+                    </View>
+                    {/*Data da coleta:*/}
+                    <View style={{ flex: 2 }}>
+                        <Text style={{
+                            fontSize: dimensions.text.secondary,
+                            fontWeight: "bold",
+                            textAlign: "left",
+                            color: colors.lightBlue, marginBottom: 10
+                        }}>Data do cadastro: </Text>
+                        <FormDatePicker
+                            disabled={true}
+                            textStyle={{
+                                borderColor: colors.gray,
+                                borderWidth: 3,
+                            }}
+                            subtitle=" "
+                            defaultDate={new Date()}
+                            onDateChange={(value) => setDateTime(value)}
+                            onTimeChange={(value) => setTime(value)}
+                        />
                     </View>
-                    <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
                 </View>
+                <SubmitButton title="Cadastrar" style={{ marginBottom: 100 }} />
             </Form>
         </Screen>
     );
@@ -98,7 +110,7 @@ function PluviometerRegisterScreen(props) {
 const styles = StyleSheet.create({
     container: {
         padding: 10,
-        flex: 1,
+        flex: 1
     },
     image: {
         width: dims.width * 0.8,

src/package.json

@@ -53,6 +53,7 @@
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.3",
     "react-navigation-tabs": "^2.10.1",
+    "searchable-flatlist": "0.0.4",
     "yup": "^0.28.5"
   },
   "devDependencies": {