Collecting all texts dimensions to constant values in config file "dimensions"

src/app/components/forms/FormDatePicker.js

@@ -13,6 +13,7 @@ import DateTimePicker from "@react-native-community/datetimepicker";
 
 import moment from "moment";
 import colors from "../../config/colors";
+import { dimensions } from "../../config/dimensions";
 
 const FormDatePicker = (props) => {
   const { textStyle, defaultDate } = props;
@@ -65,15 +66,21 @@ const FormDatePicker = (props) => {
 
   return (
     <TouchableOpacity onPress={() => setShow(true)}>
-      <View style={{ flex: 1, flexDirection: "row", alignItems: 'center', justifyContent: "space-between" }}>
-        <View style={ styles.dateInput }>
-          <Text> {date.format("DD/MM/YYYY")}</Text>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <View style={styles.dateInput}>
+          <Text style={{ fontSize: dimensions.text.default }}>
+            {" "}
+            {date.format("DD/MM/YYYY")}
+          </Text>
         </View>
-        <FontAwesome5
-          name="calendar-day"
-          size={30}
-          color="grey"
-        />
+        <FontAwesome5 name="calendar-day" size={30} color="grey" />
       </View>
       {Platform.OS !== "ios" && show && renderDatePicker()}
 
@@ -140,7 +147,7 @@ const FormDatePicker = (props) => {
 FormDatePicker.defaultProps = {
   textStyle: {},
   defaultDate: moment(),
-  onDateChange: () => { },
+  onDateChange: () => {},
 };
 
 const styles = StyleSheet.create({
@@ -165,7 +172,7 @@ const styles = StyleSheet.create({
     borderRadius: 25,
     padding: 18,
     marginVertical: 10,
-  }
+  },
 });
 
 export default FormDatePicker;

src/app/components/forms/FormImagePicker.js

@@ -5,6 +5,7 @@ import ErrorMessage from "./ErrorMessage";
 import ImageInputList from "../ImageInputList";
 import { View, Text, StyleSheet } from "react-native";
 import colors from "../../config/colors";
+import { dimensions } from "../../config/dimensions";
 
 function FormImagePicker({ name }) {
   const { errors, setFieldValue, touched, values } = useFormikContext();
@@ -36,7 +37,7 @@ function FormImagePicker({ name }) {
 
 const styles = StyleSheet.create({
   labelStyle: {
-    fontSize: 16,
+    fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",
     color: colors.primary,

src/app/config/dimensions.js

@@ -2,6 +2,15 @@ import { Dimensions } from "react-native";
 
 const screen_width = Dimensions.get("window").width;
 
+const dimensions = {
+  text: {
+    header: 24,
+    secondary: 20,
+    default: 18,
+    tertiary: 14,
+  },
+};
+
 /* imageScaleToSize (iw, ih, scale_w)
  * function for scaling images dinamically based on screen width
  *
@@ -21,4 +30,4 @@ function scaleDimsFromWidth(iw, ih, scale_w) {
   return { width: sw, height: sh };
 }
 
-export { screen_width, scaleDimsFromWidth };
+export { screen_width, scaleDimsFromWidth, dimensions };

src/app/screens/AccountScreen.js

@@ -3,14 +3,17 @@ import { StyleSheet, View, Text } from "react-native";
 
 import colors from "../config/colors";
 import Screen from "../components/Screen";
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign } from "@expo/vector-icons";
+import { dimensions } from "../config/dimensions";
 
 function AccountScreen({ navigation }) {
   return (
     <Screen style={styles.screen}>
       <View style={styles.container}>
         <AntDesign name="warning" size={60} color="black" />
-      <Text style={{fontSize: 30, fontWeight: "bold"}}>Em construção...</Text>
+        <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
+          Em construção...
+        </Text>
       </View>
     </Screen>
   );
@@ -23,9 +26,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: "column",
-    alignItems:"center",
-    justifyContent: "flex-start"    
-
+    alignItems: "center",
+    justifyContent: "flex-start",
   },
 });
 

src/app/screens/MessagesScreen.js

@@ -9,7 +9,8 @@ import {
 } from "../components/lists";
 
 import colors from "../config/colors";
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign } from "@expo/vector-icons";
+import { dimensions } from "../config/dimensions";
 
 /*const initialMessages = [
   {
@@ -36,7 +37,8 @@ function MessagesScreen(props) {
   }; */
 
   return (
-    {/*<Screen>
+    {
+      /*<Screen>
       <FlatList
         data={messages}
         keyExtractor={(message) => message.id.toString()}
@@ -64,13 +66,20 @@ function MessagesScreen(props) {
           ]);
         }}
       />
-      </Screen>*/},
+      </Screen>*/
+    },
+    (
       <Screen style={styles.screen}>
         <View style={styles.container}>
           <AntDesign name="warning" size={60} color="black" />
-        <Text style={{ fontSize: 30, fontWeight: "bold" }}>Em construção...</Text>
+          <Text
+            style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}
+          >
+            Em construção...
+          </Text>
         </View>
       </Screen>
+    )
   );
 }
 
@@ -82,8 +91,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "flex-start"
-
+    justifyContent: "flex-start",
   },
 });
 

src/app/screens/OfficialMessagesScreen.js

@@ -3,14 +3,17 @@ import { StyleSheet, View, Text } from "react-native";
 
 import colors from "../config/colors";
 import Screen from "../components/Screen";
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign } from "@expo/vector-icons";
+import { dimensions } from "../config/dimensions";
 
 function OfficialMessagesScreen(props) {
   return (
     <Screen style={styles.screen}>
       <View style={styles.container}>
         <AntDesign name="warning" size={60} color="black" />
-        <Text style={{ fontSize: 30, fontWeight: "bold" }}>Em construção...</Text>
+        <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
+          Em construção...
+        </Text>
       </View>
     </Screen>
   );
@@ -24,8 +27,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "flex-start"
-
+    justifyContent: "flex-start",
   },
 });
 

src/app/screens/PluviometerSharingDataScreen.js

@@ -12,7 +12,7 @@ import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 
@@ -41,7 +41,11 @@ function PluviometerSharingDataScreen(props) {
           source={require("../assets/pluviometro.png")}
         />
         <Text
-          style={{ fontSize: 18, fontWeight: "bold", color: colors.primary }}
+          style={{
+            fontSize: dimensions.text.header,
+            fontWeight: "bold",
+            color: colors.primary,
+          }}
         >
           Pluviômetro
         </Text>
@@ -112,7 +116,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   labelStyle: {
-    fontSize: 16,
+    fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",
     color: colors.primary,

src/app/screens/RainSharingDataScreen.js

@@ -11,7 +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";
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import assets from "../config/assets";
 
 const validationSchema = Yup.object().shape({
@@ -29,7 +29,7 @@ function RainSharingDataScreen(props) {
     <Screen style={styles.container}>
       <Text
         style={{
-          fontSize: 18,
+          fontSize: dimensions.text.header,
           fontWeight: "bold",
           color: colors.primary,
           textAlign: "center",
@@ -183,12 +183,12 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
   },
   text: {
-    fontSize: 14,
+    fontSize: dimensions.text.default,
     textAlign: "center",
     marginTop: 10,
   },
   error_txt: {
-    fontSize: 18,
+    fontSize: dimensions.text.default,
     color: colors.danger,
   },
 });

src/app/screens/RiverFloodSharingDataScreen.js

@@ -13,7 +13,7 @@ import { insertRiverData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import assets from "../config/assets";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -30,7 +30,7 @@ function RiverFloodSharingDataScreen(props) {
     <Screen style={styles.container}>
       <Text
         style={{
-          fontSize: 18,
+          fontSize: dimensions.text.header,
           fontWeight: "bold",
           color: colors.primary,
           textAlign: "center",
@@ -159,7 +159,7 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
   },
   text: {
-    fontSize: 14,
+    fontSize: dimensions.text.default,
     textAlign: "center",
     marginTop: 10,
   },

src/app/screens/SharingDataScreen.js

@@ -3,7 +3,7 @@ import { StyleSheet, View } from "react-native";
 
 import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
 import assets from "../config/assets";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 
 //1/3
 
@@ -55,7 +55,7 @@ const dims = scaleDimsFromWidth(248, 251, 35);
 
 const styles = StyleSheet.create({
   text: {
-    fontSize: 14,
+    fontSize: dimensions.text.default,
     textAlign: "center",
     marginTop: 10,
   },

src/app/screens/SharingFloodZonesScreen.js

@@ -6,7 +6,7 @@ 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 { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertFloodZone } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
@@ -33,7 +33,7 @@ function SharingFloodZonesScreen(props) {
     <Screen style={styles.container}>
       <Text
         style={{
-          fontSize: 18,
+          fontSize: dimensions.text.header,
           fontWeight: "bold",
           color: colors.primary,
           textAlign: "center",
@@ -122,11 +122,6 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
   },
 
-  header: {
-    fontSize: 18,
-    color: colors.primary,
-    fontWeight: "500",
-  },
   image: {
     width: dims.width * 0.9,
     height: dims.height * 0.9,
@@ -147,7 +142,8 @@ const styles = StyleSheet.create({
   },
 
   text: {
-    fontSize: 14,
+    paddingTop: 5,
+    fontSize: dimensions.text.default,
   },
   error_txt: {
     fontSize: 18,