upgrade to native wind v4

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

@@ -1,5 +1,6 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';
 
 export default function AboutScreen() {
   return (
@@ -7,10 +8,10 @@ export default function AboutScreen() {
       title="About"
       subtitle="What is movie-web and how content is served?"
     >
-      <StyledText>
+      <Text>
         No content is served from movie-web directly and movie web does not host
         anything.
-      </StyledText>
+      </Text>
     </ScreenLayout>
   );
 }

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

@@ -1,5 +1,6 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';
 
 export default function AccountScreen() {
   return (
@@ -7,7 +8,7 @@ export default function AccountScreen() {
       title="Account"
       subtitle="Manage your movie web account from here"
     >
-      <StyledText>Hey Bro! what are you up to?</StyledText>
+      <Text>Hey Bro! what are you up to?</Text>
     </ScreenLayout>
   );
 }

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

@@ -1,10 +1,11 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';
 
 export default function HomeScreen() {
   return (
     <ScreenLayout title="Home" subtitle="This is where all magic happens">
-      <StyledText>Movies will be listed here</StyledText>
+      <Text>Movies will be listed here</Text>
     </ScreenLayout>
   );
 }

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

@@ -1,9 +1,9 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import { useFocusEffect } from 'expo-router';
 import { useCallback, useRef, useState } from 'react';
+import { View } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
 
-import { StyledView } from '../../../components/ui/Styled';
 import useTailwind from '../../hooks/useTailwind';
 
 export default function Searchbar() {
@@ -25,10 +25,10 @@ export default function Searchbar() {
   );
 
   return (
-    <StyledView className="mb-6 mt-4 flex-row items-center rounded-full border">
-      <StyledView className="ml-1 w-12 items-center justify-center">
+    <View className="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]} />
-      </StyledView>
+      </View>
       <TextInput
         value={keyword}
         autoFocus
@@ -38,6 +38,6 @@ export default function Searchbar() {
         placeholderTextColor={colors.shade[200]}
         className="w-full rounded-3xl py-3 pr-5 text-white"
       />
-    </StyledView>
+    </View>
   );
 }

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

@@ -1,33 +1,32 @@
-import { ScrollView } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 
 import Searchbar from './Searchbar';
 import Item from '../../../components/item/item';
 import ScreenLayout from '../../../components/layout/ScreenLayout';
-import { StyledText, StyledView } from '../../../components/ui/Styled';
 
 export default function SearchScreen() {
   return (
     <ScrollView>
       <ScreenLayout
         title={
-          <StyledView className="flex-row items-center">
-            <StyledText className="text-2xl font-bold">Search</StyledText>
-          </StyledView>
+          <View className="flex-row items-center">
+            <Text className="text-2xl font-bold">Search</Text>
+          </View>
         }
         subtitle="Looking for something?"
       >
         <Searchbar />
-        <StyledView className="flex w-full flex-1 flex-row flex-wrap justify-start">
-          <StyledView className="basis-1/2 px-3 pb-3">
+        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
-          </StyledView>
-          <StyledView className="basis-1/2 px-3 pb-3">
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
-          </StyledView>
-          <StyledView className="basis-1/2 px-3 pb-3">
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
-          </StyledView>
-        </StyledView>
+          </View>
+        </View>
       </ScreenLayout>
     </ScrollView>
   );

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

@@ -1,10 +1,11 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';
 
 export default function SettingsScreen() {
   return (
     <ScreenLayout title="Settings" subtitle="Need to change something?">
-      <StyledText>Settings would be listed in here. Coming soon</StyledText>
+      <Text>Settings would be listed in here. Coming soon</Text>
     </ScreenLayout>
   );
 }

apps/mobile/app/[...missing].tsx

@@ -1,22 +1,19 @@
 import { Link, Stack } from 'expo-router';
-
-import { StyledText, StyledView } from '../components/ui/Styled';
+import { Text, View } from 'react-native';
 
 export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen options={{ title: 'Oops!' }} />
-      <StyledView className="flex-1 items-center justify-center p-5">
-        <StyledText className="text-lg font-bold">
+      <View className="flex-1 items-center justify-center p-5">
+        <Text className="text-lg font-bold">
           This screen doesn&apos;t exist.
-        </StyledText>
+        </Text>
 
         <Link href="/" className="mt-4 py-4">
-          <StyledText className="text-sm text-sky-500">
-            Go to home screen!
-          </StyledText>
+          <Text className="text-sm text-sky-500">Go to home screen!</Text>
         </Link>
-      </StyledView>
+      </View>
     </>
   );
 }

apps/mobile/app/_layout.tsx

@@ -11,6 +11,7 @@ import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
 
 import useTailwind from './hooks/useTailwind';
+import '../styles/global.css';
 
 export {
   // Catch any errors thrown by the Layout component.

apps/mobile/app/hooks/useTailwind.ts

@@ -1,12 +1,15 @@
 import { useMemo } from 'react';
 import resolveConfig from 'tailwindcss/resolveConfig';
 
-import tailwindConfig from '../../tailwind.config.js';
+import tailwindConfig from '../../tailwind.config';
 
 const useTailwind = () => {
   const tailwind = useMemo(() => resolveConfig(tailwindConfig), []);
+  console.log(tailwind);
   return {
-    colors: tailwind.theme.colors,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    colors: tailwind.theme.colors as typeof tailwindConfig.theme.extend.colors,
   };
 };