pluviometer screen more responsive to display sizes

src/App.js

@@ -14,6 +14,7 @@ export default function App() {
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);
   const Stack = createStackNavigator();
+  
   return (
     <NavigationContainer theme={navigationTheme}>
         <SharingDataOptionsNavigator/>

src/app/navigation/SharingDataOptionsNavigator.js

@@ -15,7 +15,7 @@ function SharingDataOptionsNavigator() {
     return (
     <Stack.Navigator initialRouteName="SharingData">
       <Stack.Screen
-        name="nãoqueromais"
+        name="appNavigator"
         component={AppNavigator}
         options={{
             headerShown: false

src/app/screens/PluviometerSharingDataScreen.js

@@ -19,6 +19,9 @@ import { FontAwesome5 } from '@expo/vector-icons';
 import { showMessage } from "react-native-flash-message";
 import moment from 'moment';
 import colors from "../config/colors";
+import { scaleDimsFromWidth } from "../config/dimensions";
+
+const dims = scaleDimsFromWidth(85, 85, 25);
 
 const validationSchema = Yup.object().shape({
   pluviometer: Yup.number().required("Campo obrigatório").min(0, "O valor deve ser maior ou igual a 0.").max(10000).label("pluviometer"),
@@ -74,7 +77,7 @@ function PluviometerSharingDataScreen(props) {
   return (
     <Screen style={styles.container}>
 
-      <View style={{ alignSelf: "center" }}>
+      <View style={{ alignItems: "center" }}>
         <Image
           style={styles.image}
           source={require("../assets/pluviometro.png")}
@@ -87,7 +90,7 @@ function PluviometerSharingDataScreen(props) {
         <Form
           initialValues={{
             pluviometer: "",
-            data:"",
+            data: "",
             images: [],
           }}
           onSubmit={(values) => {
@@ -105,30 +108,33 @@ function PluviometerSharingDataScreen(props) {
           <View style={{ marginTop: 30, flex: 1 }}>
             <Text style={styles.labelStyle}>
               Quantidade de chuva:
-          </Text>
-            <FormField
-              keyboardType="number-pad"
-              maxLength={200}
-              name="pluviometer"
-              placeholder="Digite a quantidade de chuva" 
-              flex= {1}
-            />
+            </Text>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <FormField
+                keyboardType="number-pad"
+                maxLength={200}
+                name="pluviometer"
+                placeholder="Digite a quantidade de chuva"
+              />
+            </View>
           </View>
 
-          <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
+          <View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
             <Text style={styles.labelStyle}>
               Data da coleta:
             </Text>
-            <View style={{flexDirection:"row"}}>
-            <FormField
-              keyboardType="numbers-and-punctuation"
-              maxLength={10}
-              name="data"
-              placeholder="dd/mm/aaaa" 
-              width={240}
-              values={dateTime}
-            />
-            <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <View style={{ flex: 1 }}>
+                <FormField
+                  keyboardType="numbers-and-punctuation"
+                  maxLength={10}
+                  name="data"
+                  placeholder="dd/mm/aaaa"
+                  values={dateTime}
+                  flex={1}
+                />
+              </View>
+                <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
             </View>
             {/*
             <TouchableOpacity style={styles.datepickerStyle}
@@ -195,7 +201,7 @@ function PluviometerSharingDataScreen(props) {
               </View>
             </TouchableOpacity>
            */}
-            </View>
+          </View>
           <FormImagePicker
             backgroundColor="#1976D2"
             name="images"
@@ -217,8 +223,8 @@ const styles = StyleSheet.create({
 
   },
   image: {
-    width: 85,
-    height: 85,
+    width: dims.width * 0.8,
+    height: dims.height * 0.8,
     justifyContent: "center",
     alignItems: "center",
   },

src/app/screens/SharingDataScreen.js

@@ -1,57 +1,59 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 
-import { Image, Text, TouchableOpacity } from "react-native";
+import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
 import assets from "../config/assets"
 //1/3
 
 function SharingDataScreen({ navigation }) {
   return (
     <View style={styles.container}>
-      <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
-        <TouchableOpacity
-          style={{ alignItems: "center" }}
-          onPress={() => navigation.navigate("FloodSharingData")}
-        >
-          <Image
-            style={styles.floodingLogo}
-            source={assets.floodZones.floodIcon}
-          />
-          <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
-        </TouchableOpacity>
+      <ScrollView>
+        <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+          <TouchableOpacity
+            style={{ alignItems: "center" }}
+            onPress={() => navigation.navigate("FloodSharingData")}
+          >
+            <Image
+              style={styles.floodingLogo}
+              source={assets.floodZones.floodIcon}
+            />
+            <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
+          </TouchableOpacity>
 
-        <TouchableOpacity
-          style={{ alignItems: "center" }}
-          onPress={() => navigation.navigate("RainSharingData")}
-        >
-          <Image
-            style={styles.floodingLogo}
-            source={assets.rainLevel.rain_2_5}
-          />
-          <Text style={styles.text}>Chuva</Text>
-        </TouchableOpacity>
-      </View>
+          <TouchableOpacity
+            style={{ alignItems: "center" }}
+            onPress={() => navigation.navigate("RainSharingData")}
+          >
+            <Image
+              style={styles.floodingLogo}
+              source={assets.rainLevel.rain_2_5}
+            />
+            <Text style={styles.text}>Chuva</Text>
+          </TouchableOpacity>
+        </View>
 
-      <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
-        <TouchableOpacity
-          style={{ alignItems: "center" }}
-          onPress={() => navigation.navigate("PluviometerSharingData")}
-        >
-          <Image style={styles.floodingLogo} source={assets.pluviometer} />
-          <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
-        </TouchableOpacity>
+        <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+          <TouchableOpacity
+            style={{ alignItems: "center" }}
+            onPress={() => navigation.navigate("PluviometerSharingData")}
+          >
+            <Image style={styles.floodingLogo} source={assets.pluviometer} />
+            <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
+          </TouchableOpacity>
 
-        <TouchableOpacity
-          style={{ alignItems: "center" }}
-          onPress={() => navigation.navigate("RiverFloodData")}
-        >
-          <Image
-            style={styles.floodingLogo}
-            source={assets.riverLevel.riverIcon}
-          />
-          <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
-        </TouchableOpacity>
-      </View>
+          <TouchableOpacity
+            style={{ alignItems: "center" }}
+            onPress={() => navigation.navigate("RiverFloodData")}
+          >
+            <Image
+              style={styles.floodingLogo}
+              source={assets.riverLevel.riverIcon}
+            />
+            <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
     </View>
   );
 }
@@ -72,6 +74,12 @@ const styles = StyleSheet.create({
     height: 85,
     marginTop: 70,
   },
+  container: {
+    paddingHorizontal: 10,
+    paddingBottom: 10,
+    flex: 1
+
+  },
 });