Refactoring to stylesheet and some font adjustments

src/app/screens/RainSharingDataScreen.js

@@ -12,34 +12,9 @@ import CategoryPickerItem from "../components/CategoryPickerItem";
 import Screen from "../components/Screen";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
-import { Image, Text, TouchableOpacity } from 'react-native';
+import { Image, Text, TouchableOpacity } from "react-native";
 import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
-//1/3
-const styles = StyleSheet.create({
-  container: {
-    paddingTop: 50,
-  },
-  img_block: {
-    height: 120,
-    padding: 10,
-    borderRadius: 5,
-    borderStyle: "dotted",
-    borderColor: colors.primary,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  floodingLogo: {
-    width: 85,
-    height: 85,
-    marginTop: 30,
-    borderRadius: 5,
-    borderColor: colors.primary,
-    justifyContent: "center",
-    alignItems: "center",
-
-  },
-})
 
 const validationSchema = Yup.object().shape({
   images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@@ -48,6 +23,8 @@ const validationSchema = Yup.object().shape({
     .required("Por favor, forneça uma descrição"),
 });
 
+const borderWidth = 4;
+
 function RainSharingDataScreen() {
   const [passable, setPassable] = useState(0);
 
@@ -65,80 +42,130 @@ function RainSharingDataScreen() {
         validationSchema={validationSchema}
       >
         <View>
-          <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray' }}>
+          {/* <Text
+            style={{
+              fontSize: 25,
+              textAlign: "center",
+              backgroundColor: "lightgray",
+            }}
+          >
             Enviar uma informação
-          </Text>
+          </Text> */}
 
-          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+          <View
+            style={{ flexDirection: "row", justifyContent: "space-around" }}
+          >
             <TouchableNativeFeedback onPress={() => setPassable(0)}>
-              <View borderWidth={passable == 0 ? 5 : 0} style={{ alignItems: 'center' }}>
+              <View
+                borderWidth={passable == 0 ? borderWidth : 0}
+                style={styles.img_block}
+              >
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/sem_chuva.png")}
                 />
-                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Sem chuva</Text>
+                <Text style={styles.text}>Sem chuva</Text>
               </View>
             </TouchableNativeFeedback>
 
             <TouchableNativeFeedback onPress={() => setPassable(1)}>
-              <View borderWidth={passable == 1 ? 5 : 0} style={{ alignItems: 'center' }}>
+              <View
+                borderWidth={passable == 1 ? borderWidth : 0}
+                style={styles.img_block}
+              >
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_peq.png")}
                 />
-                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva fraca</Text>
+                <Text style={styles.text}>Chuva fraca</Text>
               </View>
             </TouchableNativeFeedback>
 
             <TouchableNativeFeedback onPress={() => setPassable(2)}>
-              <View borderWidth={passable == 2 ? 5 : 0} style={{ alignItems: 'center' }}>
+              <View
+                borderWidth={passable == 2 ? borderWidth : 0}
+                style={styles.img_block}
+              >
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_peq.png")}
                 />
-                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva{"\n"}moderada</Text>
+                <Text style={styles.text}>Chuva{"\n"}moderada</Text>
               </View>
             </TouchableNativeFeedback>
           </View>
 
-          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+          <View
+            style={{ flexDirection: "row", justifyContent: "space-around" }}
+          >
             <TouchableNativeFeedback onPress={() => setPassable(3)}>
-              <View borderWidth={passable == 3 ? 5 : 0} style={{ alignItems: 'center' }}>
+              <View
+                borderWidth={passable == 3 ? borderWidth : 0}
+                style={styles.img_block}
+              >
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_forte.png")}
                 />
-                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva forte</Text>
+                <Text style={styles.text}>Chuva forte</Text>
               </View>
             </TouchableNativeFeedback>
 
             <TouchableNativeFeedback onPress={() => setPassable(4)}>
-              <View borderWidth={passable == 4 ? 5 : 0} style={{ alignItems: 'center' }}>
+              <View
+                borderWidth={passable == 4 ? borderWidth : 0}
+                style={styles.img_block}
+              >
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_muito_forte.png")}
                 />
-                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva muito{"\n"}forte</Text>
+                <Text style={styles.text}>Chuva muito{"\n"}forte</Text>
               </View>
             </TouchableNativeFeedback>
 
             <TouchableNativeFeedback onPress={() => setPassable(5)}>
-              <View borderWidth={passable == 5 ? 5 : 0} style={{ alignContent: 'center' }}>
+              <View
+                borderWidth={passable == 5 ? borderWidth : 0}
+                style={styles.img_block}
+              >
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_pancadas.png")}
                 />
-                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pancada de{"\n"}chuva</Text>
+                <Text style={styles.text}>Pancada de{"\n"}chuva</Text>
               </View>
             </TouchableNativeFeedback>
           </View>
         </View>
         <FormImagePicker backgroundColor="#1976D2" name="images" />
 
-        <Button title="Enviar" backgroundColor="red" width="20" />
+        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
       </Form>
     </Screen>
   );
 }
 
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  img_block: {
+    borderRadius: 5,
+    padding: 10,
+    borderStyle: "dotted",
+    borderColor: colors.primary,
+    alignItems: "center",
+  },
+  floodingLogo: {
+    width: 85,
+    height: 85,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: "center",
+    marginTop: 10,
+  },
+});
+
 export default RainSharingDataScreen;

src/app/screens/SharingDataScreen.js

@@ -1,73 +1,90 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 
-import { Image, Text, TouchableOpacity } from 'react-native';
+import { Image, Text, TouchableOpacity } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
-import RainSharingDataScreen from '../screens/RainSharingDataScreen';
+import RainSharingDataScreen from "../screens/RainSharingDataScreen";
 import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
 
 //1/3
-const styles = StyleSheet.create({
-  container: {
-  },
-  rainLogo: {
-    width: 110,
-    height: 100,
-    margin: 30,
-  },
-  floodingLogo: {
-    width: 85,
-    height: 85,
-    marginTop: 70,
 
-  },
-})
 function SharingDataScreen({ navigation }) {
   return (
     <View style={styles.container}>
-      <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray', marginTop: 10 }}>
+      <Text
+        style={{
+          fontSize: 25,
+          textAlign: "center",
+          backgroundColor: "lightgray",
+          marginTop: 10,
+        }}
+      >
         Enviar uma informação
       </Text>
-      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
-
-        <TouchableOpacity style={{ alignItems: 'center' }} onPress={()=> navigation.navigate('FloodSharingData')}>
+      <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+        <TouchableOpacity
+          style={{ alignItems: "center" }}
+          onPress={() => navigation.navigate("FloodSharingData")}
+        >
           <Image
             style={styles.floodingLogo}
             source={require("../assets/pontos_alagamento_peq.png")}
           />
-          <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pontos de {"\n"}alagamento</Text>
+          <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => navigation.navigate('RainSharingData')}>
+        <TouchableOpacity
+          style={{ alignItems: "center" }}
+          onPress={() => navigation.navigate("RainSharingData")}
+        >
           <Image
             style={styles.floodingLogo}
             source={require("../assets/chuva_peq.png")}
           />
-          <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva</Text>
+          <Text style={styles.text}>Chuva</Text>
         </TouchableOpacity>
       </View>
 
-      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
-
-        <TouchableOpacity style={{ alignItems: 'center' }}>
+      <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+        <TouchableOpacity style={{ alignItems: "center" }}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/diario_pluviometrico.png")}
           />
-          <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Diário do{"\n"}pluviômetro</Text>
+          <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity style={{ alignItems: 'center' }}>
+        <TouchableOpacity style={{ alignItems: "center" }}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/nivel_rio.png")}
           />
-          <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Nível de água {"\n"}no rio</Text>
+          <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
         </TouchableOpacity>
       </View>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    textAlign: "center",
+    marginTop: 10,
+  },
+
+  rainLogo: {
+    width: 110,
+    height: 100,
+    margin: 30,
+  },
+  floodingLogo: {
+    width: 85,
+    height: 85,
+    marginTop: 70,
+  },
+});
+
 const Stack = createStackNavigator();
 
 function RainSharingDataNavigator() {
@@ -75,7 +92,10 @@ function RainSharingDataNavigator() {
     <Stack.Navigator initialRouteName="SharingData">
       <Stack.Screen name="SharingData" component={SharingDataScreen} />
       <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
-      <Stack.Screen name="FloodSharingData" component={SharingFloodZonesScreen} />
+      <Stack.Screen
+        name="FloodSharingData"
+        component={SharingFloodZonesScreen}
+      />
     </Stack.Navigator>
   );
 }

src/app/screens/SharingFloodZonesScreen.js

@@ -24,6 +24,7 @@ const validationSchema = Yup.object().shape({
 });
 
 const screen_width = Dimensions.get("window").width;
+const borderWidth = 3;
 
 function SharingFloodZonesScreen() {
   const [passable, setPassable] = useState(0);
@@ -41,22 +42,28 @@ function SharingFloodZonesScreen() {
       >
         <View style={styles.imgs_container}>
           <TouchableNativeFeedback onPress={() => setPassable(1)}>
-            <View style={styles.img_block} borderWidth={passable == 1 ? 1 : 0}>
+            <View
+              style={styles.img_block}
+              borderWidth={passable == 1 ? borderWidth : 0}
+            >
               <Image
                 style={styles.image}
                 source={require("../assets/floodZonesAssets/passable_icon.png")}
               />
-              <Text>Transitável</Text>
+              <Text style={styles.text}>Transitável</Text>
             </View>
           </TouchableNativeFeedback>
 
           <TouchableNativeFeedback onPress={() => setPassable(0)}>
-            <View style={styles.img_block} borderWidth={passable == 0 ? 1 : 0}>
+            <View
+              style={styles.img_block}
+              borderWidth={passable == 0 ? borderWidth : 0}
+            >
               <Image
                 style={styles.image}
                 source={require("../assets/floodZonesAssets/not_passable_icon.png")}
               />
-              <Text>Intransitável</Text>
+              <Text style={styles.text}>Intransitável</Text>
             </View>
           </TouchableNativeFeedback>
         </View>
@@ -70,7 +77,7 @@ function SharingFloodZonesScreen() {
           numberOfLines={3}
           placeholder="Descrição"
         />
-        <SubmitButton title="Enviar" backgroundColor={colors.background} />
+        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
       </Form>
     </Screen>
   );
@@ -107,6 +114,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "center",
   },
+
+  text: {
+    fontSize: 14,
+  },
 });
 
 export default SharingFloodZonesScreen;