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/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";
@@ -131,7 +131,7 @@ 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",
             }}

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",
             }}