diff --git a/src/app/config/dimensions.js b/src/app/config/dimensions.js
new file mode 100644
index 0000000..0b35402
--- /dev/null
+++ b/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 };
diff --git a/src/app/screens/RainSharingDataScreen.js b/src/app/screens/RainSharingDataScreen.js
index b405099..d925b7f 100644
--- a/src/app/screens/RainSharingDataScreen.js
+++ b/src/app/screens/RainSharingDataScreen.js
@@ -2,11 +2,7 @@ import React, { useState } from "react";
import { StyleSheet, View, ScrollView } from "react-native";
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 FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
@@ -15,6 +11,7 @@ import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRainData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
+import { scaleDimsFromWidth } from "../config/dimensions";
const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@@ -51,17 +48,14 @@ function RainSharingDataScreen(props) {
duration: 1950,
icon: "success",
type: "success",
- onPress: () => {
- },
+ onPress: () => {},
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
>
-
+
setRain(0)}>
- Chuva{"\n"}moderada
+ Chuva moderada
-
+
setRain(3)}>
- Chuva muito{"\n"}forte
+ Chuva muito forte
@@ -140,7 +132,7 @@ function RainSharingDataScreen(props) {
style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")}
/>
- Pancada de{"\n"}chuva
+ Pancada de chuva
@@ -154,6 +146,8 @@ function RainSharingDataScreen(props) {
);
}
+const dims = scaleDimsFromWidth(85, 85, 25);
+
const styles = StyleSheet.create({
container: {
padding: 10,
@@ -164,11 +158,15 @@ const styles = StyleSheet.create({
borderStyle: "dotted",
borderColor: colors.primary,
alignItems: "center",
- width: 110,
+ width: dims.width,
},
floodingLogo: {
- width: 85,
- height: 85,
+ width: dims.width * 0.8,
+ height: dims.height * 0.8,
+ },
+ imgs_row: {
+ flexDirection: "row",
+ justifyContent: "space-around",
},
text: {
fontSize: 14,
diff --git a/src/app/screens/SharingFloodZonesScreen.js b/src/app/screens/SharingFloodZonesScreen.js
index 5cb209d..c8fab05 100644
--- a/src/app/screens/SharingFloodZonesScreen.js
+++ b/src/app/screens/SharingFloodZonesScreen.js
@@ -1,21 +1,16 @@
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 { Form, SubmitButton, FormField } from "../components/forms";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import colors from "../config/colors";
+import { scaleDimsFromWidth } from "../config/dimensions";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertFloodZone } from "../database/databaseLoader";
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";
function submitForm(props) {
@@ -30,9 +25,6 @@ const validationSchema = Yup.object().shape({
.required("Por favor, forneça uma descrição"),
});
-const screen_width = Dimensions.get("window").width;
-const borderWidth = 3;
-
function SharingFloodZonesScreen(props) {
const [passable, setPassable] = useState(0);
const location = useLocation();
@@ -43,7 +35,7 @@ function SharingFloodZonesScreen(props) {
style={{
fontSize: 18,
fontWeight: "bold",
- color: "#1976D2",
+ color: colors.primary,
textAlign: "center",
marginBottom: 30,
}}
@@ -51,68 +43,70 @@ function SharingFloodZonesScreen(props) {
Pontos de alagamento
-
+
+
+
+
);
}
+const borderWidth = 3;
const styles = StyleSheet.create({
container: {
@@ -125,12 +119,10 @@ const styles = StyleSheet.create({
fontWeight: "500",
},
image: {
- width: 150,
- height: 80,
+ ...scaleDimsFromWidth(150, 80, 35.0),
resizeMode: "contain",
},
img_block: {
- height: 120,
padding: 10,
borderRadius: 5,
borderStyle: "dotted",
@@ -140,9 +132,9 @@ const styles = StyleSheet.create({
},
imgs_container: {
alignSelf: "center",
- width: screen_width,
+ flexGrow: 1,
flexDirection: "row",
- justifyContent: "center",
+ justifyContent: "space-between",
},
text: {