Move Colors to separate File

constants/colors.js

@@ -0,0 +1,6 @@
+const Colors = {
+  primary500: "#282A35",
+  accent500: "#A587DD",
+};
+
+export default Colors;

navigation/Navigator.js

@@ -2,6 +2,8 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { NavigationContainer } from "@react-navigation/native";
 import Icon from "react-native-vector-icons/Ionicons";
 
+import Colors from "../constants/colors";
+
 import MainScreen from "../screens/MainScreen";
 
 const Tab = createBottomTabNavigator();
@@ -12,7 +14,7 @@ function Navigator() {
       <Tab.Navigator
         screenOptions={{
           headerStyle: {
-            backgroundColor: "#A587DD",
+            backgroundColor: Colors.accent500,
           },
         }}
       >

screens/MainScreen.js

@@ -1,5 +1,6 @@
 import { StatusBar } from "expo-status-bar";
 import { Text, View, StyleSheet } from "react-native";
+import Colors from "../constants/colors";
 
 import FloatingButton from "../components/FloatingButton";
 
@@ -18,7 +19,7 @@ export default MainScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#282A35",
+    backgroundColor: Colors.primary500,
     alignItems: "center",
     justifyContent: "center",
   },