Refactoring all string colors to use app/config/colors constants instead of string

literals.

src/app/components/Icon.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { View } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-
+import colors from "../config/colors";
 function Icon({
   name,
   size = 40,
-  backgroundColor = "#000",
-  iconColor = "#fff",
+  backgroundColor = colors.black,
+  iconColor = colors.white,
 }) {
   return (
     <View

src/app/components/ImageInput.js

@@ -1,4 +1,4 @@
-import React, { useEffect,  useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   View,
   StyleSheet,
@@ -20,7 +20,7 @@ function ImageInput({ imageUri, onChangeImage }) {
     //requestPermissionCamera();
   }, []);
 
- /* const requestPermissionCamera = async () => {
+  /* const requestPermissionCamera = async () => {
     const { granted } = await Permissions.askAsync(Permissions.CAMERA);
     if(granted) {
       launchCamera();
@@ -38,11 +38,12 @@ function ImageInput({ imageUri, onChangeImage }) {
     } catch (error) {
       console.log("Erro ao ler imagem", error);
     }
-  };*/  
+  };*/
 
   const requestPermission = async () => {
     const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
-    if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
+    if (!granted)
+      alert("Você precisa habilitar permissão para acessar a biblioteca.");
   };
 
   const handlePress = () => {
@@ -77,7 +78,9 @@ function ImageInput({ imageUri, onChangeImage }) {
               size={40}
             />
           )}
-          {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
+          {imageUri && (
+            <Image source={{ uri: imageUri }} style={styles.image} />
+          )}
         </View>
       </TouchableWithoutFeedback>
     </View>
@@ -101,17 +104,17 @@ const styles = StyleSheet.create({
   },
   centeredView: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     marginTop: 22,
   },
   modalView: {
     margin: 20,
-    backgroundColor: '#d3d3d3',
+    backgroundColor: colors.lightGray,
     borderRadius: 20,
     padding: 30,
-    alignItems: 'center',
-    shadowColor: 'grey',
+    alignItems: "center",
+    shadowColor: "grey",
     shadowOffset: {
       width: 10,
       height: 2,
@@ -123,7 +126,7 @@ const styles = StyleSheet.create({
   },
   modalText: {
     marginTop: 15,
-    textAlign: 'center',
+    textAlign: "center",
     fontSize: 16,
     color: colors.primary,
   },
@@ -135,7 +138,7 @@ const styles = StyleSheet.create({
     fontSize: 18,
     textAlign: "center",
     fontWeight: "bold",
-    height: 35
+    height: 35,
   },
 });
 

src/app/components/forms/FormImagePicker.js

@@ -4,6 +4,7 @@ import { useFormikContext } from "formik";
 import ErrorMessage from "./ErrorMessage";
 import ImageInputList from "../ImageInputList";
 import { View, Text, StyleSheet } from "react-native";
+import colors from "../../config/colors";
 
 function FormImagePicker({ name }) {
   const { errors, setFieldValue, touched, values } = useFormikContext();
@@ -38,7 +39,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "bold",
     textAlign: "left",
-    color: "#1976D2",
+    color: colors.primary,
     marginBottom: 5,
     marginTop: 15,
   },

src/app/config/colors.js

@@ -7,4 +7,5 @@ export default {
   light: "#f8f4f4",
   dark: "#0c0c0c",
   danger: "#ff5252",
+  lightGray: "#d3d3d3",
 };

src/app/screens/RainSharingDataScreen.js

@@ -30,7 +30,7 @@ function RainSharingDataScreen(props) {
         style={{
           fontSize: 18,
           fontWeight: "bold",
-          color: "#1976D2",
+          color: colors.primary,
           textAlign: "center",
           marginBottom: 30,
         }}
@@ -138,7 +138,7 @@ function RainSharingDataScreen(props) {
               </TouchableNativeFeedback>
             </View>
           </View>
-          <FormImagePicker backgroundColor="#1976D2" name="images" />
+          <FormImagePicker backgroundColor={colors.primary} name="images" />
 
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>

src/app/screens/RiverFloodSharingDataScreen.js

@@ -30,7 +30,7 @@ function RiverFloodSharingDataScreen(props) {
         style={{
           fontSize: 18,
           fontWeight: "bold",
-          color: "#1976D2",
+          color: colors.primary,
           textAlign: "center",
           marginBottom: 30,
         }}
@@ -124,7 +124,7 @@ function RiverFloodSharingDataScreen(props) {
             </View>
           </View>
 
-          <FormImagePicker backgroundColor="#1976D2" name="images" />
+          <FormImagePicker backgroundColor={colors.primary} name="images" />
 
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>