From bb3c9a5c175b497fe6f0bb6e50bb3f8a388dfa9b Mon Sep 17 00:00:00 2001
From: analuizaff <nanaluff@hotmail.com>
Date: Mon, 8 Mar 2021 22:16:19 -0300
Subject: [PATCH] responsive screen for different screen and display sizes

---
 src/app/components/forms/FormLocationPicker.js  |  8 +++++---
 src/app/navigation/AppNavigator.js              |  2 +-
 src/app/screens/PluviometerSharingDataScreen.js |  4 ++--
 src/app/screens/RainSharingDataScreen.js        | 10 +++++-----
 src/app/screens/RiverFloodSharingDataScreen.js  |  4 ++--
 src/app/screens/SharingFloodZonesScreen.js      |  4 ++--
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/components/forms/FormLocationPicker.js b/src/app/components/forms/FormLocationPicker.js
index fba949a..954fd92 100644
--- a/src/app/components/forms/FormLocationPicker.js
+++ b/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,
     },
diff --git a/src/app/navigation/AppNavigator.js b/src/app/navigation/AppNavigator.js
index 177de6e..a22ce31 100644
--- a/src/app/navigation/AppNavigator.js
+++ b/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}/>
         ),
       }}
     />
diff --git a/src/app/screens/PluviometerSharingDataScreen.js b/src/app/screens/PluviometerSharingDataScreen.js
index 6e33a5a..96953c9 100644
--- a/src/app/screens/PluviometerSharingDataScreen.js
+++ b/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",
             }}
diff --git a/src/app/screens/RainSharingDataScreen.js b/src/app/screens/RainSharingDataScreen.js
index 278185b..0f88a7d 100644
--- a/src/app/screens/RainSharingDataScreen.js
+++ b/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:*/}
diff --git a/src/app/screens/RiverFloodSharingDataScreen.js b/src/app/screens/RiverFloodSharingDataScreen.js
index 90e976e..0021bf6 100644
--- a/src/app/screens/RiverFloodSharingDataScreen.js
+++ b/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",
             }}
diff --git a/src/app/screens/SharingFloodZonesScreen.js b/src/app/screens/SharingFloodZonesScreen.js
index 42cd388..c17582e 100644
--- a/src/app/screens/SharingFloodZonesScreen.js
+++ b/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",
             }}