first setup

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

@@ -1,7 +1,7 @@
 import { Tabs } from 'expo-router';
 
-import Colors from '../../constants/Colors';
 import TabBarIcon from '../../components/TabBarIcon';
+import Colors from '../../constants/Colors.js';
 import { globalStyles } from '../../styles/global';
 
 export default function TabLayout() {
@@ -12,9 +12,9 @@ export default function TabLayout() {
       }}
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: Colors.dark.purple100,
+        tabBarActiveTintColor: Colors.purple[100],
         tabBarStyle: {
-          backgroundColor: Colors.dark.shade700,
+          backgroundColor: Colors.shade[700],
           borderTopColor: 'transparent',
           borderTopRightRadius: 20,
           borderTopLeftRadius: 20,
@@ -65,7 +65,7 @@ export default function TabLayout() {
               style={{
                 position: 'relative',
                 top: -1,
-                backgroundColor: Colors.dark.purple400,
+                backgroundColor: Colors.purple[400],
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

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

@@ -1,8 +1,5 @@
-import { StyleSheet } from 'react-native';
-
-import ScreenLayout from '../../components/layout/screenLayout';
-import { globalStyles } from '../../styles/global';
-import { RegularText } from '../../components/Styled';
+import ScreenLayout from '../../components/layout/ScreenLayout';
+import { RegularText } from '../../components/ui/Text';
 
 export default function AboutScreen() {
   return (
@@ -10,27 +7,10 @@ export default function AboutScreen() {
       title="About"
       subtitle="What is movie-web and how content is served?"
     >
-      <RegularText style={globalStyles.textWhite}>
+      <RegularText className="text-white">
         No content is served from movie-web directly and movie web does not host
         anything.
       </RegularText>
     </ScreenLayout>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

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

@@ -1,8 +1,5 @@
-import { StyleSheet, Text } from 'react-native';
-
-import { globalStyles } from '../../styles/global';
-import ScreenLayout from '../../components/layout/screenLayout';
-import { RegularText } from '../../components/Styled';
+import ScreenLayout from '../../components/layout/ScreenLayout';
+import { RegularText } from '../../components/ui/Text';
 
 export default function AccountScreen() {
   return (
@@ -10,7 +7,7 @@ export default function AccountScreen() {
       title="Account"
       subtitle="Manage your movie web account from here"
     >
-      <RegularText style={globalStyles.textWhite}>
+      <RegularText className="text-white">
         Hey Bro! what are you up to?
       </RegularText>
     </ScreenLayout>

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

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

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

@@ -1,10 +1,11 @@
 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 Colors from '../../../constants/Colors.js';
 import { globalStyles } from '../../../styles/global';
-import Colors from '../../../constants/Colors';
-import { useFocusEffect } from 'expo-router';
 
 export default function Searchbar() {
   const [keyword, setKeyword] = useState('');
@@ -24,41 +25,19 @@ export default function Searchbar() {
   );
 
   return (
-    <View
-      style={{
-        ...globalStyles.flexRow,
-        ...globalStyles.itemsCenter,
-        ...globalStyles.border,
-        ...globalStyles.roundedFull,
-        marginTop: 14,
-        marginBottom: 24,
-      }}
-    >
-      <View
-        style={{
-          ...globalStyles.justifyCenter,
-          ...globalStyles.itemsCenter,
-          width: 48,
-          marginLeft: 4,
-        }}
-      >
-        <FontAwesome5 name="search" size={18} color={Colors.dark.shade200} />
+    <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]} />
       </View>
       <TextInput
         value={keyword}
-        autoFocus={true}
+        autoFocus
         onChangeText={(text) => setKeyword(text)}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={Colors.dark.shade200}
-        style={[
-          globalStyles.input,
-          globalStyles.fOpenSansRegular,
-          {
-            width: '100%',
-          },
-        ]}
-      ></TextInput>
+        placeholderTextColor={Colors.shade[200]}
+        className="rounded-3xl py-3 pr-5 text-white"
+      />
     </View>
   );
 }

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

@@ -1,37 +1,37 @@
-import { Dimensions, ScrollView, View } from 'react-native';
-
-import { globalStyles } from '../../../styles/global';
-import ScreenLayout from '../../../components/layout/screenLayout';
-import { TextInput } from 'react-native-gesture-handler';
-import styles from './styles';
-import { useCallback, useEffect, useRef, useState } from 'react';
 import { useFocusEffect } from 'expo-router';
-import { BoldText } from '../../../components/Styled';
-import Item from '../../../components/item/item';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Dimensions, ScrollView, View } from 'react-native';
+import { TextInput } from 'react-native-gesture-handler';
+
 import Searchbar from './Searchbar';
+import styles from './styles';
+import Item from '../../../components/item/item';
+import ScreenLayout from '../../../components/layout/ScreenLayout';
+import { BoldText } from '../../../components/ui/Text';
+import { globalStyles } from '../../../styles/global';
 
 export default function SearchScreen() {
   return (
     <ScrollView>
       <ScreenLayout
         title={
-          <View
-            style={{ ...globalStyles.flexRow, ...globalStyles.itemsCenter }}
-          >
-            <BoldText style={globalStyles.sectionTitle}>Search</BoldText>
+          <View className="flex-row items-center">
+            <BoldText className="text-2xl font-bold text-white">
+              Search
+            </BoldText>
           </View>
         }
         subtitle="Looking for something?"
       >
         <Searchbar />
-        <View style={styles.items}>
-          <View style={styles.itemOuter}>
+        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
-          <View style={styles.itemOuter}>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
-          <View style={styles.itemOuter}>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
         </View>

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

@@ -1,12 +1,10 @@
-import { RegularText } from '../../components/Styled';
-import ScreenLayout from '../../components/layout/screenLayout';
-import { globalStyles } from '../../styles/global';
-import { StyleSheet, Text } from 'react-native';
+import ScreenLayout from '../../components/layout/ScreenLayout';
+import { RegularText } from '../../components/ui/Text';
 
 export default function SettingsScreen() {
   return (
     <ScreenLayout title="Settings" subtitle="Need to change something?">
-      <RegularText style={globalStyles.textWhite}>
+      <RegularText className="text-white">
         Settings would be listed in here. Coming soon
       </RegularText>
     </ScreenLayout>

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

@@ -1,41 +1,23 @@
 import { Link, Stack } from 'expo-router';
-import { StyleSheet, View } from 'react-native';
-import { BoldText, RegularText } from '../components/Styled';
+import { View } from 'react-native';
+
+import { BoldText, RegularText } from '../components/ui/Text';
 
 export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen options={{ title: 'Oops!' }} />
-      <View style={styles.container}>
-        <BoldText style={styles.title}>
+      <View className="flex-1 items-center justify-center p-5">
+        <BoldText className="text-lg font-bold">
           This screen doesn&apos;t exist.
         </BoldText>
 
-        <Link href="/" style={styles.link}>
-          <RegularText style={styles.linkText}>Go to home screen!</RegularText>
+        <Link href="/" className="mt-4 py-4">
+          <RegularText className="text-sm text-sky-500">
+            Go to home screen!
+          </RegularText>
         </Link>
       </View>
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-  linkText: {
-    fontSize: 14,
-    color: '#2e78b7',
-  },
-});

apps/mobile/app/_layout.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import {
   DarkTheme,
@@ -9,7 +10,7 @@ import { SplashScreen, Stack } from 'expo-router';
 import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
 
-import Colors from '../constants/Colors';
+import Colors from '../constants/Colors.js';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -27,7 +28,6 @@ SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const [loaded, error] = useFonts({
-    // eslint-disable-next-line global-require
     OpenSansRegular: require('../assets/fonts/OpenSans-Regular.ttf'),
     OpenSansLight: require('../assets/fonts/OpenSans-Light.ttf'),
     OpenSansMedium: require('../assets/fonts/OpenSans-Medium.ttf'),
@@ -65,12 +65,11 @@ function RootLayoutNav() {
           gestureEnabled: true,
           headerShown: false,
           contentStyle: {
-            backgroundColor: Colors.dark.shade900,
+            backgroundColor: Colors.shade[900],
           },
         }}
       >
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
       </Stack>
     </ThemeProvider>
   );

apps/mobile/app/modal.tsx

@@ -1,33 +0,0 @@
-import { StatusBar } from 'expo-status-bar';
-import { Platform, StyleSheet, View } from 'react-native';
-import { BoldText, RegularText } from '../components/Styled';
-
-export default function ModalScreen() {
-  return (
-    <View style={styles.container}>
-      <BoldText style={styles.title}>Modal</BoldText>
-      <View style={styles.separator} />
-      <RegularText>Modal?!</RegularText>
-
-      {/* Use a light status bar on iOS to account for the black space above the modal */}
-      <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});