upgrade to native wind v4

2025-09-13 11:33:26 +00:00 · 2024-01-27 13:53:41 +01:00
parent 26a1b623e7
commit 4c634abc1e
21 changed files with 396 additions and 201 deletions
--- a/apps/mobile/app/(tabs)/about.tsx
+++ b/apps/mobile/app/(tabs)/about.tsx
@@ -1,5 +1,6 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';

 export default function AboutScreen() {
  return (
@@ -7,10 +8,10 @@ export default function AboutScreen() {
      title="About"
      subtitle="What is movie-web and how content is served?"
    >
-      <StyledText>
+      <Text>
        No content is served from movie-web directly and movie web does not host
        anything.
-      </StyledText>
+      </Text>
    </ScreenLayout>
  );
 }
--- a/apps/mobile/app/(tabs)/account.tsx
+++ b/apps/mobile/app/(tabs)/account.tsx
@@ -1,5 +1,6 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';

 export default function AccountScreen() {
  return (
@@ -7,7 +8,7 @@ export default function AccountScreen() {
      title="Account"
      subtitle="Manage your movie web account from here"
    >
-      <StyledText>Hey Bro! what are you up to?</StyledText>
+      <Text>Hey Bro! what are you up to?</Text>
    </ScreenLayout>
  );
 }
--- a/apps/mobile/app/(tabs)/index.tsx
+++ b/apps/mobile/app/(tabs)/index.tsx
@@ -1,10 +1,11 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';

 export default function HomeScreen() {
  return (
    <ScreenLayout title="Home" subtitle="This is where all magic happens">
-      <StyledText>Movies will be listed here</StyledText>
+      <Text>Movies will be listed here</Text>
    </ScreenLayout>
  );
 }
--- a/apps/mobile/app/(tabs)/search/Searchbar.tsx
+++ b/apps/mobile/app/(tabs)/search/Searchbar.tsx
@@ -1,9 +1,9 @@
 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 { StyledView } from '../../../components/ui/Styled';
 import useTailwind from '../../hooks/useTailwind';

 export default function Searchbar() {
@@ -25,10 +25,10 @@ export default function Searchbar() {
  );

  return (
-    <StyledView className="mb-6 mt-4 flex-row items-center rounded-full border">
-      <StyledView className="ml-1 w-12 items-center justify-center">
+    <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]} />
-      </StyledView>
+      </View>
      <TextInput
        value={keyword}
        autoFocus
@@ -38,6 +38,6 @@ export default function Searchbar() {
        placeholderTextColor={colors.shade[200]}
        className="w-full rounded-3xl py-3 pr-5 text-white"
      />
-    </StyledView>
+    </View>
  );
 }
--- a/apps/mobile/app/(tabs)/search/_layout.tsx
+++ b/apps/mobile/app/(tabs)/search/_layout.tsx
@@ -1,33 +1,32 @@
-import { ScrollView } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';

 import Searchbar from './Searchbar';
 import Item from '../../../components/item/item';
 import ScreenLayout from '../../../components/layout/ScreenLayout';
-import { StyledText, StyledView } from '../../../components/ui/Styled';

 export default function SearchScreen() {
  return (
    <ScrollView>
      <ScreenLayout
        title={
-          <StyledView className="flex-row items-center">
-            <StyledText className="text-2xl font-bold">Search</StyledText>
-          </StyledView>
+          <View className="flex-row items-center">
+            <Text className="text-2xl font-bold">Search</Text>
+          </View>
        }
        subtitle="Looking for something?"
      >
        <Searchbar />
-        <StyledView className="flex w-full flex-1 flex-row flex-wrap justify-start">
-          <StyledView className="basis-1/2 px-3 pb-3">
+        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <View className="basis-1/2 px-3 pb-3">
            <Item />
-          </StyledView>
-          <StyledView className="basis-1/2 px-3 pb-3">
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
            <Item />
-          </StyledView>
-          <StyledView className="basis-1/2 px-3 pb-3">
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
            <Item />
-          </StyledView>
-        </StyledView>
+          </View>
+        </View>
      </ScreenLayout>
    </ScrollView>
  );
--- a/apps/mobile/app/(tabs)/settings.tsx
+++ b/apps/mobile/app/(tabs)/settings.tsx
@@ -1,10 +1,11 @@
+import { Text } from 'react-native';
+
 import ScreenLayout from '../../components/layout/ScreenLayout';
-import { StyledText } from '../../components/ui/Styled';

 export default function SettingsScreen() {
  return (
    <ScreenLayout title="Settings" subtitle="Need to change something?">
-      <StyledText>Settings would be listed in here. Coming soon</StyledText>
+      <Text>Settings would be listed in here. Coming soon</Text>
    </ScreenLayout>
  );
 }
--- a/apps/mobile/app/[...missing].tsx
+++ b/apps/mobile/app/[...missing].tsx
@@ -1,22 +1,19 @@
 import { Link, Stack } from 'expo-router';
-
-import { StyledText, StyledView } from '../components/ui/Styled';
+import { Text, View } from 'react-native';

 export default function NotFoundScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Oops!' }} />
-      <StyledView className="flex-1 items-center justify-center p-5">
-        <StyledText className="text-lg font-bold">
+      <View className="flex-1 items-center justify-center p-5">
+        <Text className="text-lg font-bold">
          This screen doesn&apos;t exist.
-        </StyledText>
+        </Text>

        <Link href="/" className="mt-4 py-4">
-          <StyledText className="text-sm text-sky-500">
-            Go to home screen!
-          </StyledText>
+          <Text className="text-sm text-sky-500">Go to home screen!</Text>
        </Link>
-      </StyledView>
+      </View>
    </>
  );
 }
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -11,6 +11,7 @@ import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';

 import useTailwind from './hooks/useTailwind';
+import '../styles/global.css';

 export {
  // Catch any errors thrown by the Layout component.
--- a/apps/mobile/app/hooks/useTailwind.ts
+++ b/apps/mobile/app/hooks/useTailwind.ts
@@ -1,12 +1,15 @@
 import { useMemo } from 'react';
 import resolveConfig from 'tailwindcss/resolveConfig';

-import tailwindConfig from '../../tailwind.config.js';
+import tailwindConfig from '../../tailwind.config';

 const useTailwind = () => {
  const tailwind = useMemo(() => resolveConfig(tailwindConfig), []);
+  console.log(tailwind);
  return {
-    colors: tailwind.theme.colors,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    colors: tailwind.theme.colors as typeof tailwindConfig.theme.extend.colors,
  };
 };

--- a/apps/mobile/babel.config.js
+++ b/apps/mobile/babel.config.js
@@ -1,11 +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',
-      'nativewind/babel',
+      'react-native-reanimated/plugin',
    ],
  };
 };
--- a/apps/mobile/components/item/item.tsx
+++ b/apps/mobile/components/item/item.tsx
@@ -1,12 +1,11 @@
-import { Image } from 'react-native';
+import { Image, Text, View } from 'react-native';

 import { TMDB_POSTER_PATH } from '../../constants/General';
-import { StyledText, StyledView } from '../ui/Styled';

 export default function Item() {
  return (
-    <StyledView className="w-full">
-      <StyledView className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
+    <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`,
@@ -14,13 +13,13 @@ export default function Item() {
          }}
          className="h-full w-full object-cover"
        />
-      </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>
+      </View>
+      <Text className="font-bold text-white">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>
  );
 }
--- a/apps/mobile/components/layout/screenLayout.tsx
+++ b/apps/mobile/components/layout/screenLayout.tsx
@@ -1,4 +1,4 @@
-import { StyledText, StyledView } from '../ui/Styled';
+import { Text, View } from 'react-native';

 type Props = {
  title?: React.ReactNode | string;
@@ -8,17 +8,13 @@ type Props = {

 export default function ScreenLayout({ title, subtitle, children }: Props) {
  return (
-    <StyledView tw="bg-shade-900 flex-1 p-12">
+    <View tw="bg-shade-900 flex-1 p-12">
      {typeof title === 'string' && (
-        <StyledText className="text-2xl font-bold text-white">
-          {title}
-        </StyledText>
+        <Text className="text-2xl font-bold text-white">{title}</Text>
      )}
      {typeof title !== 'string' && title}
-      <StyledText className="mt-1 text-sm font-bold text-white">
-        {subtitle}
-      </StyledText>
-      <StyledView className="py-3">{children}</StyledView>
-    </StyledView>
+      <Text className="mt-1 text-sm font-bold text-white">{subtitle}</Text>
+      <View className="py-3">{children}</View>
+    </View>
  );
 }
--- a/apps/mobile/components/ui/Styled.tsx
+++ b/apps/mobile/components/ui/Styled.tsx
@@ -1,6 +0,0 @@
-import { styled } from 'nativewind';
-import { Text, View } from 'react-native';
-
-export const StyledText = styled(Text, 'text-white');
-
-export const StyledView = styled(View);
--- a/apps/mobile/metro.config.js
+++ b/apps/mobile/metro.config.js
@@ -1,6 +1,45 @@
+// 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 { assetExts, sourceExts } = defaultConfig.resolver;
+
+// /**
+//  * Metro configuration
+//  * https://facebook.github.io/metro/docs/configuration
+//  *
+//  * @type {import('metro-config').MetroConfig}
+//  */
+// const customConfig = {
+//   transformer: {
+//     babelTransformerPath: require.resolve('react-native-svg-transformer'),
+//   },
+//   resolver: {
+//     assetExts: assetExts.filter((ext) => ext !== 'svg'),
+//     sourceExts: [...sourceExts, 'svg'],
+//     blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
+//     // unstable_enableSymlinks: true,
+//     // unstable_enablePackageExports: true,
+//   },
+// };
+
+// module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
+//   // Change this to true to see debugging info.
+//   // Useful if you have issues resolving modules
+//   debug: false,
+//   // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
+//   extensions: [],
+//   // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
+//   watchFolders: [],
+// });
+
 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);
@@ -25,7 +64,15 @@ const customConfig = {
  },
 };

-module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
+const nativeWindConfig = withNativeWind(
+  mergeConfig(defaultConfig, customConfig),
+  {
+    input: './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 +81,5 @@ module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
  watchFolders: [],
 });
+
+module.exports = nxConfig;
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -30,7 +30,7 @@
    "jest": "*",
    "jest-expo": "*",
    "metro-config": "*",
-    "nativewind": "^2.0.11",
+    "nativewind": "^4.0.23",
    "pod-install": "*",
    "react": "*",
    "react-dom": "18.2.0",
@@ -41,6 +41,7 @@
    "react-native-svg": "*",
    "react-native-svg-transformer": "*",
    "react-native-web": "^0.19.10",
+    "react-native-reanimated": "~3.3.0",
    "react-test-renderer": "*",
    "typescript": "*",
    "tailwindcss": "3.3.2"
--- a/apps/mobile/styles/global.css
+++ b/apps/mobile/styles/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/apps/mobile/tailwind.config.js
+++ b/apps/mobile/tailwind.config.js
@@ -1,26 +0,0 @@
-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: [],
-};
--- a/apps/mobile/tailwind.config.ts
+++ b/apps/mobile/tailwind.config.ts
@@ -0,0 +1,58 @@
+// 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';
+
+export default {
+  content: ['./src/**/*.{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',
+            },
+          },
+        },
+      },
+    },
+  ],
+} satisfies Config;
--- a/apps/mobile/tsconfig.app.json
+++ b/apps/mobile/tsconfig.app.json
@@ -12,5 +12,5 @@
    "**/*.spec.tsx",
    "test-setup.ts"
  ],
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "tailwind.config.ts"]
 }