Merge branch 'develop' into feature/search

Author: Ruiseki

package-lock.json

@@ -18,6 +18,7 @@
     "@reduxjs/toolkit": "^2.2.1",
     "react": "18.2.0",
     "react-native": "^0.73.5",
+    "react-native-heroicons": "^4.0.0",
     "react-native-logs": "^5.1.0",
     "react-native-safe-area-context": "^4.9.0",
     "react-native-screens": "^3.29.0",

package.json

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import * as Icons from "react-native-heroicons/solid";
 import {useNavigation} from '@react-navigation/native';
 
 import AccountNavigator from '../AccountNavigator';
@@ -11,6 +11,7 @@ import {
 import { Imager } from '../../../screens/imager/Imager';
 import { Search } from '../../../screens/search/Search.tsx';
 import CarrotNavigator from '../CarrotNavigator/CarrotNavigator.tsx';
+import {Image, Text, View} from 'react-native';
 
 const Tab = createBottomTabNavigator<TabBarNavigatorParamList>();
 
@@ -36,15 +37,42 @@ const TabNavigator = () => {
     <Tab.Navigator
       initialRouteName={TAB_BAR_NAVIGATOR_ROUTES.PLATE}
       screenOptions={{
-        headerShown: false,
+        headerShown: true,
+        // Set logo in left side of header
+        headerLeft: () => (
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <Image
+              source={require('../../../../assets/kayu.png')}
+              style={{width: 40, height: 40}}
+            />
+            <Text
+              style={{
+                fontSize: 20,
+                fontWeight: 'bold',
+                color: 'black',
+              }}>
+              Kayu
+            </Text>
+          </View>
+        ),
+        headerRight: () => (
+          <Icon
+            name="camera"
+            size={25}
+            color="black"
+            style={{marginRight: 10}}
+            onPress={() => navigate(TAB_BAR_NAVIGATOR_ROUTES.QRSCAN)}
+          />
+        ),
+        headerTitle: '',
       }}>
       <Tab.Screen
         name={TAB_BAR_NAVIGATOR_ROUTES.CARROT}
         component={CarrotNavigator}
         options={{
           tabBarLabel: 'Last Scan',
           tabBarIcon: ({color, size}) => (
-            <Icon name="home" color={color} size={size} />
+            <Icons.PlusIcon color={color} size={size} />
           ),
         }}
       />
@@ -54,7 +82,7 @@ const TabNavigator = () => {
         options={{
           tabBarLabel: 'Plats',
           tabBarIcon: ({color, size}) => (
-            <Icon name="home" color={color} size={size} />
+            <Icons.MapIcon color={color} size={size} />
           ),
         }}
       />
@@ -64,7 +92,7 @@ const TabNavigator = () => {
         options={{
           tabBarLabel: 'QRScan',
           tabBarIcon: ({color, size}) => (
-            <Icon name="home" color={color} size={size} />
+            <Icons.QrCodeIcon color={color} size={size} />
           ),
         }}
       />
@@ -74,7 +102,7 @@ const TabNavigator = () => {
         options={{
           tabBarLabel: 'Search',
           tabBarIcon: ({color, size}) => (
-            <Icon name="home" color={color} size={size} />
+            <Icons.MagnifyingGlassIcon color={color} size={size} />
           ),
         }}
       />
@@ -86,6 +114,9 @@ const TabNavigator = () => {
             tabBarStyle: {
               display: 'flex',
             },
+            tabBarIcon: ({color, size}) => (
+              <Icons.UserIcon color={color} size={size} />
+            ),
           };
         }}
       />