starting pluviometer diary screen

src/app/components/forms/FormDatePicker.js

@@ -207,7 +207,6 @@ const styles = StyleSheet.create({
   },
   dateInput: {
     flex: 0.9,
-    backgroundColor: colors.white,
     height: "100%",
     flexDirection: "column",
     justifyContent: "center",

src/app/screens/PluviometerDiaryScreen.js

@@ -0,0 +1,151 @@
+import React, { useState, useContext, useEffect } from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import Screen from "../components/Screen";
+import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
+import colors from "../config/colors/";
+
+import { FontAwesome5 } from '@expo/vector-icons';
+import { MaterialIcons } from "@expo/vector-icons";
+
+const dims = scaleDimsFromWidth(85, 85, 25);
+
+function PluviometerDiaryScreen(props) {
+    //Substituir por dados vindos da API
+    const school  = "Escola registrada do pluviômetro";
+    const profile = "Tipo de perfil do usuário";
+    const local   = "Endereço registrado do pluviômetro"
+    return (
+        <Screen style={styles.container}>
+            <View style={{ flex: 1 }}>
+                <Text style={{ textAlign: "center"  }}> 
+                    Gráfico do pluviometro
+                </Text>
+
+            </View>
+            <View
+                style={{                    
+                    flex: 1,
+                    flexDirection: "column",
+                    alignContent: "flex-start",
+                    justifyContent: "space-between",
+                }}>
+                {/* Endereço */}
+                < View style={{ flex: 1 }}>
+                <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 style={{
+                        fontSize: dimensions.text.default,
+                    }}>
+                        {local}
+                    </Text>
+                </View>
+                </View>
+                </View>
+
+                {/* Escola */}
+                <View style={{ flex: 1 }}>
+                    <View style={styles.location}>
+                        <View style={styles.mapIcon}>
+                            <FontAwesome5
+                                name="university"
+                                size={28}
+                                color="white"
+                                alignItems="center"
+                                alignContent="center"
+                            />
+                        </View>
+                        <View style={styles.adressText}>
+                            <Text style={{
+                                fontSize: dimensions.text.default,
+                            }}>
+                                { school }
+                        </Text>
+                        </View>
+                    </View>
+                </View>
+
+                {/* Usuário */}
+                <View style={{ flex: 1 }}>
+                    <View style={styles.location}>
+                        <View style={styles.mapIcon}>
+                            <FontAwesome5
+                                name="user-alt"
+                                size={28}
+                                color="white"
+                                alignItems="center"
+                                alignContent="center"
+                            />
+                        </View>
+                        <View style={styles.adressText}>
+                            <Text style={{
+                                fontSize: dimensions.text.default,
+                            }}>
+                                { profile }
+                        </Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </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,
+    },
+    location: {
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+    },
+    adressText: {
+        flex: 0.90,
+        height: "100%",
+        flexDirection: "column",
+        justifyContent: "center",
+        paddingLeft: 5,
+    },
+    mapIcon: {
+        backgroundColor: colors.primary,
+        padding: 8,
+        width: 20,
+        alignItems: "center",
+        borderRadius: 5,
+        flex: 0.10,
+        marginTop: 8,
+    },
+
+});
+
+export default PluviometerDiaryScreen;

src/package-lock.json

@@ -15881,6 +15881,11 @@
         }
       }
     },
+    "paths-js": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/paths-js/-/paths-js-0.4.11.tgz",
+      "integrity": "sha512-3mqcLomDBXOo7Fo+UlaenG6f71bk1ZezPQy2JCmYHy2W2k5VKpP+Jbin9H0bjXynelTbglCqdFhSEkeIkKTYUA=="
+    },
     "pause": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/pause/-/pause-0.1.0.tgz",
@@ -16068,6 +16073,11 @@
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
       "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
     },
+    "point-in-polygon": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
+      "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -16587,6 +16597,16 @@
         }
       }
     },
+    "react-native-chart-kit": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.11.0.tgz",
+      "integrity": "sha512-mRSfW+mcyVSi0UZKFucru5h5TPB6UcWrMi/DphICRpPJWlvIVAv/6VYGFA57NFDLoRVufFjbsRRrms+TOq61jw==",
+      "requires": {
+        "lodash": "^4.17.13",
+        "paths-js": "^0.4.10",
+        "point-in-polygon": "^1.0.1"
+      }
+    },
     "react-native-flash-message": {
       "version": "0.1.18",
       "resolved": "https://registry.npmjs.org/react-native-flash-message/-/react-native-flash-message-0.1.18.tgz",

src/package.json

@@ -36,6 +36,7 @@
     "react-dom": "16.13.1",
     "react-google-places-autocomplete": "^3.2.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-chart-kit": "^6.11.0",
     "react-native-flash-message": "^0.1.18",
     "react-native-gesture-handler": "~1.7.0",
     "react-native-google-places-autocomplete": "^2.1.3",