responsive screen for different screen and display sizes

src/app/components/forms/FormLocationPicker.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View, PixelRatio } from "react-native";
 
 import { MaterialIcons } from "@expo/vector-icons";
 import colors from "../../config/colors";
@@ -8,7 +8,9 @@ import EventLocationInput from "../EventLocationInput";
 function FormLocationPicker() {
 
     return (
-        <View style={{ width:"100%", paddingLeft: 15 }}>
+        <View style={{ width:"100%", 
+        paddingLeft: (PixelRatio.get() >3 || PixelRatio.getFontScale() > 1.14  ? 0 : 15), 
+        marginTop: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? 10 : 0)}}>
             <View style={styles.location}>
                 <View style={styles.mapIcon}>
                     <MaterialIcons
@@ -51,7 +53,7 @@ const styles = StyleSheet.create({
         backgroundColor: colors.primary,
         padding: 8,
         width: 20,
-        alignItems: "flex-start",
+        alignItems: "center",
         borderRadius: 5,
         flex: 0.20,
     },

src/app/navigation/AppNavigator.js

@@ -19,7 +19,7 @@ const AppNavigator = () => (
       component={FeedNavigator}
       options={{
         tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons name="home" color={color} size={size} />
+          <MaterialCommunityIcons name="home" color={color} size={size}/>
         ),
       }}
     />

src/app/screens/PluviometerSharingDataScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
-import { StyleSheet, Text, View, ScrollView } from "react-native";
+import { StyleSheet, Text, View, ScrollView, PixelRatio } from "react-native";
 import * as Yup from "yup";
 import {
   Form,
@@ -87,7 +87,7 @@ function PluviometerSharingDataScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: "row",
+              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
               justifyContent: "space-between",
               alignContent: "flex-start",
             }}

src/app/screens/RainSharingDataScreen.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { StyleSheet, View, ScrollView } from "react-native";
+import { StyleSheet, View, ScrollView, PixelRatio } from "react-native";
 import * as Yup from "yup";
 
 import { Form, SubmitButton, FormField } from "../components/forms";
@@ -40,7 +40,7 @@ function RainSharingDataScreen(props) {
   }, []);
 
   const location = context.eventCoordinates;
-  const address  = context.eventLocation;
+  const address = context.eventLocation;
 
   return (
     <Screen style={styles.container}>
@@ -60,7 +60,7 @@ function RainSharingDataScreen(props) {
               duration: 1950,
               icon: "success",
               type: "success",
-              onPress: () => {},
+              onPress: () => { },
             });
             props.navigation.navigate("Home");
           }}
@@ -131,9 +131,9 @@ function RainSharingDataScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: "row",
+              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
               justifyContent: "space-between",
-              alignContent:"flex-start",
+              alignContent: "flex-start",
             }}
           >
             {/*Data da coleta:*/}

src/app/screens/RiverFloodSharingDataScreen.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from "react";
-import { StyleSheet, View, TouchableOpacity } from "react-native";
+import { StyleSheet, View, TouchableOpacity, PixelRatio } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -129,7 +129,7 @@ function RiverFloodSharingDataScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: "row",
+              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
               justifyContent: "space-between",
               alignContent:"flex-start",
             }}

src/app/screens/SharingFloodZonesScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
-import { StyleSheet, Text, Image, View } from "react-native";
+import { StyleSheet, Text, Image, View, PixelRatio } from "react-native";
 import * as Yup from "yup";
 
 import { Form, SubmitButton, FormField } from "../components/forms";
@@ -115,7 +115,7 @@ function SharingFloodZonesScreen(props) {
           <View
             style={{
               flex: 1,
-              flexDirection: "row",
+              flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
               justifyContent: "space-between",
               alignContent:"flex-start",
             }}