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/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"
   ]
-}
+}