replace all stylesheets with tailwind classes

apps/mobile/app.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

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

@@ -1,10 +1,16 @@
 import { Tabs } from 'expo-router';
+import { NativeWindStyleSheet } from 'nativewind';
 
 import TabBarIcon from '../../components/TabBarIcon';
-import Colors from '../../constants/Colors.js';
 import { globalStyles } from '../../styles/global';
+import useTailwind from '../hooks/useTailwind';
+
+NativeWindStyleSheet.setOutput({
+  default: 'native',
+});
 
 export default function TabLayout() {
+  const { colors } = useTailwind();
   return (
     <Tabs
       sceneContainerStyle={{
@@ -12,9 +18,9 @@ export default function TabLayout() {
       }}
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: Colors.purple[100],
+        tabBarActiveTintColor: colors.purple[100],
         tabBarStyle: {
-          backgroundColor: Colors.shade[700],
+          backgroundColor: colors.shade[700],
           borderTopColor: 'transparent',
           borderTopRightRadius: 20,
           borderTopLeftRadius: 20,
@@ -55,7 +61,6 @@ export default function TabLayout() {
         options={{
           title: 'Search',
           tabBarLabel: '',
-          tabBarShowLabel: false,
           tabBarLabelStyle: {
             display: 'none',
           },
@@ -65,7 +70,7 @@ export default function TabLayout() {
               style={{
                 position: 'relative',
                 top: -1,
-                backgroundColor: Colors.purple[400],
+                backgroundColor: colors.purple[400],
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

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

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

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

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

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

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

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

@@ -1,13 +1,13 @@
 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 { StyledView } from '../../../components/ui/Styled';
+import useTailwind from '../../hooks/useTailwind';
 
 export default function Searchbar() {
+  const { colors } = useTailwind();
   const [keyword, setKeyword] = useState('');
   const inputRef = useRef<TextInput>(null);
 
@@ -25,19 +25,19 @@ export default function Searchbar() {
   );
 
   return (
-    <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>
+    <StyledView className="mb-6 mt-4 flex-row items-center rounded-full border">
+      <StyledView className="ml-1 w-12 items-center justify-center">
+        <FontAwesome5 name="search" size={18} color={colors.shade[200]} />
+      </StyledView>
       <TextInput
         value={keyword}
         autoFocus
         onChangeText={(text) => setKeyword(text)}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={Colors.shade[200]}
-        className="rounded-3xl py-3 pr-5 text-white"
+        placeholderTextColor={colors.shade[200]}
+        className="w-full rounded-3xl py-3 pr-5 text-white"
       />
-    </View>
+    </StyledView>
   );
 }

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

@@ -1,40 +1,33 @@
-import { useFocusEffect } from 'expo-router';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Dimensions, ScrollView, View } from 'react-native';
-import { TextInput } from 'react-native-gesture-handler';
+import { ScrollView } from 'react-native';
 
 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';
+import { StyledText, StyledView } from '../../../components/ui/Styled';
 
 export default function SearchScreen() {
   return (
     <ScrollView>
       <ScreenLayout
         title={
-          <View className="flex-row items-center">
-            <BoldText className="text-2xl font-bold text-white">
-              Search
-            </BoldText>
-          </View>
+          <StyledView className="flex-row items-center">
+            <StyledText className="text-2xl font-bold">Search</StyledText>
+          </StyledView>
         }
         subtitle="Looking for something?"
       >
         <Searchbar />
-        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
-          <View className="basis-1/2 px-3 pb-3">
+        <StyledView className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <StyledView className="basis-1/2 px-3 pb-3">
             <Item />
-          </View>
-          <View className="basis-1/2 px-3 pb-3">
+          </StyledView>
+          <StyledView className="basis-1/2 px-3 pb-3">
             <Item />
-          </View>
-          <View className="basis-1/2 px-3 pb-3">
+          </StyledView>
+          <StyledView className="basis-1/2 px-3 pb-3">
             <Item />
-          </View>
-        </View>
+          </StyledView>
+        </StyledView>
       </ScreenLayout>
     </ScrollView>
   );

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

@@ -1,19 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  items: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-    width: '100%',
-    flexDirection: 'row',
-    flex: 1,
-  },
-  itemOuter: {
-    flexBasis: '50%',
-    paddingHorizontal: 12,
-    paddingBottom: 12,
-  },
-});
-
-export default styles;

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

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

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

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

apps/mobile/app/_layout.tsx

@@ -10,7 +10,7 @@ import { SplashScreen, Stack } from 'expo-router';
 import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
 
-import Colors from '../constants/Colors.js';
+import useTailwind from './hooks/useTailwind';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -57,6 +57,7 @@ export default function RootLayout() {
 
 function RootLayoutNav() {
   const colorScheme = useColorScheme();
+  const { colors } = useTailwind();
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
@@ -65,7 +66,7 @@ function RootLayoutNav() {
           gestureEnabled: true,
           headerShown: false,
           contentStyle: {
-            backgroundColor: Colors.shade[900],
+            backgroundColor: colors.shade[900],
           },
         }}
       >

apps/mobile/app/hooks/useTailwind.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import resolveConfig from 'tailwindcss/resolveConfig';
+
+import tailwindConfig from '../../tailwind.config.js';
+
+const useTailwind = () => {
+  const tailwind = useMemo(() => resolveConfig(tailwindConfig), []);
+  return {
+    colors: tailwind.theme.colors,
+  };
+};
+
+export default useTailwind;

apps/mobile/components/TabBarIcon.tsx

@@ -1,20 +1,16 @@
 import { FontAwesome } from '@expo/vector-icons';
 
-import Colors from '../constants/Colors.js';
+import useTailwind from '../app/hooks/useTailwind';
 
 type Props = {
   focused?: boolean;
-  color?: string;
 } & React.ComponentProps<typeof FontAwesome>;
 
-export default function TabBarIcon({
-  color = Colors.shade[300],
-  focused,
-  ...rest
-}: Props) {
+export default function TabBarIcon({ focused, ...rest }: Props) {
+  const { colors } = useTailwind();
   return (
     <FontAwesome
-      color={color || (focused ? Colors.purple[300] : Colors.shade[300])}
+      color={focused ? colors.purple[300] : colors.shade[300]}
       size={24}
       {...rest}
     />

apps/mobile/components/item/item.tsx

@@ -1,12 +1,12 @@
-import { Image, View } from 'react-native';
+import { Image } from 'react-native';
 
 import { TMDB_POSTER_PATH } from '../../constants/General';
-import { BoldText, RegularText } from '../ui/Text';
+import { StyledText, StyledView } from '../ui/Styled';
 
 export default function Item() {
   return (
-    <View className="w-full">
-      <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
+    <StyledView className="w-full">
+      <StyledView className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
         <Image
           source={{
             uri: `${TMDB_POSTER_PATH}/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg`,
@@ -14,13 +14,13 @@ export default function Item() {
           }}
           className="h-full w-full object-cover"
         />
-      </View>
-      <BoldText className="text-white">Hamilton</BoldText>
-      <View className="flex-row items-center gap-3">
-        <RegularText className="text-xs text-gray-600">Movie</RegularText>
-        <View className="h-1 w-1 rounded-3xl bg-gray-600" />
-        <RegularText className="text-sm text-gray-600">2023</RegularText>
-      </View>
-    </View>
+      </StyledView>
+      <StyledText className="font-bold text-white">Hamilton</StyledText>
+      <StyledView className="flex-row items-center gap-3">
+        <StyledText className="text-xs text-gray-600">Movie</StyledText>
+        <StyledView className="h-1 w-1 rounded-3xl bg-gray-600" />
+        <StyledText className="text-sm text-gray-600">2023</StyledText>
+      </StyledView>
+    </StyledView>
   );
 }

apps/mobile/components/layout/screenLayout.tsx

@@ -1,6 +1,4 @@
-import { View } from 'react-native';
-
-import { BoldText, RegularText } from '../ui/Text';
+import { StyledText, StyledView } from '../ui/Styled';
 
 type Props = {
   title?: React.ReactNode | string;
@@ -10,15 +8,17 @@ type Props = {
 
 export default function ScreenLayout({ title, subtitle, children }: Props) {
   return (
-    <View className="bg-shade-900 flex-1 py-12">
+    <StyledView tw="bg-shade-900 flex-1 p-12">
       {typeof title === 'string' && (
-        <BoldText className="text-2xl font-bold text-white">{title}</BoldText>
+        <StyledText className="text-2xl font-bold text-white">
+          {title}
+        </StyledText>
       )}
       {typeof title !== 'string' && title}
-      <RegularText className="text-shade-200 mt-1 text-sm">
+      <StyledText className="mt-1 text-sm font-bold text-white">
         {subtitle}
-      </RegularText>
-      <View className="py-3">{children}</View>
-    </View>
+      </StyledText>
+      <StyledView className="py-3">{children}</StyledView>
+    </StyledView>
   );
 }

apps/mobile/components/layout/styles.tsx

@@ -1,10 +0,0 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
-export const styles = StyleSheet.create({
-  container: {
-    minHeight: Dimensions.get('window').height,
-  },
-  children: {
-    paddingVertical: 12,
-  },
-});

apps/mobile/components/ui/Styled.tsx

@@ -0,0 +1,6 @@
+import { styled } from 'nativewind';
+import { Text, View } from 'react-native';
+
+export const StyledText = styled(Text, 'text-white');
+
+export const StyledView = styled(View);

apps/mobile/components/ui/Text.tsx

@@ -1,44 +0,0 @@
-import { Text } from 'react-native';
-
-export function RegularText({ style, children, ...rest }: Text['props']) {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansRegular' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-}
-export function BoldText({ style, children, ...rest }: Text['props']) {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansBold' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-}
-export function SemiBoldText({ style, children, ...rest }: Text['props']) {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansSemiBold' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-}
-export function MediumText({ style, children, ...rest }: Text['props']) {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansMedium' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-}
-export function ExtraBoldText({ style, children, ...rest }: Text['props']) {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansExtraBold' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-}
-export function LightText({ style, children, ...rest }: Text['props']) {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansLight' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-}

apps/mobile/constants/Colors.ts

@@ -1,42 +0,0 @@
-const tintColorLight = '#2f95dc';
-const tintColorDark = '#fff';
-
-// export default {
-//   light: {
-//     text: '#000',
-//     background: '#fff',
-//     tint: tintColorLight,
-//     tabIconDefault: '#ccc',
-//     tabIconSelected: tintColorLight,
-//   },
-//   dark: {
-//     text: '#fff',
-//     background: '#000',
-//     tint: tintColorDark,
-//     tabIconDefault: '#ccc',
-//     tabIconSelected: tintColorDark,
-//     purple100: '#C082FF',
-//     purple300: '#8D44D6',
-//     purple400: '#7831BF',
-//     shade50: '#676790',
-//     shade200: '#3F3F60',
-//     shade300: '#32324F',
-//     shade700: '#131322',
-//     shade900: '#0A0A12',
-//   },
-// };
-
-export default {
-  purple: {
-    100: '#C082FF',
-    300: '#8D44D6',
-    400: '#7831BF',
-  },
-  shade: {
-    50: '#676790',
-    200: '#3F3F60',
-    300: '#32324F',
-    700: '#131322',
-    900: '#0A0A12',
-  },
-};

apps/mobile/package.json

@@ -43,7 +43,7 @@
     "react-native-web": "^0.19.10",
     "react-test-renderer": "*",
     "typescript": "*",
-    "tailwindcss": "*"
+    "tailwindcss": "3.3.2"
   },
   "scripts": {
     "eas-build-pre-install": "cd ../../ && node tools/scripts/eas-build-pre-install.mjs . apps/mobile && cp pnpm-lock.yaml apps/mobile",
@@ -65,7 +65,6 @@
     "jest-expo": "~49.0.0",
     "pod-install": "^0.1.39",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "^3.4.1",
     "typescript": "~5.2.2"
   },
   "overrides": {

apps/mobile/tailwind.config.js

@@ -0,0 +1,26 @@
+const colors = require('tailwindcss/colors');
+
+// https://github.com/marklawlor/nativewind/issues/573
+module.exports = {
+  content: ['./**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        ...colors,
+        purple: {
+          100: '#C082FF',
+          300: '#8D44D6',
+          400: '#7831BF',
+        },
+        shade: {
+          50: '#676790',
+          200: '#3F3F60',
+          300: '#32324F',
+          700: '#131322',
+          900: '#0A0A12',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

apps/mobile/tailwind.config.ts

@@ -1,13 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-import colors from './constants/Colors';
-
-export default {
-  content: [],
-  theme: {
-    extend: {
-      colors,
-    },
-  },
-  plugins: [],
-} satisfies Config;

apps/mobile/tsconfig.app.json

@@ -12,5 +12,5 @@
     "**/*.spec.tsx",
     "test-setup.ts"
   ],
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "constants/Colors.ts", "tailwind.config.mjs"]
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "tailwind.config.js"]
 }

apps/mobile/tsconfig.json

@@ -11,7 +11,8 @@
     "skipLibCheck": true,
     "resolveJsonModule": true,
     "strict": true,
-    "declaration": true
+    "declaration": true,
+    "allowJs": true,
   },
   "files": [],
   "include": [