feat: add nativewind

app/global.css

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

app/login.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'expo-router'
 import { useEffect } from 'react'
 import { useColorScheme, View } from 'react-native'
 import { Button, Text } from 'react-native-paper'
+import './global.css'
 
 function Login() {
   const { signIn, user } = useAuth()

babel.config.ts

@@ -1,6 +1,9 @@
 module.exports = function (api: { cache: (arg0: boolean) => void }) {
   api.cache(true)
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
   }
 }

metro.config.js

@@ -0,0 +1,7 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const { withNativeWind } = require('nativewind/metro')
+
+// eslint-disable-next-line no-undef
+const config = getDefaultConfig(__dirname)
+
+module.exports = withNativeWind(config, { input: './global.css' })

nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

package.json

@@ -39,15 +39,17 @@
     "expo-web-browser": "~13.0.3",
     "formik": "^2.4.6",
     "i18n-js": "^4.4.3",
+    "nativewind": "^4.1.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-paper": "^5.12.3",
-    "react-native-reanimated": "~3.10.1",
+    "react-native-reanimated": "^3.16.1",
-    "react-native-safe-area-context": "4.10.5",
+    "react-native-safe-area-context": "^4.14.0",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.6",
+    "tailwindcss": "^3.4.14",
     "yup": "^1.4.0"
   },
   "devDependencies": {

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -3,8 +3,17 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "app/(app)/plushtml.old"]
+  "include": [
-}
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "app/(app)/plushtml.old",
+    "nativewind-env.d.ts"
+  ]
+}