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"
             />

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

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 
-import ScreenLayout from '../../components/layout/ScreenLayout';
+import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function AboutScreen() {
   return (

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

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 
-import ScreenLayout from '../../components/layout/ScreenLayout';
+import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function AccountScreen() {
   return (

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

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 
-import ScreenLayout from '../../components/layout/ScreenLayout';
+import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function HomeScreen() {
   return (

apps/mobile/app/(tabs)/search/Searchbar.tsx

@@ -3,11 +3,9 @@ import { useFocusEffect } from 'expo-router';
 import { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
-
-import useTailwind from '../../hooks/useTailwind';
+import Colors from '../../constants/Colors';
 
 export default function Searchbar() {
-  const { colors } = useTailwind();
   const [keyword, setKeyword] = useState('');
   const inputRef = useRef<TextInput>(null);
 
@@ -25,9 +23,9 @@ export default function Searchbar() {
   );
 
   return (
-    <View className="mb-6 mt-4 flex-row items-center rounded-full border">
+    <View className="border-primary-400 focus-within:border-primary-300 mb-6 mt-4 flex-row items-center rounded-full border">
       <View className="ml-1 w-12 items-center justify-center">
-        <FontAwesome5 name="search" size={18} color={colors.shade[200]} />
+        <FontAwesome5 name="search" size={18} color={Colors.secondary[200]} />
       </View>
       <TextInput
         value={keyword}
@@ -35,8 +33,8 @@ export default function Searchbar() {
         onChangeText={(text) => setKeyword(text)}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={colors.shade[200]}
-        className="w-full rounded-3xl py-3 pr-5 text-white"
+        placeholderTextColor={Colors.secondary[200]}
+        className="w-full rounded-3xl py-3 pr-5 text-white focus-visible:outline-none"
       />
     </View>
   );

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

@@ -1,8 +1,8 @@
 import { ScrollView, Text, View } from 'react-native';
 
 import Searchbar from './Searchbar';
-import Item from '../../../components/item/item';
-import ScreenLayout from '../../../components/layout/ScreenLayout';
+import ScreenLayout from '../../components/layout/ScreenLayout';
+import Item from '../../components/item/item';
 
 export default function SearchScreen() {
   return (
@@ -10,7 +10,7 @@ export default function SearchScreen() {
       <ScreenLayout
         title={
           <View className="flex-row items-center">
-            <Text className="text-2xl font-bold">Search</Text>
+            <Text className="text-2xl font-bold text-white">Search</Text>
           </View>
         }
         subtitle="Looking for something?"

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

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 
-import ScreenLayout from '../../components/layout/ScreenLayout';
+import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function SettingsScreen() {
   return (