Browse Source

Making some components width/height flexible depending on phone screen

size and a scale arg.
master
GabrielTrettel 4 years ago
parent
commit
4741eb6ba8
  1. 24
      src/app/config/dimensions.js
  2. 36
      src/app/screens/RainSharingDataScreen.js
  3. 136
      src/app/screens/SharingFloodZonesScreen.js

24
src/app/config/dimensions.js

@ -0,0 +1,24 @@
import { Dimensions } from "react-native";
const screen_width = Dimensions.get("window").width;
/* imageScaleToSize (iw, ih, scale_w)
* function for scaling images dinamically based on screen width
*
* iw: actual image width,
* ih: actual image height,
* scale_w: scale ratio of the image width.
*
* if scale_w is 50, then the returned value for width would
* be 50% of the screen width
*
* returns:
*
*/
function scaleDimsFromWidth(iw, ih, scale_w) {
const sw = (scale_w / 100.0) * screen_width;
const sh = ih * (sw / iw);
return { width: sw, height: sh };
}
export { screen_width, scaleDimsFromWidth };

36
src/app/screens/RainSharingDataScreen.js

@ -2,11 +2,7 @@ import React, { useState } from "react";
import { StyleSheet, View, ScrollView } from "react-native"; import { StyleSheet, View, ScrollView } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import {
Form,
FormPicker as Picker,
SubmitButton,
} from "../components/forms";
import { Form, FormPicker as Picker, SubmitButton } from "../components/forms";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
@ -15,6 +11,7 @@ import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRainData } from "../database/databaseLoader"; import { insertRainData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { scaleDimsFromWidth } from "../config/dimensions";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"), images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@ -51,17 +48,14 @@ function RainSharingDataScreen(props) {
duration: 1950, duration: 1950,
icon: "success", icon: "success",
type: "success", type: "success",
onPress: () => {
},
onPress: () => {},
}); });
props.navigation.goBack(null); props.navigation.goBack(null);
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<View> <View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<View style={styles.imgs_row}>
<TouchableNativeFeedback onPress={() => setRain(0)}> <TouchableNativeFeedback onPress={() => setRain(0)}>
<View <View
borderWidth={rain == 0 ? borderWidth : 0} borderWidth={rain == 0 ? borderWidth : 0}
@ -97,14 +91,12 @@ function RainSharingDataScreen(props) {
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")} source={require("../assets/chuva_peq.png")}
/> />
<Text style={styles.text}>Chuva{"\n"}moderada</Text>
<Text style={styles.text}>Chuva moderada</Text>
</View> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<View style={styles.imgs_row}>
<TouchableNativeFeedback onPress={() => setRain(3)}> <TouchableNativeFeedback onPress={() => setRain(3)}>
<View <View
borderWidth={rain == 3 ? borderWidth : 0} borderWidth={rain == 3 ? borderWidth : 0}
@ -127,7 +119,7 @@ function RainSharingDataScreen(props) {
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_muito_forte.png")} source={require("../assets/chuva_muito_forte.png")}
/> />
<Text style={styles.text}>Chuva muito{"\n"}forte</Text>
<Text style={styles.text}>Chuva muito forte</Text>
</View> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
@ -140,7 +132,7 @@ function RainSharingDataScreen(props) {
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")} source={require("../assets/chuva_pancadas.png")}
/> />
<Text style={styles.text}>Pancada de{"\n"}chuva</Text>
<Text style={styles.text}>Pancada de chuva</Text>
</View> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
@ -154,6 +146,8 @@ function RainSharingDataScreen(props) {
); );
} }
const dims = scaleDimsFromWidth(85, 85, 25);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
padding: 10, padding: 10,
@ -164,11 +158,15 @@ const styles = StyleSheet.create({
borderStyle: "dotted", borderStyle: "dotted",
borderColor: colors.primary, borderColor: colors.primary,
alignItems: "center", alignItems: "center",
width: 110,
width: dims.width,
}, },
floodingLogo: { floodingLogo: {
width: 85,
height: 85,
width: dims.width * 0.8,
height: dims.height * 0.8,
},
imgs_row: {
flexDirection: "row",
justifyContent: "space-around",
}, },
text: { text: {
fontSize: 14, fontSize: 14,

136
src/app/screens/SharingFloodZonesScreen.js

@ -1,21 +1,16 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Dimensions } from "react-native";
import {
StyleSheet,
Text,
Image,
View,
} from "react-native";
import { StyleSheet, Text, Image, View } 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";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import colors from "../config/colors"; import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertFloodZone } from "../database/databaseLoader"; import { insertFloodZone } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
function submitForm(props) { function submitForm(props) {
@ -30,9 +25,6 @@ const validationSchema = Yup.object().shape({
.required("Por favor, forneça uma descrição"), .required("Por favor, forneça uma descrição"),
}); });
const screen_width = Dimensions.get("window").width;
const borderWidth = 3;
function SharingFloodZonesScreen(props) { function SharingFloodZonesScreen(props) {
const [passable, setPassable] = useState(0); const [passable, setPassable] = useState(0);
const location = useLocation(); const location = useLocation();
@ -43,7 +35,7 @@ function SharingFloodZonesScreen(props) {
style={{ style={{
fontSize: 18, fontSize: 18,
fontWeight: "bold", fontWeight: "bold",
color: "#1976D2",
color: colors.primary,
textAlign: "center", textAlign: "center",
marginBottom: 30, marginBottom: 30,
}} }}
@ -51,68 +43,70 @@ function SharingFloodZonesScreen(props) {
Pontos de alagamento Pontos de alagamento
</Text> </Text>
<KeyboardAwareScrollView <KeyboardAwareScrollView
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={true}>
<Form
initialValues={{
images: [],
description: "",
}}
onSubmit={(values) => {
submitForm({ ...values, passable, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={true}
> >
<View style={styles.imgs_container}>
<TouchableNativeFeedback onPress={() => setPassable(1)}>
<View
style={styles.img_block}
borderWidth={passable == 1 ? borderWidth : 0}
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/passable_icon.png")}
/>
<Text style={styles.text}>Transitável</Text>
</View>
</TouchableNativeFeedback>
<Form
initialValues={{
images: [],
description: "",
}}
onSubmit={(values) => {
submitForm({ ...values, passable, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
>
<View style={styles.imgs_container}>
<TouchableNativeFeedback onPress={() => setPassable(1)}>
<View
style={styles.img_block}
borderWidth={passable == 1 ? borderWidth : 0}
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/passable_icon.png")}
/>
<Text style={styles.text}>Transitável</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(0)}>
<View
style={styles.img_block}
borderWidth={passable == 0 ? borderWidth : 0}
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/not_passable_icon.png")}
/>
<Text style={styles.text}>Intransitável</Text>
</View>
</TouchableNativeFeedback>
</View>
<TouchableNativeFeedback onPress={() => setPassable(0)}>
<View
style={styles.img_block}
borderWidth={passable == 0 ? borderWidth : 0}
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/not_passable_icon.png")}
/>
<Text style={styles.text}>Intransitável</Text>
</View>
</TouchableNativeFeedback>
</View>
<FormImagePicker name="images" height={10} />
<FormField
maxLength={255}
multiline
name="description"
numberOfLines={3}
placeholder="Descrição"
/>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
<FormImagePicker name="images" height={10} />
<FormField
maxLength={255}
multiline
name="description"
numberOfLines={3}
placeholder="Descrição"
/>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</KeyboardAwareScrollView> </KeyboardAwareScrollView>
</Screen> </Screen>
); );
} }
const borderWidth = 3;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -125,12 +119,10 @@ const styles = StyleSheet.create({
fontWeight: "500", fontWeight: "500",
}, },
image: { image: {
width: 150,
height: 80,
...scaleDimsFromWidth(150, 80, 35.0),
resizeMode: "contain", resizeMode: "contain",
}, },
img_block: { img_block: {
height: 120,
padding: 10, padding: 10,
borderRadius: 5, borderRadius: 5,
borderStyle: "dotted", borderStyle: "dotted",
@ -140,9 +132,9 @@ const styles = StyleSheet.create({
}, },
imgs_container: { imgs_container: {
alignSelf: "center", alignSelf: "center",
width: screen_width,
flexGrow: 1,
flexDirection: "row", flexDirection: "row",
justifyContent: "center",
justifyContent: "space-between",
}, },
text: { text: {

Loading…
Cancel
Save