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. 4
      src/app/screens/PluviometerSharingDataScreen.js
  3. 4
      src/app/screens/RainSharingDataScreen.js
  4. 4
      src/app/screens/RiverFloodSharingDataScreen.js
  5. 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,
}, },

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

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

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