added tailwind

app.json

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

app/Hello_World.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from 'react-native';
+
+// const styles = StyleSheet.create({
+//   container: {
+//     alignItems: 'center',
+//   },
+//   text: {
+//     fontSize: 40
+//   }
+// })
+
+type HelloWorldProps = {
+  text: string;
+  aNumber: number;
+}
+
+const HelloWorld = (props: HelloWorldProps) => {
+  return (
+    <View className='flex-1 items-center justify-center'>
+      <Text>{props.text} : {props.aNumber}</Text>
+    </View>
+  )
+}
+
+const Counter = () => {
+  const [count, setCount] = useState<number>(0);
+
+  return (
+    <View>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title={`You tabbed me ${count} times`}/>
+    </View>
+  )
+}
+
+const ManyHelloes = () => {
+  return (
+    <View>
+      <HelloWorld text="first number" aNumber={1}/>
+      <HelloWorld text="second number" aNumber={2}/>
+      <HelloWorld text="third number" aNumber={3}/>
+      <Counter/>
+    </View>
+  )
+}
+
+export default ManyHelloes;

app/_layout.tsx

@@ -1,4 +1,5 @@
 import { Stack } from "expo-router";
+import "../global.css";
 
 export default function RootLayout() {
   return <Stack />;

app/index.tsx

@@ -1,15 +1,8 @@
-import { Text, View } from "react-native";
+import React from "react";
+import ManyHelloes from "./Hello_World";
 
 export default function Index() {
   return (
-    <View
+    <ManyHelloes/>
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
-    </View>
   );
 }

babel.config.js

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

global.css

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

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require('nativewind/metro');
+ 
+const config = getDefaultConfig(__dirname)
+ 
+module.exports = withNativeWind(config, { input: './global.css' })

nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package.json

@@ -27,21 +27,24 @@
     "expo-symbols": "~1.0.7",
     "expo-system-ui": "~6.0.8",
     "expo-web-browser": "~15.0.9",
+    "nativewind": "^4.2.1",
     "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": "~3.17.4",
-    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "5.4.0",
-    "react-native-safe-area-context": "~5.6.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"
   },
   "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",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.2"
   },
   "private": true
 }

tailwind.config.js

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

tsconfig.json

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