Browse Source

pluviometer screen more responsive to display sizes

master
analuizaff 4 years ago
parent
commit
b11f972698
  1. 1
      src/App.js
  2. 2
      src/app/navigation/SharingDataOptionsNavigator.js
  3. 20
      src/app/screens/PluviometerSharingDataScreen.js
  4. 10
      src/app/screens/SharingDataScreen.js

1
src/App.js

@ -14,6 +14,7 @@ export default function App() {
global.userDataBase = openDatabase(); global.userDataBase = openDatabase();
initDatabase(global.userDataBase); initDatabase(global.userDataBase);
const Stack = createStackNavigator(); const Stack = createStackNavigator();
return ( return (
<NavigationContainer theme={navigationTheme}> <NavigationContainer theme={navigationTheme}>
<SharingDataOptionsNavigator/> <SharingDataOptionsNavigator/>

2
src/app/navigation/SharingDataOptionsNavigator.js

@ -15,7 +15,7 @@ function SharingDataOptionsNavigator() {
return ( return (
<Stack.Navigator initialRouteName="SharingData"> <Stack.Navigator initialRouteName="SharingData">
<Stack.Screen <Stack.Screen
name="nãoqueromais"
name="appNavigator"
component={AppNavigator} component={AppNavigator}
options={{ options={{
headerShown: false headerShown: false

20
src/app/screens/PluviometerSharingDataScreen.js

@ -19,6 +19,9 @@ import { FontAwesome5 } from '@expo/vector-icons';
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import moment from 'moment'; import moment from 'moment';
import colors from "../config/colors"; import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";
const dims = scaleDimsFromWidth(85, 85, 25);
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
pluviometer: Yup.number().required("Campo obrigatório").min(0, "O valor deve ser maior ou igual a 0.").max(10000).label("pluviometer"), pluviometer: Yup.number().required("Campo obrigatório").min(0, "O valor deve ser maior ou igual a 0.").max(10000).label("pluviometer"),
@ -74,7 +77,7 @@ function PluviometerSharingDataScreen(props) {
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ alignSelf: "center" }}>
<View style={{ alignItems: "center" }}>
<Image <Image
style={styles.image} style={styles.image}
source={require("../assets/pluviometro.png")} source={require("../assets/pluviometro.png")}
@ -106,28 +109,31 @@ function PluviometerSharingDataScreen(props) {
<Text style={styles.labelStyle}> <Text style={styles.labelStyle}>
Quantidade de chuva: Quantidade de chuva:
</Text> </Text>
<View style={{ flex: 1, flexDirection: 'row' }}>
<FormField <FormField
keyboardType="number-pad" keyboardType="number-pad"
maxLength={200} maxLength={200}
name="pluviometer" name="pluviometer"
placeholder="Digite a quantidade de chuva" placeholder="Digite a quantidade de chuva"
flex= {1}
/> />
</View> </View>
</View>
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
<Text style={styles.labelStyle}> <Text style={styles.labelStyle}>
Data da coleta: Data da coleta:
</Text> </Text>
<View style={{flexDirection:"row"}}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<FormField <FormField
keyboardType="numbers-and-punctuation" keyboardType="numbers-and-punctuation"
maxLength={10} maxLength={10}
name="data" name="data"
placeholder="dd/mm/aaaa" placeholder="dd/mm/aaaa"
width={240}
values={dateTime} values={dateTime}
flex={1}
/> />
</View>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" /> <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
</View> </View>
{/* {/*
@ -217,8 +223,8 @@ const styles = StyleSheet.create({
}, },
image: { image: {
width: 85,
height: 85,
width: dims.width * 0.8,
height: dims.height * 0.8,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },

10
src/app/screens/SharingDataScreen.js

@ -1,13 +1,14 @@
import React from "react"; import React from "react";
import { StyleSheet, View } from "react-native"; import { StyleSheet, View } from "react-native";
import { Image, Text, TouchableOpacity } from "react-native";
import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
import assets from "../config/assets" import assets from "../config/assets"
//1/3 //1/3
function SharingDataScreen({ navigation }) { function SharingDataScreen({ navigation }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}> <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity <TouchableOpacity
style={{ alignItems: "center" }} style={{ alignItems: "center" }}
@ -52,6 +53,7 @@ function SharingDataScreen({ navigation }) {
<Text style={styles.text}>Nível de água {"\n"}no rio</Text> <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScrollView>
</View> </View>
); );
} }
@ -72,6 +74,12 @@ const styles = StyleSheet.create({
height: 85, height: 85,
marginTop: 70, marginTop: 70,
}, },
container: {
paddingHorizontal: 10,
paddingBottom: 10,
flex: 1
},
}); });

Loading…
Cancel
Save