Browse Source

responsive screen for different screen and display sizes

master
analuizaff 4 years ago
parent
commit
bb3c9a5c17
  1. 8
      src/app/components/forms/FormLocationPicker.js
  2. 2
      src/app/navigation/AppNavigator.js
  3. 4
      src/app/screens/PluviometerSharingDataScreen.js
  4. 10
      src/app/screens/RainSharingDataScreen.js
  5. 4
      src/app/screens/RiverFloodSharingDataScreen.js
  6. 4
      src/app/screens/SharingFloodZonesScreen.js

8
src/app/components/forms/FormLocationPicker.js

@ -1,5 +1,5 @@
import React from "react"; 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 { MaterialIcons } from "@expo/vector-icons";
import colors from "../../config/colors"; import colors from "../../config/colors";
@ -8,7 +8,9 @@ import EventLocationInput from "../EventLocationInput";
function FormLocationPicker() { function FormLocationPicker() {
return ( 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.location}>
<View style={styles.mapIcon}> <View style={styles.mapIcon}>
<MaterialIcons <MaterialIcons
@ -51,7 +53,7 @@ const styles = StyleSheet.create({
backgroundColor: colors.primary, backgroundColor: colors.primary,
padding: 8, padding: 8,
width: 20, width: 20,
alignItems: "flex-start",
alignItems: "center",
borderRadius: 5, borderRadius: 5,
flex: 0.20, flex: 0.20,
}, },

2
src/app/navigation/AppNavigator.js

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

4
src/app/screens/PluviometerSharingDataScreen.js

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

10
src/app/screens/RainSharingDataScreen.js

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

4
src/app/screens/RiverFloodSharingDataScreen.js

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

4
src/app/screens/SharingFloodZonesScreen.js

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

Loading…
Cancel
Save