Changing "selecting" logic to swtitch colors instead of border width.

src/app/screens/RainSharingDataScreen.js

@@ -59,7 +59,7 @@ function RainSharingDataScreen(props) {
             <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRain(0)}>
                 <View
-                  borderWidth={rain == 0 ? borderWidth : 0}
+                  borderColor={rain == 0 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -72,7 +72,7 @@ function RainSharingDataScreen(props) {
 
               <TouchableNativeFeedback onPress={() => setRain(1)}>
                 <View
-                  borderWidth={rain == 1 ? borderWidth : 0}
+                  borderColor={rain == 1 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -85,7 +85,7 @@ function RainSharingDataScreen(props) {
 
               <TouchableNativeFeedback onPress={() => setRain(2)}>
                 <View
-                  borderWidth={rain == 2 ? borderWidth : 0}
+                  borderColor={rain == 2 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -100,7 +100,7 @@ function RainSharingDataScreen(props) {
             <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRain(3)}>
                 <View
-                  borderWidth={rain == 3 ? borderWidth : 0}
+                  borderColor={rain == 3 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -113,7 +113,7 @@ function RainSharingDataScreen(props) {
 
               <TouchableNativeFeedback onPress={() => setRain(4)}>
                 <View
-                  borderWidth={rain == 4 ? borderWidth : 0}
+                  borderColor={rain == 4 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -126,7 +126,7 @@ function RainSharingDataScreen(props) {
 
               <TouchableNativeFeedback onPress={() => setRain(5)}>
                 <View
-                  borderWidth={rain == 5 ? borderWidth : 0}
+                  borderColor={rain == 5 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -152,12 +152,14 @@ const dims = scaleDimsFromWidth(85, 85, 25);
 const styles = StyleSheet.create({
   container: {
     padding: 10,
+    backgroundColor: colors.white,
   },
   img_block: {
     borderRadius: 5,
     padding: 10,
     borderStyle: "dotted",
-    borderColor: colors.primary,
+    borderColor: colors.white,
+    borderWidth: borderWidth,
     alignItems: "center",
     width: dims.width,
   },

src/app/screens/RiverFloodSharingDataScreen.js

@@ -64,7 +64,7 @@ function RiverFloodSharingDataScreen(props) {
             >
               <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
                 <View
-                  borderWidth={riverScale == 0 ? borderWidth : 0}
+                  borderColor={riverScale == 0 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -77,7 +77,7 @@ function RiverFloodSharingDataScreen(props) {
 
               <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
                 <View
-                  borderWidth={riverScale == 1 ? borderWidth : 0}
+                  borderColor={riverScale == 1 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -98,7 +98,7 @@ function RiverFloodSharingDataScreen(props) {
             >
               <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
                 <View
-                  borderWidth={riverScale == 2 ? borderWidth : 0}
+                  borderColor={riverScale == 2 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -111,7 +111,7 @@ function RiverFloodSharingDataScreen(props) {
 
               <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
                 <View
-                  borderWidth={riverScale == 3 ? borderWidth : 0}
+                  borderColor={riverScale == 3 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
                   <Image
@@ -136,12 +136,14 @@ function RiverFloodSharingDataScreen(props) {
 const styles = StyleSheet.create({
   container: {
     padding: 10,
+    backgroundColor: colors.white,
   },
   img_block: {
     borderRadius: 5,
     padding: 10,
     borderStyle: "dotted",
-    borderColor: colors.primary,
+    borderColor: colors.white,
+    borderWidth: borderWidth,
     alignItems: "center",
     width: 130,
   },

src/app/screens/SharingFloodZonesScreen.js

@@ -15,7 +15,6 @@ import Screen from "../components/Screen";
 import assets from "../config/assets";
 
 function submitForm(props) {
-  // console.log(props);
   insertFloodZone(props);
 }
 
@@ -38,7 +37,7 @@ function SharingFloodZonesScreen(props) {
           fontWeight: "bold",
           color: colors.primary,
           textAlign: "center",
-          marginBottom: 30,
+          marginBottom: 10,
         }}
       >
         Pontos de alagamento
@@ -69,7 +68,7 @@ function SharingFloodZonesScreen(props) {
             <TouchableNativeFeedback onPress={() => setPassable(1)}>
               <View
                 style={styles.img_block}
-                borderWidth={passable == 1 ? borderWidth : 0}
+                borderColor={passable == 1 ? colors.primary : colors.white}
               >
                 <Image
                   style={styles.image}
@@ -82,7 +81,7 @@ function SharingFloodZonesScreen(props) {
             <TouchableNativeFeedback onPress={() => setPassable(0)}>
               <View
                 style={styles.img_block}
-                borderWidth={passable == 0 ? borderWidth : 0}
+                borderColor={passable == 0 ? colors.primary : colors.white}
               >
                 <Image
                   style={styles.image}
@@ -112,6 +111,7 @@ const borderWidth = 3;
 const styles = StyleSheet.create({
   container: {
     padding: 10,
+    backgroundColor: colors.white,
   },
 
   header: {
@@ -127,7 +127,8 @@ const styles = StyleSheet.create({
     padding: 10,
     borderRadius: 5,
     borderStyle: "dotted",
-    borderColor: colors.primary,
+    borderColor: colors.white,
+    borderWidth: borderWidth,
     justifyContent: "center",
     alignItems: "center",
   },