app navigation design related methods added

src/utils/designSystem.tsx

@@ -1,13 +1,18 @@
 import {DarkTheme, DefaultTheme, Theme} from '@react-navigation/native';
+import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
+import {BottomTabNavigationOptions} from '@react-navigation/bottom-tabs';
 import {StatusBarStyle} from 'expo-status-bar';
-import {reaction} from 'mobx';
-import {useState} from 'react';
-import {Appearance as RNAppearance, useColorScheme} from 'react-native';
+import {Appearance as RNAppearance, Platform} from 'react-native';
 import {Colors, Typography} from 'react-native-ui-lib';
 
 import {stores} from '../stores';
+import {Icon} from '../components/icon';
 import {Appearance} from './types/enums';
 
+// =============
+// | RN UI Lib |
+// =============
+
 const colors = {
   primary: '#5383b8', // blue
   secondary: '#469c57', // green
@@ -55,6 +60,9 @@ const setColorsScheme = (appearance: Appearance) => {
   else Colors.setScheme(appearance);
 };
 
+// ==============
+// | Navigation |
+// ==============
 export const getStatusBarStyle = (): StatusBarStyle => {
   const {ui} = stores;
 
@@ -124,3 +132,46 @@ export const getHeaderBlurEffect = (): 'regular' | 'light' | 'dark' => {
 
   return ui.isAppearanceSystem ? 'regular' : (ui.appearance as 'light' | 'dark');
 };
+
+// Default options
+export const screenDefaultOptions = (): NativeStackNavigationOptions => ({
+  headerShadowVisible: false,
+  headerTintColor: Colors.primary,
+
+  // this setup makes large title work on iOS
+  ...Platform.select({
+    ios: {
+      headerLargeTitle: true,
+      headerTransparent: true,
+      headerBlurEffect: getHeaderBlurEffect(), // this sets up blurred nav bar
+      // if you'd like to have a solid color for a nav bar, then you should
+      // set up `headerStyle: {backgroundColor: Colors.bg2Color}`
+    },
+  }),
+});
+
+export const tabDefaultOptions = (): BottomTabNavigationOptions => ({
+  headerShown: false,
+  tabBarActiveTintColor: Colors.primary,
+  tabBarInactiveTintColor: Colors.grey40,
+  tabBarStyle: {backgroundColor: Colors.bgColor, borderTopWidth: 0, elevation: 0},
+});
+
+export const getTabBarIcon =
+  (tabName: string) =>
+  ({focused, color, size}: {focused: boolean; color: string; size: number}) =>
+    <Icon name={getTabIconName(tabName, focused)} size={size} color={color} />;
+
+const getTabIconName = (tabName: string, focused: boolean): string => {
+  if (tabName === 'MainTab') {
+    return focused ? 'home' : 'home-outline';
+  }
+  if (tabName === 'PlaygroundTab') {
+    return focused ? 'construct' : 'construct-outline';
+  }
+  if (tabName === 'SettingsTab') {
+    return focused ? 'settings' : 'settings-outline';
+  }
+
+  return 'list';
+};