chore: Upgrade nativewind to v4

Author: DanielMarkiel

App.tsx

@@ -2,6 +2,7 @@ import 'react-native-gesture-handler';
 import React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
+import './global.css';
 import { Navigator } from './src/navigations/Navigator';
 import { AppProviders } from './src/providers/AppProviders';
 

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
   plugins: [
     [
       'module-resolver',
@@ -8,7 +8,6 @@ module.exports = {
         extensions: ['.ios.ts', '.ios.tsx', '.android.ts', '.android.tsx', '.ts', '.tsx', '.js', '.jsx', '.json'],
       },
     ],
-    'nativewind/babel',
     [
       'transform-inline-environment-variables',
       {

global.css

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

ios/Podfile.lock

@@ -1131,19 +1131,20 @@ PODS:
     - React-Core
   - RNDateTimePicker (7.6.4):
     - React-Core
-  - RNGestureHandler (2.14.0):
+  - RNGestureHandler (2.16.0):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - RNReanimated (3.6.1):
+  - RNReanimated (3.8.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
     - ReactCommon/turbomodule/core
-  - RNScreens (3.29.0):
+  - RNScreens (3.31.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
+    - React-RCTImage
   - SocketRocket (0.6.1)
   - Yoga (1.14.0)
 
@@ -1434,9 +1435,9 @@ SPEC CHECKSUMS:
   ReactCommon: 2aa35648354bd4c4665b9a5084a7d37097b89c10
   RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
   RNDateTimePicker: 08f00a2c341bf96e4b30da15799fbdd4c5fa48a3
-  RNGestureHandler: a4c4561307e67f2942f5a4fe1526ff78cf3f5280
-  RNReanimated: dee37576492f1a375017515f5c77e66e5eec696b
-  RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
+  RNGestureHandler: bc2cdb2dc42facdf34992ae364b8a728e19a3686
+  RNReanimated: 8a4d86eb951a4a99d8e86266dc71d7735c0c30a9
+  RNScreens: 134a7511b12b8eb440b87aac21e36a71295d6024
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 805bf71192903b20fc14babe48080582fee65a80
 

metro.config.js

@@ -1,5 +1,6 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const { generate } = require('@storybook/react-native/scripts/generate');
+const { withNativeWind } = require('nativewind/metro');
 
 const path = require('path');
 
@@ -13,11 +14,11 @@ generate({
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {
+const config = mergeConfig(getDefaultConfig(__dirname), {
   transformer: {
     // Required by Storybook
     unstable_allowRequireContext: true,
   },
-};
+});
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = withNativeWind(config, { input: './global.css' });

app.d.ts nativewind-env.d.tsapp.d.ts renamed to nativewind-env.d.ts

@@ -30,19 +30,20 @@
     "@tanstack/react-query": "^4.36.1",
     "axios": "^1.6.2",
     "fast-text-encoding": "^1.0.6",
-    "nativewind": "^2.0.11",
+    "nativewind": "^4.0.36",
     "qs": "^6.11.2",
     "react": "18.2.0",
     "react-intl": "^6.5.1",
     "react-native": "0.73.6",
     "react-native-config": "^1.5.1",
     "react-native-drawer-layout": "^3.2.2",
-    "react-native-gesture-handler": "^2.14.0",
+    "react-native-gesture-handler": "^2.16.0",
     "react-native-mmkv": "^2.11.0",
-    "react-native-reanimated": "^3.6.1",
+    "react-native-reanimated": "^3.8.1",
     "react-native-safe-area-context": "^4.7.4",
-    "react-native-screens": "^3.27.0",
-    "react-native-url-polyfill": "^2.0.0"
+    "react-native-screens": "^3.31.1",
+    "react-native-url-polyfill": "^2.0.0",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -81,7 +82,7 @@
     "prettier": "2.8.8",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "3.4.3",
     "ts-jest": "^29.1.1",
     "typescript": "5.0.4"
   },