help

apps/mobile/app/(tabs)/about.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/(tabs)/index.tsx

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

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

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

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

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

apps/mobile/app/lib/utils.ts

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