Migrate from NativeWind to UniWind, update dependencies, and refactor styles

codeAbinash · codeAbinash · commit b123621b9aa4 · 2026-03-01T03:08:18.000+05:30
diff --git a/.agents/skills/migrate-nativewind-to-uniwind/SKILL.md b/.agents/skills/migrate-nativewind-to-uniwind/SKILL.md
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,7 +15,38 @@
   "files.exclude": {
     // "**/assets/icons/src/*": true
   },
-  "typescript.tsdk": "node_modules\\typescript\\lib"
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "headerClassName",
+    "contentContainerClassName",
+    "columnWrapperClassName",
+    "endFillColorClassName",
+    "imageClassName",
+    "tintColorClassName",
+    "ios_backgroundColorClassName",
+    "thumbColorClassName",
+    "trackColorOnClassName",
+    "trackColorOffClassName",
+    "selectionColorClassName",
+    "cursorColorClassName",
+    "underlineColorAndroidClassName",
+    "placeholderTextColorClassName",
+    "selectionHandleColorClassName",
+    "colorsClassName",
+    "progressBackgroundColorClassName",
+    "titleColorClassName",
+    "underlayColorClassName",
+    "colorClassName",
+    "drawerBackgroundColorClassName",
+    "statusBarBackgroundColorClassName",
+    "backdropColorClassName",
+    "backgroundColorClassName",
+    "ListFooterComponentClassName",
+    "ListHeaderComponentClassName"
+  ],
+  "tailwindCSS.classFunctions": ["useResolveClassNames"]
   // "editor.codeActionsOnSave": {
   //   "source.organizeImports": "always"
   // }
diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
+  presets: ['module:@react-native/babel-preset' /* , 'nativewind/babel' */],
   plugins: [
     [
       'module-resolver',
diff --git a/bun.lock b/bun.lock
diff --git a/global.css b/global.css
@@ -1,6 +1,15 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* @tailwind base; */
+/* @tailwind components; */
+/* @tailwind utilities; */
+@import 'tailwindcss';
+@import 'uniwind';
+
+@theme {
+  --color-accent: #0a84ff;
+  --color-g2: #3866D5;
+  --color-g1: #8101E9;
+  --color-app-icon-bg: #191C21;
+}
 
 .d {
   @apply border border-red-500;
diff --git a/metro.config.js b/metro.config.js
@@ -1,5 +1,6 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
-const { withNativeWind } = require('nativewind/metro')
+// const { withNativeWind } = require('nativewind/metro')
+const { withUniwindConfig } = require('uniwind/metro')
 const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config')
 // const path = require('path')
 const defaultConfig = getDefaultConfig(__dirname)
@@ -21,4 +22,8 @@ const config = mergeConfig(defaultConfig, {
   },
 })
 
-module.exports = wrapWithReanimatedMetroConfig(withNativeWind(config, { input: './global.css' }))
+// module.exports = wrapWithReanimatedMetroConfig(withNativeWind(config, { input: './global.css' }))
+module.exports = withUniwindConfig(wrapWithReanimatedMetroConfig(config), {
+  cssEntryFile: './global.css',
+  polyfills: { rem: 14 },
+})
diff --git a/nativewind-env.d.ts b/nativewind-env.d.ts
@@ -1,3 +1,2 @@
-/// <reference types="nativewind/types" />
-
-// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.
+// /// <reference types="nativewind/types" />
+/// <reference types="uniwind/types" />
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@shopify/react-native-skia"
   ],
   "dependencies": {
-    "@react-native-community/netinfo": "^11.4.1",
+    "@react-native-community/netinfo": "^12.0.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-navigation/bottom-tabs": "^7.15.2",
     "@react-navigation/native": "^7.1.31",
@@ -36,20 +36,21 @@
     "clsx": "^2.1.1",
     "hono": "^4.7.11",
     "lottie-react-native": "7.3.6",
-    "nativewind": "^4.1.23",
     "react": "19.2.3",
-    "react-native": "0.84.0",
-    "react-native-device-info": "^14.0.4",
+    "react-native": "0.84.1",
+    "react-native-device-info": "^15.0.2",
     "react-native-geolocation-service": "^5.3.1",
     "react-native-gesture-handler": "^2.30.0",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-mmkv": "3.3.3",
+    "react-native-mmkv": "^4.1.2",
+    "react-native-nitro-modules": "^0.34.1",
     "react-native-reanimated": "4.2.2",
     "react-native-safe-area-context": "^5.7.0",
     "react-native-screens": "4.24.0",
     "react-native-svg": "^15.12.1",
     "react-native-worklets": "0.7.4",
     "tailwind-merge": "^3.3.1",
+    "uniwind": "^1.4.0",
     "zod": "^3.25.47",
     "zustand": "^5.0.7"
   },
@@ -62,10 +63,10 @@
     "@react-native-community/cli": "20.1.0",
     "@react-native-community/cli-platform-android": "20.1.0",
     "@react-native-community/cli-platform-ios": "20.1.0",
-    "@react-native/babel-preset": "0.84.0",
-    "@react-native/eslint-config": "0.84.0",
-    "@react-native/metro-config": "0.84.0",
-    "@react-native/typescript-config": "0.84.0",
+    "@react-native/babel-preset": "0.84.1",
+    "@react-native/eslint-config": "0.84.1",
+    "@react-native/metro-config": "0.84.1",
+    "@react-native/typescript-config": "0.84.1",
     "@tanstack/eslint-plugin-query": "^5.78.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^25.3.2",
@@ -81,10 +82,13 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react-native-svg-transformer": "^1.5.1",
     "react-test-renderer": "19.2.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.8.3"
   },
   "engines": {
     "node": ">= 22.11.0"
+  },
+  "patchedDependencies": {
+    "react-native-mmkv@4.1.2": "patches/react-native-mmkv@4.1.2.patch"
   }
 }
diff --git a/patches/react-native-mmkv@4.1.2.patch b/patches/react-native-mmkv@4.1.2.patch
@@ -0,0 +1,19 @@
+diff --git a/android/CMakeLists.txt b/android/CMakeLists.txt
+index 33696a2ef090ae6392d093c02fca2090f379f0fa..36ed966f899904a7c1c4d98027264c40d18f751a 100644
+--- a/android/CMakeLists.txt
++++ b/android/CMakeLists.txt
+@@ -22,6 +22,14 @@ add_library(${PACKAGE_NAME} SHARED
+ # Find MMKV prefab package (from mmkv-shared gradle dependency)
+ find_package(mmkv REQUIRED CONFIG)
+ 
++# Fix MMKV 2.2.x header path (headers are in include/MMKV/ subdirectory)
++get_target_property(MMKV_INCLUDE_DIRS mmkv::mmkv INTERFACE_INCLUDE_DIRECTORIES)
++foreach(dir ${MMKV_INCLUDE_DIRS})
++  if(IS_DIRECTORY "${dir}/MMKV")
++    target_include_directories(${PACKAGE_NAME} PRIVATE "${dir}/MMKV")
++  endif()
++endforeach()
++
+ # Add Nitrogen specs :)
+ include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/NitroMmkv+autolinking.cmake)
+ 
diff --git a/skills-lock.json b/skills-lock.json
@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "migrate-nativewind-to-uniwind": {
+      "source": "uni-stack/uniwind",
+      "sourceType": "github",
+      "computedHash": "ed862e5d3f404e2105b1ed8c92f696ed1a975cbc93b3d5859877272a7c54f8bf"
+    }
+  }
+}
diff --git a/src/components/RoundIcon.tsx b/src/components/RoundIcon.tsx
@@ -1,8 +1,7 @@
 import { HugeIconProps } from '@hugeicons/constants'
 import { Colors } from '@utils/colors'
 import React from 'react'
-import { View } from 'react-native'
-import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils'
+import { View, type ViewProps } from 'react-native'
 
 type RoundedIconProps = {
   Icon: React.FC<HugeIconProps>
diff --git a/src/screens/DeveloperOptions/MMKVDataEditor.tsx b/src/screens/DeveloperOptions/MMKVDataEditor.tsx
@@ -63,7 +63,7 @@ export default function MMKVDataEditor({
       {
         text: 'Delete',
         onPress: () => {
-          ls.delete(key as StorageKeys)
+          ls.remove(key as StorageKeys)
           navigation.goBack()
         },
       },
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
@@ -28,7 +28,7 @@ export const Colors = {
   black: '#000',
   white: '#fff',
   accent: COL.accent,
-  appIconBg: Tailwind.theme.extend.colors.appIconBg,
+  appIconBg: '#191C21',
   slate: {
     '50': '#f8fafc',
     '100': '#f1f5f9',
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
@@ -1,11 +1,11 @@
 import { useMemo } from 'react'
-import { MMKV } from 'react-native-mmkv'
+import { createMMKV } from 'react-native-mmkv'
 
-export const ls = new MMKV({
+export const ls = createMMKV({
   id: 'my-app-storage',
 })
 
-export const secureLs = new MMKV({
+export const secureLs = createMMKV({
   id: 'my-app-secure-storage',
   encryptionKey: '524sdr245sdes2',
 })
@@ -40,19 +40,19 @@ export function clearStorage(s: Storage) {
 }
 
 export function clearKey(key: string) {
-  ls.delete(key)
+  ls.remove(key)
 }
 
 export function clearKeys(keys: string[]) {
   keys.forEach((key) => {
-    ls.delete(key)
+    ls.remove(key)
   })
 }
 
 export function clearStartWith(startWith: string) {
   const keys = ls.getAllKeys().filter((key) => key.startsWith(startWith))
   keys.forEach((key) => {
-    ls.delete(key)
+    ls.remove(key)
   })
 }
 
@@ -187,7 +187,7 @@ function set(key: StorageKeys, value: string) {
 }
 
 function remove(key: StorageKeys) {
-  ls.delete(key)
+  ls.remove(key)
 }
 
 const S = {
diff --git a/src/zustand/authStore.ts b/src/zustand/authStore.ts
@@ -15,7 +15,7 @@ const authStore = create<AuthStore>((set) => ({
   },
   removeToken: () => {
     set({ token: undefined })
-    secureLs.delete('token')
+    secureLs.remove('token')
   },
 }))
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,19 +1,23 @@
-/** @type {import('tailwindcss').Config} */
+// /** @type {import('tailwindcss').Config} */
+// Commented out: NativeWind config migrated to global.css @theme block and uniwind
 
-const accent = '#FF3B30'
-module.exports = {
-  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
-  presets: [require('nativewind/preset')],
-  theme: {
-    extend: {
-      colors: {
-        accent: accent,
-        g2: '#3866D5',
-        g1: '#8101E9',
-        appIconBg: '#191C21',
-      },
-    },
-  },
-  plugins: [],
-  accent,
-}
+// const accent = '#0a84ff'
+// module.exports = {
+//   content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
+//   presets: [require('nativewind/preset')],
+//   theme: {
+//     extend: {
+//       colors: {
+//         accent: accent,
+//         g2: '#3866D5',
+//         g1: '#8101E9',
+//         appIconBg: '#191C21',
+//       },
+//     },
+//   },
+//   plugins: [],
+//   accent,
+// }
+
+const accent = '#0a84ff'
+module.exports = { accent }
diff --git a/uniwind-types.d.ts b/uniwind-types.d.ts
@@ -0,0 +1,10 @@
+// NOTE: This file is generated by uniwind and it should not be edited manually.
+/// <reference types="uniwind/types" />
+
+declare module 'uniwind' {
+    export interface UniwindConfig {
+        themes: readonly ['light', 'dark']
+    }
+}
+
+export {}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`module.exports = {`
`2`		`- presets: ['module:@react-native/babel-preset', 'nativewind/babel'],`
	`2`	`+ presets: ['module:@react-native/babel-preset' /* , 'nativewind/babel' */],`
`3`	`3`	`plugins: [`
`4`	`4`	`[`
`5`	`5`	`'module-resolver',`