helpppp

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

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

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

@@ -1,4 +1,5 @@
-import { ScrollView, Text, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import { Text } from '../../components/ui/Text';
 
 import Searchbar from './Searchbar';
 import ScreenLayout from '../../components/layout/ScreenLayout';

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

@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { Text } from '../components/ui/Text';
 
 import ScreenLayout from '../components/layout/ScreenLayout';
 

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

@@ -1,6 +1,6 @@
 import { Link, Stack } from 'expo-router';
 import { View } from 'react-native';
-import { Text } from  './components/ui/Text';
+import { Text } from './components/ui/Text';
 
 export default function NotFoundScreen() {
   return (

apps/mobile/app/components/item/item.tsx

@@ -1,4 +1,5 @@
-import { Image, Text, View } from 'react-native';
+import { Image, View } from 'react-native';
+import { Text } from '../../components/ui/Text';
 
 import { TMDB_POSTER_PATH } from '../../constants/General';
 

apps/mobile/app/components/layout/ScreenLayout.tsx

@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { Text } from '../../components/ui/Text';
 
 type Props = {
   title?: React.ReactNode | string;

apps/mobile/app/components/ui/Text.tsx

@@ -1,9 +1,17 @@
-import { TextProps, Text as RNText } from 'react-native';
-import { cn } from '../../lib/utils';
 import { cva } from 'class-variance-authority';
+import { Text as RNText, TextProps } from 'react-native';
 
-const textVariants = cva('font-sans text-white');
+import { cn } from '../../lib/utils';
 
-export const Text = ({ className, ...props }: TextProps) => {
-  return <RNText className={cn(textVariants(), className)} {...props} />;
-};
+const textVariants = cva('text-white');
+
+export function Text({ className, ...props }: TextProps) {
+  return (
+    <RNText
+      className={cn(className, textVariants(), {
+        'font-sans': !className?.includes('font-'),
+      })}
+      {...props}
+    />
+  );
+}

apps/mobile/app/lib/utils.ts

@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge';
+import { clsx, ClassValue } from 'clsx';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

apps/mobile/metro.config.js

@@ -59,7 +59,7 @@ const customConfig = {
   },
   resolver: {
     assetExts: assetExts.filter((ext) => ext !== 'svg'),
-    sourceExts: [...sourceExts, 'svg'],
+    sourceExts: [...sourceExts, 'svg', 'mjs'],
     blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
     // unstable_enableSymlinks: true,
     // unstable_enablePackageExports: true,

apps/mobile/package.json

@@ -17,8 +17,8 @@
     "@testing-library/jest-native": "*",
     "@testing-library/react-native": "*",
     "@types/react": "*",
-    "class-variance-authority": "*",
-    "clsx": "*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "eslint-plugin-react": "*",
     "eslint-plugin-react-hooks": "*",
     "expo": "*",
@@ -46,8 +46,8 @@
     "react-native-svg-transformer": "*",
     "react-native-web": "^0.19.10",
     "react-test-renderer": "*",
-    "tailwind-merge": "*",
-    "tailwindcss": "*",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "3.3.2",
     "typescript": "*"
   },
   "scripts": {
@@ -69,6 +69,7 @@
     "jest": "^29.4.1",
     "jest-expo": "~49.0.0",
     "pod-install": "^0.1.39",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react-test-renderer": "18.2.0",
     "typescript": "~5.2.2"
   }

apps/mobile/tailwind.config.ts

@@ -19,7 +19,7 @@ export default {
             semibold: ['OpenSansSemiBold'],
             bold: ['OpenSansBold'],
             extrabold: ['OpenSansExtra'],
-          }
+          },
         },
       },
     },