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")}
@@ -106,28 +109,31 @@ function PluviometerSharingDataScreen(props) {
             <Text style={styles.labelStyle}>
               Quantidade de chuva:
             </Text>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
               <FormField
                 keyboardType="number-pad"
                 maxLength={200}
                 name="pluviometer"
                 placeholder="Digite a quantidade de chuva"
-              flex= {1}
               />
             </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"}}>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <View style={{ flex: 1 }}>
                 <FormField
                   keyboardType="numbers-and-punctuation"
                   maxLength={10}
                   name="data"
                   placeholder="dd/mm/aaaa"
-              width={240}
                   values={dateTime}
+                  flex={1}
                 />
+              </View>
                 <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
             </View>
             {/*
@@ -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,13 +1,14 @@
 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}>
+      <ScrollView>
         <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
           <TouchableOpacity
             style={{ alignItems: "center" }}
@@ -52,6 +53,7 @@ function SharingDataScreen({ navigation }) {
             <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
+
+  },
 });