Merge pull request #6 from movie-web/nativewind

Nativewind

.eslintrc.js

@@ -17,7 +17,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       typescript: {
-        project: './tsconfig.json',
+        project: ['./tsconfig.base.json', './apps/*/tsconfig.json'],
       },
     },
   },

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/settings.json

@@ -7,5 +7,14 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    // Should import Text from UI components instead
+    "react-native/Libraries/Text/Text.d.ts"
+  ]
 }

apps/mobile/app.d.ts

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

apps/mobile/app.json

@@ -4,7 +4,8 @@
     "slug": "mw-mobile",
     "version": "1.0.0",
     "orientation": "portrait",
-	"scheme":"dev.movieweb.app",
+    "scheme": "dev.movieweb.app",
+    "userInterfaceStyle": "automatic",
     "icon": "./assets/images/icon.png",
     "splash": {
       "image": "./assets/images/splash.png",
@@ -15,9 +16,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "dev.movieweb.app"
@@ -39,10 +38,7 @@
         "@config-plugins/detox",
         {
           "skipProguard": false,
-          "subdomains": [
-            "10.0.2.2",
-            "localhost"
-          ]
+          "subdomains": ["10.0.2.2", "localhost"]
         }
       ]
     ],

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

@@ -1,20 +1,19 @@
 import { Tabs } from 'expo-router';
 
-import Colors from '../../constants/Colors';
-import TabBarIcon from '../../components/TabBarIcon';
-import { globalStyles } from '../../styles/global';
+import TabBarIcon from '@/components/TabBarIcon';
+import Colors from '@/constants/Colors';
 
 export default function TabLayout() {
   return (
     <Tabs
       sceneContainerStyle={{
-        backgroundColor: '#000',
+        backgroundColor: Colors.background,
       }}
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: Colors.dark.purple100,
+        tabBarActiveTintColor: Colors.primary[100],
         tabBarStyle: {
-          backgroundColor: Colors.dark.shade700,
+          backgroundColor: Colors.secondary[700],
           borderTopColor: 'transparent',
           borderTopRightRadius: 20,
           borderTopLeftRadius: 20,
@@ -28,7 +27,6 @@ export default function TabLayout() {
           {
             marginTop: 2,
           },
-          globalStyles.fOpenSansMedium,
         ],
       }}
     >
@@ -55,26 +53,9 @@ export default function TabLayout() {
         options={{
           title: 'Search',
           tabBarLabel: '',
-          tabBarShowLabel: false,
-          tabBarLabelStyle: {
-            display: 'none',
-          },
-          tabBarIconStyle: {},
           tabBarIcon: () => (
             <TabBarIcon
-              style={{
-                position: 'relative',
-                top: -1,
-                backgroundColor: Colors.dark.purple400,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                aspectRatio: 1,
-                borderRadius: 100,
-                textAlign: 'center',
-                textAlignVertical: 'center',
-                height: 56,
-              }}
+              className=" bg-primary-400 flex aspect-[1/1] h-14 items-center justify-center rounded-full text-center text-2xl text-white"
               name="search"
               color="#FFF"
             />

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 { Text } 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}>
+      <Text>
         No content is served from movie-web directly and movie web does not host
         anything.
-      </RegularText>
+      </Text>
     </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 { Text } from '@/components/ui/Text';
 
 export default function AccountScreen() {
   return (
@@ -10,9 +7,7 @@ export default function AccountScreen() {
       title="Account"
       subtitle="Manage your movie web account from here"
     >
-      <RegularText style={globalStyles.textWhite}>
-        Hey Bro! what are you up to?
-      </RegularText>
+      <Text>Hey Bro! what are you up to?</Text>
     </ScreenLayout>
   );
 }

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

@@ -1,13 +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 { Text } from '@/components/ui/Text';
 
 export default function HomeScreen() {
   return (
     <ScreenLayout title="Home" subtitle="This is where all magic happens">
-      <RegularText style={globalStyles.textWhite}>
-        Movies will be listed here
-      </RegularText>
+      <Text>Movies will be listed here</Text>
     </ScreenLayout>
   );
 }

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

@@ -1,10 +1,10 @@
 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 { globalStyles } from '../../../styles/global';
-import Colors from '../../../constants/Colors';
-import { useFocusEffect } from 'expo-router';
+
+import Colors from '@/constants/Colors';
 
 export default function Searchbar() {
   const [keyword, setKeyword] = useState('');
@@ -24,41 +24,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="border-primary-400 focus-within:border-primary-300 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.secondary[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.secondary[200]}
+        className="w-full rounded-3xl py-3 pr-5 text-white focus-visible:outline-none"
+      />
     </View>
   );
 }

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

@@ -1,13 +1,9 @@
-import { Dimensions, ScrollView, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
+
+import Item from '@/components/item/item';
+import ScreenLayout from '@/components/layout/ScreenLayout';
+import { Text } from '@/components/ui/Text';
 
-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 Searchbar from './Searchbar';
 
 export default function SearchScreen() {
@@ -15,23 +11,21 @@ export default function SearchScreen() {
     <ScrollView>
       <ScreenLayout
         title={
-          <View
-            style={{ ...globalStyles.flexRow, ...globalStyles.itemsCenter }}
-          >
-            <BoldText style={globalStyles.sectionTitle}>Search</BoldText>
+          <View className="flex-row items-center">
+            <Text className="text-2xl font-bold">Search</Text>
           </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)/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,14 +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 { Text } from '@/components/ui/Text';
 
 export default function SettingsScreen() {
   return (
     <ScreenLayout title="Settings" subtitle="Need to change something?">
-      <RegularText style={globalStyles.textWhite}>
-        Settings would be listed in here. Coming soon
-      </RegularText>
+      <Text>Settings would be listed in here. Coming soon</Text>
     </ScreenLayout>
   );
 }

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

@@ -1,41 +1,21 @@
 import { Link, Stack } from 'expo-router';
-import { StyleSheet, View } from 'react-native';
-import { BoldText, RegularText } from '../components/Styled';
+import { View } from 'react-native';
+
+import { Text } 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">
+        <Text className="text-lg font-bold">
           This screen doesn&apos;t exist.
-        </BoldText>
+        </Text>
 
-        <Link href="/" style={styles.link}>
-          <RegularText style={styles.linkText}>Go to home screen!</RegularText>
+        <Link href="/" className="mt-4 py-4">
+          <Text className="text-sm text-sky-500">Go to home screen!</Text>
         </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,9 @@ 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';
+
+import './styles/global.css';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -27,7 +30,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 +67,11 @@ function RootLayoutNav() {
           gestureEnabled: true,
           headerShown: false,
           contentStyle: {
-            backgroundColor: Colors.dark.shade900,
+            backgroundColor: Colors.background,
           },
         }}
       >
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
       </Stack>
     </ThemeProvider>
   );

apps/mobile/app/components/ExternalLink.tsx

@@ -13,7 +13,6 @@ export function ExternalLink(
         target: '_blank',
       }}
       {...props}
-      // @ts-expect-error: External URLs are not typed.
       href={props.href}
       onPress={(e) => {
         if (Platform.OS !== 'web') {

apps/mobile/app/components/TabBarIcon.tsx

@@ -0,0 +1,17 @@
+import { FontAwesome } from '@expo/vector-icons';
+
+import Colors from '@/constants/Colors';
+
+type Props = {
+  focused?: boolean;
+} & React.ComponentProps<typeof FontAwesome>;
+
+export default function TabBarIcon({ focused, ...rest }: Props) {
+  return (
+    <FontAwesome
+      color={focused ? Colors.primary[300] : Colors.secondary[300]}
+      size={24}
+      {...rest}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,22 @@
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui/Text';
+
+type Props = {
+  title?: React.ReactNode | string;
+  subtitle?: string;
+  children?: React.ReactNode;
+};
+
+export default function ScreenLayout({ title, subtitle, children }: Props) {
+  return (
+    <View className="bg-shade-900 flex-1 p-12">
+      {typeof title === 'string' && (
+        <Text className="text-2xl font-bold">{title}</Text>
+      )}
+      {typeof title !== 'string' && title}
+      <Text className="mt-1 text-sm font-bold">{subtitle}</Text>
+      <View className="py-3">{children}</View>
+    </View>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+import { Text as RNText, TextProps } from 'react-native';
+
+import { cn } from '@/lib/utils';
+
+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/constants/Colors.ts

@@ -0,0 +1,14 @@
+export default {
+  primary: {
+    100: '#C082FF',
+    300: '#8D44D6',
+    400: '#7831BF',
+  },
+  secondary: {
+    50: '#676790',
+    200: '#3F3F60',
+    300: '#32324F',
+    700: '#131322',
+  },
+  background: '#0a0a12',
+};

apps/mobile/app/lib/utils.ts

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

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%',
-  },
-});

apps/mobile/app/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/mobile/babel.config.js

@@ -1,10 +1,14 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
     plugins: [
       // Required for expo-router
       'expo-router/babel',
+      'react-native-reanimated/plugin',
     ],
   };
 };

apps/mobile/components/Styled.tsx

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

apps/mobile/components/TabBarIcon.tsx

@@ -1,21 +0,0 @@
-import { FontAwesome } from '@expo/vector-icons';
-import Colors from '../constants/Colors';
-
-type Props = {
-  focused?: boolean;
-  color?: string;
-} & React.ComponentProps<typeof FontAwesome>;
-
-export default function TabBarIcon({
-  color = Colors.dark.shade300,
-  focused,
-  ...rest
-}: Props) {
-  return (
-    <FontAwesome
-      color={color || (focused ? Colors.dark.purple300 : Colors.dark.shade300)}
-      size={24}
-      {...rest}
-    />
-  );
-}

apps/mobile/components/item/item.tsx

@@ -1,31 +0,0 @@
-import { globalStyles } from '../../styles/global';
-import { Image, Text, View } from 'react-native';
-import styles from './styles';
-import { BoldText, RegularText } from '../Styled';
-import { TMDB_POSTER_PATH } from '../../constants/General';
-
-export default function Item() {
-  return (
-    <View style={styles.wrapper}>
-      <View style={styles.imageWrapper}>
-        <Image
-          source={{
-            uri: `${TMDB_POSTER_PATH}/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg`,
-            width: 200,
-          }}
-          style={styles.image}
-        />
-      </View>
-      <BoldText style={globalStyles.textWhite}>Hamilton</BoldText>
-      <View style={styles.meta}>
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
-          Movie
-        </RegularText>
-        <View style={[globalStyles.dotSeperator]}></View>
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
-          2023
-        </RegularText>
-      </View>
-    </View>
-  );
-}

apps/mobile/components/item/styles.tsx

@@ -1,31 +0,0 @@
-import Colors from '../../constants/Colors';
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-  },
-  imageWrapper: {
-    borderRadius: 16,
-    aspectRatio: 9 / 14,
-    width: '100%',
-    overflow: 'hidden',
-    position: 'relative',
-    marginBottom: 6,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-  },
-  meta: {
-    flexDirection: 'row',
-    gap: 6,
-    alignItems: 'center',
-  },
-  smallText: {
-    fontSize: 12,
-  },
-});
-
-export default styles;

apps/mobile/components/layout/screenLayout.tsx

@@ -1,31 +0,0 @@
-import { View } from 'react-native';
-import { globalStyles } from '../../styles/global';
-import { styles } from './styles';
-import { BoldText, RegularText } from '../Styled';
-
-type Props = {
-  title?: React.ReactNode | string;
-  subtitle?: string;
-  children?: React.ReactNode;
-};
-
-export default function ScreenLayout({ title, subtitle, children }: Props) {
-  return (
-    <View
-      style={[
-        globalStyles.pageContainer,
-        globalStyles.container,
-        styles.container,
-      ]}
-    >
-      {typeof title === 'string' && (
-        <BoldText style={globalStyles.sectionTitle}>{title}</BoldText>
-      )}
-      {typeof title !== 'string' && title}
-      <RegularText style={[{ marginTop: 4 }, globalStyles.sectionSubtitle]}>
-        {subtitle}
-      </RegularText>
-      <View style={styles.children}>{children}</View>
-    </View>
-  );
-}

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/constants/Colors.ts

@@ -1,27 +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',
-  },
-};

apps/mobile/metro.config.js

@@ -1,9 +1,12 @@
 const { withNxMetro } = require('@nx/expo');
 const { getDefaultConfig } = require('@expo/metro-config');
 const { mergeConfig } = require('metro-config');
+const { withNativeWind } = require('nativewind/metro');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 
-const defaultConfig = getDefaultConfig(__dirname);
+const defaultConfig = getDefaultConfig(__dirname, {
+  isCSSEnabled: true,
+});
 const { assetExts, sourceExts } = defaultConfig.resolver;
 
 /**
@@ -18,14 +21,22 @@ 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,
   },
 };
 
-module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
+const nativeWindConfig = withNativeWind(
+  mergeConfig(defaultConfig, customConfig),
+  {
+    input: './app/styles/global.css',
+    configPath: './tailwind.config.ts',
+  },
+);
+
+const nxConfig = withNxMetro(nativeWindConfig, {
   // Change this to true to see debugging info.
   // Useful if you have issues resolving modules
   debug: false,
@@ -34,3 +45,4 @@ module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
   // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
   watchFolders: [],
 });
+module.exports = nxConfig;

apps/mobile/package.json

@@ -12,8 +12,15 @@
     "@expo/vector-icons": "^13.0.0",
     "@nx/expo": "*",
     "@react-navigation/native": "^6.1.9",
+    "@rnx-kit/metro-config": "*",
+    "@rnx-kit/metro-resolver-symlinks": "*",
     "@testing-library/jest-native": "*",
     "@testing-library/react-native": "*",
+    "@types/react": "*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "eslint-plugin-react": "*",
+    "eslint-plugin-react-hooks": "*",
     "expo": "*",
     "expo-font": "^11.4.0",
     "expo-linking": "^5.0.2",
@@ -22,26 +29,27 @@
     "expo-status-bar": "*",
     "expo-system-ui": "^2.6.0",
     "expo-web-browser": "^12.5.0",
+    "jest": "*",
+    "jest-expo": "*",
+    "metro": "*",
     "metro-config": "*",
+    "nativewind": "^4.0.23",
     "pod-install": "*",
     "react": "*",
     "react-dom": "18.2.0",
     "react-native": "*",
     "react-native-gesture-handler": "^2.14.1",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "^4.8.2",
     "react-native-screens": "^3.29.0",
     "react-native-svg": "*",
     "react-native-svg-transformer": "*",
     "react-native-web": "^0.19.10",
-    "@rnx-kit/metro-config": "*",
-    "@rnx-kit/metro-resolver-symlinks": "*",
-    "@types/react": "*",
-    "eslint-plugin-react": "*",
-    "eslint-plugin-react-hooks": "*",
-    "jest": "*",
-    "jest-expo": "*",
     "react-test-renderer": "*",
-    "typescript": "*"
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "3.3.2",
+    "typescript": "*",
+    "prettier-plugin-tailwindcss": "*"
   },
   "scripts": {
     "eas-build-pre-install": "cd ../../ && node tools/scripts/eas-build-pre-install.mjs . apps/mobile && cp pnpm-lock.yaml apps/mobile",
@@ -62,13 +70,8 @@
     "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"
-  },
-  "overrides": {
-    "react-refresh": "~0.14.0"
-  },
-  "resolutions": {
-    "react-refresh": "~0.14.0"
   }
 }

apps/mobile/project.json

@@ -8,7 +8,8 @@
       "executor": "@nx/expo:start",
       "dependsOn": ["ensure-symlink", "sync-deps"],
       "options": {
-        "port": 8081
+        "port": 8081,
+        "clear": true
       }
     },
     "serve": {

apps/mobile/styles/global.tsx

@@ -1,75 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Colors from '../constants/Colors';
-
-export const globalStyles = StyleSheet.create({
-  pageContainer: {
-    flex: 1,
-    backgroundColor: Colors.dark.shade900,
-    paddingVertical: 48,
-  },
-  container: {
-    padding: 24,
-  },
-  sectionTitle: {
-    color: '#FFF',
-    letterSpacing: -1.5,
-    fontWeight: 'bold',
-    fontSize: 28,
-  },
-  sectionSubtitle: {
-    color: Colors.dark.shade200,
-    fontSize: 14,
-  },
-  textWhite: {
-    color: '#FFF',
-  },
-  flexRow: {
-    flexDirection: 'row',
-  },
-  itemsCenter: {
-    alignItems: 'center',
-  },
-  justifyCenter: {
-    justifyContent: 'center',
-  },
-  input: {
-    borderRadius: 24,
-    paddingRight: 18,
-    paddingVertical: 12,
-    color: '#FFF',
-  },
-  border: {
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,.1)',
-  },
-  roundedFull: {
-    borderRadius: 34,
-  },
-  fOpenSansLight: {
-    fontFamily: 'OpenSansLight',
-  },
-  fOpenSansBold: {
-    fontFamily: 'OpenSansBold',
-  },
-  fOpenSansSemiBold: {
-    fontFamily: 'OpenSansSemiBold',
-  },
-  fOpenSansMedium: {
-    fontFamily: 'OpenSansMedium',
-  },
-  fOpenSansExtraBold: {
-    fontFamily: 'OpenSansExtraBold',
-  },
-  fOpenSansRegular: {
-    fontFamily: 'OpenSansRegular',
-  },
-  textMuted: {
-    color: '#5F5F7A',
-  },
-  dotSeperator: {
-    width: 4,
-    height: 4,
-    backgroundColor: '#5F5F7A',
-    borderRadius: 50,
-  },
-});

apps/mobile/tailwind.config.ts

@@ -0,0 +1,27 @@
+// @ts-expect-error - no types
+import nativewind from 'nativewind/preset';
+import type { Config } from 'tailwindcss';
+import colors from './app/constants/Colors';
+
+export default {
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  presets: [
+    nativewind,
+    {
+      theme: {
+        extend: {
+          colors,
+          fontFamily: {
+            sans: ['OpenSansRegular'],
+            thin: ['OpenSansLight'],
+            normal: ['OpenSansRegular'],
+            medium: ['OpenSansMedium'],
+            semibold: ['OpenSansSemiBold'],
+            bold: ['OpenSansBold'],
+            extrabold: ['OpenSansExtra'],
+          },
+        },
+      },
+    },
+  ],
+} satisfies Config;

apps/mobile/tsconfig.app.json

@@ -1,8 +1,9 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "types": ["node"],
   },
   "files": ["../../node_modules/@nx/expo/typings/svg.d.ts"],
   "exclude": [
@@ -11,5 +12,11 @@
     "**/*.spec.tsx",
     "test-setup.ts"
   ],
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "tailwind.config.ts"
+  ]
 }

apps/mobile/tsconfig.json

@@ -3,27 +3,28 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "jsx": "react-native",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "moduleResolution": "node",
     "skipLibCheck": true,
     "resolveJsonModule": true,
     "strict": true,
-    "declaration": true
+    "declaration": true,
+    "allowJs": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./app/*"
+      ],
+    }
   },
   "files": [],
-  "include": [
-    ".expo/types/**/*.ts",
-    "expo-env.d.ts"
-  ],
+  "include": [".expo/types/**/*.ts", "expo-env.d.ts"],
   "references": [
     {
-      "path": "./tsconfig.app.json"
+      "path": "./tsconfig.app.json",
     },
     {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
+      "path": "./tsconfig.spec.json",
+    },
+  ],
 }

apps/mobile/tsconfig.spec.json

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
     "types": ["jest", "node"]

package.json

@@ -60,5 +60,16 @@
     "react-native-svg-transformer": "1.3.0",
     "react-native-web": "~0.19.9",
     "tslib": "^2.3.0"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "nativewind@4.0.23": "patches/nativewind@4.0.23.patch"
+    }
+  },
+  "overrides": {
+    "react-refresh": "~0.14.0"
+  },
+  "resolutions": {
+    "react-refresh": "~0.14.0"
   }
 }

patches/nativewind@4.0.23.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/metro/transformer.js b/dist/metro/transformer.js
+index 1bda43b116d02834db01a42e64dd302e3d3fe785..8ff7f8a324cd9a8531df915a704d604828959e78 100644
+--- a/dist/metro/transformer.js
++++ b/dist/metro/transformer.js
+@@ -16,7 +16,7 @@ new globalThis.WebSocket(\`\${url}:${config.nativewind.fastRefreshPort}\`).addEv
+ StyleSheet.registerCompiled(JSON.parse('${config.nativewind.parsedOutput}'));`, "utf8"), options);
+         }
+         else if (options.platform === "web") {
+-            return metro_transform_worker_1.default.transform(config, projectRoot, filename, Buffer.from(`require('${config.nativewind.outputPath}');`, "utf8"), options);
++            return metro_transform_worker_1.default.transform(config, projectRoot, filename, Buffer.from(`require('${config.nativewind.outputPath.replace(/\\/g, '\\\\')}');`, "utf8"), options);
+         }
+         else {
+             data = Buffer.from(config.nativewind.rawOutput, "utf8");