creating pluviometer register screen

src/app/components/SchoolPicker.js

@@ -69,7 +69,6 @@ function SchoolPicker() {
                                     borderWidth: 1,
                                     borderRadius: 5,
                                 }} itemTextStyle={{ color: '#222' }}
-                                itemsContainerStyle={{ maxHeight: 140 }}
                                 items={items}
                                 chip={true}
                                 resetValue={false}
@@ -103,16 +102,16 @@ function SchoolPicker() {
 
 const styles = StyleSheet.create({
     location: {
-        flex: 1,
+        //flex: 1,
         width: "100%",
         flexDirection: "row",
-        alignItems: "center",
+        alignItems: "flex-start",
         justifyContent: "space-between",
         // backgroundColor: colors.secondary,
     },
     adressText: {
-        flex: 1,
-        textAlign: "center",
+        flex: 0.90,
+        paddingLeft: 5,
     },
     mapIcon: {
         backgroundColor: colors.primary,

src/app/screens/PluviometerRegisterScreen.js

@@ -0,0 +1,123 @@
+import React, { useState, useContext, useEffect } from "react";
+import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView } from "react-native";
+import * as Yup from "yup";
+import {
+    Form,
+    FormField,
+    FormPicker as Picker,
+    SubmitButton,
+} from "../components/forms";
+import Screen from "../components/Screen";
+import useLocation from "../hooks/useLocation";
+import FormImagePicker from "../components/forms/FormImagePicker";
+import { insertPluviometerData } from "../database/databaseLoader";
+import { showMessage } from "react-native-flash-message";
+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";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import { EventLocationContext } from "../context/EventLocationContext";
+import SchoolPicker from "../components/SchoolPicker";
+
+
+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());
+
+    return (
+        <Screen style={styles.container}>
+            <Form>
+                <View style={{ flex: 1 }}>
+                    <View
+                        style={{
+                            flex: 1,
+                            flexDirection: "column",
+                            justifyContent: "space-between",
+                            alignContent: "flex-start",
+                        }}
+
+                    >
+
+                        <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>
+
+                            <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: 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>
+                    </View>
+                    <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
+                </View>
+            </Form>
+        </Screen>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 10,
+        flex: 1,
+    },
+    image: {
+        width: dims.width * 0.8,
+        height: dims.height * 0.8,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    label: {
+        fontSize: dimensions.text.secondary,
+        fontWeight: "bold",
+        textAlign: "left",
+        color: colors.lightBlue,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: "bold",
+        textAlign: "center",
+        color: colors.primary,
+    },
+});
+
+export default PluviometerRegisterScreen;