feat: added nativewind

README.md

@@ -178,6 +178,39 @@ Edit `frontend/App.js`:
 - Set up CI/CD pipeline
 - Deploy to production environment
 
+## Development Workflow
+### Branch naming conventions + Conventional Commits
+We follow the Conventional Commits specification for commit messages. This ensures a consistent commit history and enables automated versioning and changelog generation.
+
+### Branch Naming Conventions 
+```
+<type>/<short-description>
+```
+Examples: 
+- feature/{feature-name}
+- fix/{bug-description}
+- docs/{documentation-change}
+### Commit Message
+Follow this structure for commit messages
+```
+<type>(<scope>): <subject>
+```
+Where:
+```type``` has one of the following:
+- feat: New features
+- fix: Bug fixes
+- docs: Documentation changes
+- style: Code formatting only
+- refactor: Code changes without behavior change
+- test: Adding or updating tests
+- chore: Build process or tooling updates
+
+### PR process
+- Fork or branch from main
+- Create a PR with a clear description
+- Ensure checks pass (build, lint, test)
+- Request review before merging
+
 ## License
 
 MIT

frontend/README.md

@@ -48,3 +48,6 @@ Join our community of developers creating universal apps.
 
 - [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
 - [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+
+
+u gotta use WSL

frontend/app.json

@@ -23,7 +23,8 @@
     },
     "web": {
       "output": "static",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./assets/images/favicon.png",
+      "bundler": "metro"
     },
     "plugins": [
       "expo-router",

frontend/app/(tabs)/index.tsx

@@ -1,5 +1,5 @@
 import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, View, Text  } from 'react-native';
 
 import { HelloWave } from '@/components/hello-wave';
 import ParallaxScrollView from '@/components/parallax-scroll-view';
@@ -74,6 +74,11 @@ export default function HomeScreen() {
           <ThemedText type="defaultSemiBold">app-example</ThemedText>.
         </ThemedText>
       </ThemedView>
+          <View className="flex-1 items-center justify-center bg-white">
+      <Text className="text-xl font-bold text-blue-500">
+        Welcome to Nativewind!
+      </Text>
+    </View>
     </ParallaxScrollView>
   );
 }

frontend/app/_layout.tsx

@@ -5,6 +5,8 @@ import 'react-native-reanimated';
 
 import { useColorScheme } from '@/hooks/use-color-scheme';
 
+import "../global.css"
+
 export const unstable_settings = {
   anchor: '(tabs)',
 };

frontend/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};

frontend/global.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Roboto Flex';
+  /* Update the url path to point exactly to where your font file lives */
+  src: url('./assets/fonts/Roboto-Flex.ttf') format('truetype');
+  font-weight: 100 1000; /* Roboto Flex is a variable font, so you can define the weight range */
+  font-style: normal;
+  font-display: swap;
+}

frontend/metro.config.js

@@ -0,0 +1,11 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+module.exports = wrapWithReanimatedMetroConfig(withNativeWind(config, { input: './global.css' }));

frontend/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.

frontend/package.json

@@ -27,21 +27,24 @@
     "expo-symbols": "~1.0.8",
     "expo-system-ui": "~6.0.9",
     "expo-web-browser": "~15.0.10",
+    "nativewind": "^4.2.1",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-worklets": "0.5.1",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.0",
+    "react-native-reanimated": "^4.1.1",
+    "react-native-safe-area-context": "^5.4.0",
     "react-native-screens": "~4.16.0",
-    "react-native-web": "~0.21.0"
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "tailwindcss": "^3.4.19"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",
-    "typescript": "~5.9.2",
     "eslint": "^9.25.0",
-    "eslint-config-expo": "~10.0.0"
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
   },
   "private": true
 }

frontend/patches/metro-config.patch

@@ -0,0 +1,22 @@
+diff --git a/src/loadConfig.js b/src/loadConfig.js
+index 7ac9d88404063ce86d8c15a91ce72c439b455075..2db611b8bd151622faa2cb21e757934815db2775 100644
+--- a/src/loadConfig.js
++++ b/src/loadConfig.js
+@@ -15,6 +15,7 @@ var MetroCache = _interopRequireWildcard(require("metro-cache"));
+ var _os = require("os");
+ var path = _interopRequireWildcard(require("path"));
+ var _yaml = require("yaml");
++var _url = require("url");
+ function _getRequireWildcardCache(e) {
+   if ("function" != typeof WeakMap) return null;
+   var r = new WeakMap(),
+@@ -289,7 +290,8 @@ async function loadConfigFile(absolutePath) {
+       }
+     } catch (e) {
+       try {
+-        const configModule = await import(absolutePath);
++        const importPath = process.platform === 'win32' ? (0, _url.pathToFileURL)(absolutePath).href : absolutePath;
++        const configModule = await import(importPath);
+         config = await configModule.default;
+       } catch (error) {
+         let prefix = `Error loading Metro config at: ${absolutePath}\n`;

frontend/patches/nativewind.patch

@@ -0,0 +1,14 @@
+diff --git a/dist/metro/tailwind/v3/index.js b/dist/metro/tailwind/v3/index.js
+index 7e21e741ffedce14ecbe4aa0072412146bfad61e..bed4f97158390d296cba16fae10ae1cdef496c93 100644
+--- a/dist/metro/tailwind/v3/index.js
++++ b/dist/metro/tailwind/v3/index.js
+@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.tailwindCliV3 = void 0;
+ exports.tailwindConfigV3 = tailwindConfigV3;
+ const child_process_1 = require("child_process");
+-const child_file = __dirname + "/child.js";
++const path_1 = require("path");
++const child_file = path_1.join(__dirname, "child.js");
+ const getEnv = (options) => {
+     return {
+         ...process.env,

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./components/**/*.{js,jsx,ts,tsx}", "./app/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  presets: [require("nativewind/preset")],
+  plugins: [],
+}
+

frontend/tsconfig.json

@@ -12,6 +12,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
   ]
-}
+}