upgrade to v4

apps/mobile/app.json

@@ -4,20 +4,19 @@
     "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",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-	"jsEngine": "jsc",
+    "jsEngine": "jsc",
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "dev.movieweb.app"
@@ -34,20 +33,17 @@
       "bundler": "metro"
     },
     "plugins": [
-	  "expo-router",
+      "expo-router",
       [
         "@config-plugins/detox",
         {
           "skipProguard": false,
-          "subdomains": [
-            "10.0.2.2",
-            "localhost"
-          ]
+          "subdomains": ["10.0.2.2", "localhost"]
         }
       ]
     ],
-	"experiments": {
-	   "typedRoutes": true
-	}
+    "experiments": {
+      "typedRoutes": true
+    }
   }
 }

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

@@ -1,26 +1,19 @@
 import { Tabs } from 'expo-router';
-import { NativeWindStyleSheet } from 'nativewind';
 
-import TabBarIcon from '../../components/TabBarIcon';
-import { globalStyles } from '../../styles/global';
-import useTailwind from '../hooks/useTailwind';
-
-NativeWindStyleSheet.setOutput({
-  default: 'native',
-});
+import TabBarIcon from '../components/TabBarIcon';
+import Colors from '../constants/Colors';
 
 export default function TabLayout() {
-  const { colors } = useTailwind();
   return (
     <Tabs
       sceneContainerStyle={{
-        backgroundColor: '#000',
+        backgroundColor: Colors.background,
       }}
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: colors.purple[100],
+        tabBarActiveTintColor: Colors.primary[100],
         tabBarStyle: {
-          backgroundColor: colors.shade[700],
+          backgroundColor: Colors.secondary[700],
           borderTopColor: 'transparent',
           borderTopRightRadius: 20,
           borderTopLeftRadius: 20,
@@ -34,7 +27,6 @@ export default function TabLayout() {
           {
             marginTop: 2,
           },
-          globalStyles.fOpenSansMedium,
         ],
       }}
     >
@@ -61,25 +53,9 @@ export default function TabLayout() {
         options={{
           title: 'Search',
           tabBarLabel: '',
-          tabBarLabelStyle: {
-            display: 'none',
-          },
-          tabBarIconStyle: {},
           tabBarIcon: () => (
             <TabBarIcon
-              style={{
-                position: 'relative',
-                top: -1,
-                backgroundColor: colors.purple[400],
-                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,6 +1,6 @@
 import { Text } from 'react-native';
 
-import ScreenLayout from '../../components/layout/ScreenLayout';
+import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function AboutScreen() {
   return (

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

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

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

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 
-import ScreenLayout from '../../components/layout/ScreenLayout';
+import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function HomeScreen() {
   return (

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

@@ -3,11 +3,9 @@ import { useFocusEffect } from 'expo-router';
 import { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
-
-import useTailwind from '../../hooks/useTailwind';
+import Colors from '../../constants/Colors';
 
 export default function Searchbar() {
-  const { colors } = useTailwind();
   const [keyword, setKeyword] = useState('');
   const inputRef = useRef<TextInput>(null);
 
@@ -25,9 +23,9 @@ export default function Searchbar() {
   );
 
   return (
-    <View className="mb-6 mt-4 flex-row items-center rounded-full border">
+    <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.shade[200]} />
+        <FontAwesome5 name="search" size={18} color={Colors.secondary[200]} />
       </View>
       <TextInput
         value={keyword}
@@ -35,8 +33,8 @@ export default function Searchbar() {
         onChangeText={(text) => setKeyword(text)}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={colors.shade[200]}
-        className="w-full rounded-3xl py-3 pr-5 text-white"
+        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,8 +1,8 @@
 import { ScrollView, Text, View } from 'react-native';
 
 import Searchbar from './Searchbar';
-import Item from '../../../components/item/item';
-import ScreenLayout from '../../../components/layout/ScreenLayout';
+import ScreenLayout from '../../components/layout/ScreenLayout';
+import Item from '../../components/item/item';
 
 export default function SearchScreen() {
   return (
@@ -10,7 +10,7 @@ export default function SearchScreen() {
       <ScreenLayout
         title={
           <View className="flex-row items-center">
-            <Text className="text-2xl font-bold">Search</Text>
+            <Text className="text-2xl font-bold text-white">Search</Text>
           </View>
         }
         subtitle="Looking for something?"

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

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 
-import ScreenLayout from '../../components/layout/ScreenLayout';
+import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function SettingsScreen() {
   return (

apps/mobile/app/_layout.tsx

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

apps/mobile/app/components/TabBarIcon.tsx

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

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

@@ -8,7 +8,7 @@ type Props = {
 
 export default function ScreenLayout({ title, subtitle, children }: Props) {
   return (
-    <View tw="bg-shade-900 flex-1 p-12">
+    <View className="bg-shade-900 flex-1 p-12">
       {typeof title === 'string' && (
         <Text className="text-2xl font-bold text-white">{title}</Text>
       )}

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/hooks/useTailwind.ts

@@ -1,16 +0,0 @@
-import { useMemo } from 'react';
-import resolveConfig from 'tailwindcss/resolveConfig';
-
-import tailwindConfig from '../../tailwind.config';
-
-const useTailwind = () => {
-  const tailwind = useMemo(() => resolveConfig(tailwindConfig), []);
-  console.log(tailwind);
-  return {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    colors: tailwind.theme.colors as typeof tailwindConfig.theme.extend.colors,
-  };
-};
-
-export default useTailwind;

apps/mobile/metro.config.js

@@ -42,7 +42,9 @@ 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;
 
 /**
@@ -67,7 +69,7 @@ const customConfig = {
 const nativeWindConfig = withNativeWind(
   mergeConfig(defaultConfig, customConfig),
   {
-    input: './styles/global.css',
+    input: './app/styles/global.css',
     configPath: './tailwind.config.ts',
   },
 );
@@ -81,5 +83,4 @@ const nxConfig = withNxMetro(nativeWindConfig, {
   // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
   watchFolders: [],
 });
-
 module.exports = nxConfig;

apps/mobile/package.json

@@ -29,6 +29,7 @@
     "expo-web-browser": "^12.5.0",
     "jest": "*",
     "jest-expo": "*",
+    "metro": "*",
     "metro-config": "*",
     "nativewind": "^4.0.23",
     "pod-install": "*",
@@ -67,11 +68,5 @@
     "pod-install": "^0.1.39",
     "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,22 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const globalStyles = StyleSheet.create({
-  fOpenSansLight: {
-    fontFamily: 'OpenSansLight',
-  },
-  fOpenSansBold: {
-    fontFamily: 'OpenSansBold',
-  },
-  fOpenSansSemiBold: {
-    fontFamily: 'OpenSansSemiBold',
-  },
-  fOpenSansMedium: {
-    fontFamily: 'OpenSansMedium',
-  },
-  fOpenSansExtraBold: {
-    fontFamily: 'OpenSansExtraBold',
-  },
-  fOpenSansRegular: {
-    fontFamily: 'OpenSansRegular',
-  },
-});

apps/mobile/tailwind.config.ts

@@ -1,56 +1,19 @@
-// const colors = require('tailwindcss/colors');
-
-// // https://github.com/marklawlor/nativewind/issues/573
-// /** @type {import('tailwindcss').Config} */
-// 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: [],
-// };
-
 // @ts-expect-error - no types
 import nativewind from 'nativewind/preset';
 import type { Config } from 'tailwindcss';
+import colors from './app/constants/Colors';
 
 export default {
-  content: ['./src/**/*.{ts,tsx}'],
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
   presets: [
     nativewind,
     {
       theme: {
         extend: {
-          colors: {
-            purple: {
-              100: '#C082FF',
-              300: '#8D44D6',
-              400: '#7831BF',
-            },
-            shade: {
-              50: '#676790',
-              200: '#3F3F60',
-              300: '#32324F',
-              700: '#131322',
-              900: '#0A0A12',
-            },
-          },
+          colors,
+          fontFamily: {
+
+          }
         },
       },
     },

apps/mobile/tsconfig.app.json

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

apps/mobile/tsconfig.json

@@ -3,10 +3,7 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "jsx": "react-native",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "moduleResolution": "node",
     "skipLibCheck": true,
     "resolveJsonModule": true,
@@ -15,16 +12,13 @@
     "allowJs": true,
   },
   "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",
+    },
+  ],
 }

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");