upgrade to v4

apps/mobile/app/(tabs)/_layout.tsx

@@ -1,26 +1,19 @@
 import { Tabs } from 'expo-router';
-import { NativeWindStyleSheet } from 'nativewind';
 
-import TabBarIcon from '../../components/TabBarIcon';
-import { globalStyles } from '../../styles/global';
-import useTailwind from '../hooks/useTailwind';
-
-NativeWindStyleSheet.setOutput({
-  default: 'native',
-});
+import TabBarIcon from '../components/TabBarIcon';
+import Colors from '../constants/Colors';
 
 export default function TabLayout() {
-  const { colors } = useTailwind();
   return (
     <Tabs
       sceneContainerStyle={{
-        backgroundColor: '#000',
+        backgroundColor: Colors.background,
       }}
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: colors.purple[100],
+        tabBarActiveTintColor: Colors.primary[100],
         tabBarStyle: {
-          backgroundColor: colors.shade[700],
+          backgroundColor: Colors.secondary[700],
           borderTopColor: 'transparent',
           borderTopRightRadius: 20,
           borderTopLeftRadius: 20,
@@ -34,7 +27,6 @@ export default function TabLayout() {
           {
             marginTop: 2,
           },
-          globalStyles.fOpenSansMedium,
         ],
       }}
     >
@@ -61,25 +53,9 @@ export default function TabLayout() {
         options={{
           title: 'Search',
           tabBarLabel: '',
-          tabBarLabelStyle: {
-            display: 'none',
-          },
-          tabBarIconStyle: {},
           tabBarIcon: () => (
             <TabBarIcon
-              style={{
-                position: 'relative',
-                top: -1,
-                backgroundColor: colors.purple[400],
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                aspectRatio: 1,
-                borderRadius: 100,
-                textAlign: 'center',
-                textAlignVertical: 'center',
-                height: 56,
-              }}
+              className=" bg-primary-400 flex aspect-[1/1] h-14 items-center justify-center rounded-full text-center text-2xl text-white"
               name="search"
               color="#FFF"
             />