fix(INJI-427):refactor bottomTabBar styles into theme files

Signed-off-by: Sri Kanth Kola <[email protected]>
mosip · Oct 30, 2023 · 8505f15 · 8505f15
1 parent 2c9aba9
commit 8505f15
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 27 deletions.
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -1267,6 +1267,23 @@ export const DefaultTheme = {
       maxHeight: Dimensions.get('window').height,
     },
   }),
+  BottomTabBarStyle: StyleSheet.create({
+    headerRightContainerStyle: {paddingEnd: 13},
+    headerLeftContainerStyle: {paddingEnd: 13},
+    tabBarLabelStyle: {
+      fontSize: 12,
+      fontFamily: 'Inter_600SemiBold',
+    },
+    tabBarStyle: {
+      display: 'flex',
+      height: 75,
+      paddingHorizontal: 10,
+    },
+    tabBarItemStyle: {
+      height: 83,
+      padding: 11,
+    },
+  }),
 
   ICON_SMALL_SIZE: 16,
   ICON_MID_SIZE: 22,

diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
@@ -1266,6 +1266,23 @@ export const PurpleTheme = {
       maxHeight: Dimensions.get('window').height,
     },
   }),
+  BottomTabBarStyle: StyleSheet.create({
+    headerRightContainerStyle: {paddingEnd: 13},
+    headerLeftContainerStyle: {paddingEnd: 13},
+    tabBarLabelStyle: {
+      fontSize: 12,
+      fontFamily: 'Inter_600SemiBold',
+    },
+    tabBarStyle: {
+      display: 'flex',
+      height: 75,
+      paddingHorizontal: 10,
+    },
+    tabBarItemStyle: {
+      height: 83,
+      padding: 11,
+    },
+  }),
 
   ICON_SMALL_SIZE: 16,
   ICON_MID_SIZE: 22,

diff --git a/routes/main.ts b/routes/main.ts
@@ -9,15 +9,10 @@ import {HistoryScreen} from '../screens/History/HistoryScreen';
 import i18n from '../i18n';
 import {BOTTOM_TAB_ROUTES} from './routesConstants';
 import {HomeScreenLayout} from '../screens/HomeScreenLayout';
-
-let tabBarVisible = {
-  display: 'flex',
-  height: 75,
-  paddingHorizontal: 10,
-};
+import {Theme} from '../components/ui/styleUtils';
 
 export const changeTabBarVisible = (visible: string) => {
-  tabBarVisible.display = visible;
+  Theme.BottomTabBarStyle.tabBarStyle.display = visible;
 };
 
 const home: TabScreen = {
@@ -36,7 +31,6 @@ export const scan: TabScreen = {
   options: {
     title: i18n.t('MainLayout:scan'),
     headerShown: false,
-    tabBarStyle: tabBarVisible,
   },
 };
 

diff --git a/screens/MainLayout.tsx b/screens/MainLayout.tsx
@@ -56,27 +56,9 @@ export const MainLayout: React.FC<
         />
       </Row>
     ),
-    headerTitleStyle: {
-      fontFamily: 'Inter_600SemiBold',
-      fontSize: 30,
-      margin: 4,
-    },
-    headerRightContainerStyle: {paddingEnd: 13},
-    headerLeftContainerStyle: {paddingEnd: 13},
     tabBarShowLabel: true,
     tabBarActiveTintColor: Theme.Colors.IconBg,
-    tabBarLabelStyle: {
-      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
-    },
-    tabBarStyle: {
-      height: 75,
-      paddingHorizontal: 10,
-    },
-    tabBarItemStyle: {
-      height: 83,
-      padding: 11,
-    },
+    ...Theme.BottomTabBarStyle,
   };
 
   return (