useConstants instead of constants

src/hooks/useConstants.ts

@@ -0,0 +1,22 @@
+const useContants = () => {
+  return {
+    colors: {
+      main: '#4d7198',
+      black: '#000',
+      white: '#fff',
+      lightGrey: '#dcdde1',
+      blue: '#4d7198',
+      yellow: '#fbc531',
+    },
+    sizes: {
+      xs: 4,
+      s: 8,
+      m: 16,
+      l: 24,
+      xl: 32,
+      xxl: 40,
+    }
+  }
+}
+
+export default useContants;

src/hooks/useStyles.ts

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Appearance, Dimensions, Platform, PixelRatio } from 'react-native';
 import { isTablet } from 'react-native-device-info';
 
-import Constants from '../utils/constants';
+import useConstants from './useConstants';
 
-const { colors, sizes } = Constants;
+const { colors, sizes } = useConstants();
 let options: UseStylesOptionsType = {
   normalize: true,
   darkmode: true,

src/screens/CounterScreen.tsx

@@ -11,10 +11,10 @@ import { useNavigationButtonPress } from 'react-native-navigation-hooks/dist/hoo
 
 import { useStores } from '../stores';
 import { useServices } from '../services';
-import Constants from '../utils/constants';
 import { ButtonIcon } from '../components/Button';
 import useStyles from '../hooks/useStyles';
 import { ScreenOptions } from '../services/navigation/screens';
+import { Buttons } from '../services/navigation/buttons';
 
 const CounterScreen: NavigationFunctionComponent = observer(({
   componentId,
@@ -23,8 +23,8 @@ const CounterScreen: NavigationFunctionComponent = observer(({
   const { } = useServices();
   const { styles } = useStyles(_styles);
 
-  useNavigationButtonPress(counter.decrement, componentId, Constants.CounterScreen.decButtonId);
-  useNavigationButtonPress(counter.increment, componentId, Constants.CounterScreen.incButtonId);
+  useNavigationButtonPress(counter.decrement, componentId, Buttons.Dec.id);
+  useNavigationButtonPress(counter.increment, componentId, Buttons.Inc.id);
 
   return (
     <SafeAreaView style={styles.container}>

src/services/navigation/system.ts

@@ -7,7 +7,7 @@ import { gestureHandlerRootHOC as withGestureHandler } from 'react-native-gestur
 import Screens, { ScreenNames } from './screens';
 import { withStoresProvider } from '../../stores';
 import { withServicesProvider } from '..';
-import Constants from '../../utils/constants';
+import useConstants from '../../hooks/useConstants';
 import { stores } from '../../stores';
 import { getTabOptions } from './tabs';
 import { Layout_BottomTabs, Layout_Component, Layout_Root, Layout_StackWith } from './layout';
@@ -62,6 +62,8 @@ class NavigationSystem {
   }
 
   private setDefaultOptions = async () => {
+    const { colors } = useConstants();
+
     Navigation.setDefaultOptions({
       layout: {
         orientation: ['portrait'],
@@ -70,10 +72,10 @@ class NavigationSystem {
         titleDisplayMode: 'alwaysShow',
       },
       bottomTab: {
-        iconColor: Constants.colors.main,
-        textColor: Constants.colors.main,
-        selectedIconColor: Constants.colors.main,
-        selectedTextColor: Constants.colors.main,
+        iconColor: colors.main,
+        textColor: colors.main,
+        selectedIconColor: colors.main,
+        selectedTextColor: colors.main,
       },
       topBar: {
         largeTitle: {