router with tailwind demo (#445)

with-router-tailwind/README.md

@@ -0,0 +1,9 @@
+# Expo Router and Tailwind CSS
+
+Use [Expo Router](https://docs.expo.dev/router/introduction/) with [Nativewind](https://www.nativewind.dev/v4/overview/) styling.
+
+## 🚀 How to use
+
+```sh
+npx create-expo-app -e with-router-tailwind
+```

with-router-tailwind/app.json

@@ -0,0 +1,17 @@
+{
+  "expo": {
+    "scheme": "acme",
+    "web": {
+      "output": "static",
+      "bundler": "metro"
+    },
+    "plugins": [
+      [
+        "expo-router",
+        {
+          "origin": "https://n"
+        }
+      ]
+    ]
+  }
+}

with-router-tailwind/babel.config.js

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

with-router-tailwind/global.d.ts

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

with-router-tailwind/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: "./src/global.css" });

with-router-tailwind/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "with-router-tailwind",
+  "version": "1.0.0",
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start"
+  },
+  "dependencies": {
+    "expo": "^50.0.0-preview.7",
+    "expo-constants": "~15.4.2",
+    "expo-linking": "~6.2.1",
+    "expo-router": "~3.4.1",
+    "expo-splash-screen": "~0.26.1",
+    "expo-status-bar": "~1.11.1",
+    "nativewind": "^4.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.73.1",
+    "react-native-reanimated": "~3.6.0",
+    "react-native-safe-area-context": "4.7.4",
+    "react-native-screens": "~3.27.0",
+    "react-native-web": "~0.19.6",
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.3.0"
+  }
+}

with-router-tailwind/src/app/_layout.tsx

@@ -0,0 +1,6 @@
+import "../global.css";
+import { Slot } from "expo-router";
+
+export default function Layout() {
+  return <Slot />;
+}

with-router-tailwind/src/app/index.tsx

@@ -0,0 +1,95 @@
+import { Link } from "expo-router";
+import React from "react";
+import { Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function Page() {
+  return (
+    <View className="flex flex-1">
+      <Header />
+      <Content />
+      <Footer />
+    </View>
+  );
+}
+
+function Content() {
+  return (
+    <View className="flex-1">
+      <View className="py-12 md:py-24 lg:py-32 xl:py-48">
+        <View className="container px-4 md:px-6">
+          <View className="flex flex-col items-center gap-4 text-center">
+            <Text
+              role="heading"
+              className="text-3xl text-center native:text-5xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl"
+            >
+              Welcome to Project ACME
+            </Text>
+            <Text className="mx-auto max-w-[700px] text-lg text-center text-gray-500 md:text-xl dark:text-gray-400">
+              Discover and collaborate on amce. Explore our services now.
+            </Text>
+
+            <View className="gap-4">
+              <Link
+                suppressHighlighting
+                className="flex h-9 items-center justify-center overflow-hidden rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 active:bg-gray-400/90 web:focus-visible:outline-none web:focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
+                href="#"
+              >
+                Explore
+              </Link>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function Header() {
+  const { top } = useSafeAreaInsets();
+  return (
+    <View style={{ paddingTop: top }}>
+      <View className="px-4 lg:px-6 h-14 flex items-center flex-row justify-between ">
+        <Link className="font-bold flex-1 items-center justify-center" href="#">
+          ACME
+        </Link>
+        <View className="flex flex-row gap-4 sm:gap-6">
+          <Link
+            className="text-md font-medium hover:underline web:underline-offset-4"
+            href="#"
+          >
+            About
+          </Link>
+          <Link
+            className="text-md font-medium hover:underline web:underline-offset-4"
+            href="#"
+          >
+            Product
+          </Link>
+          <Link
+            className="text-md font-medium hover:underline web:underline-offset-4"
+            href="#"
+          >
+            Pricing
+          </Link>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function Footer() {
+  const { bottom } = useSafeAreaInsets();
+  return (
+    <View
+      className="flex shrink-0 bg-gray-100 native:hidden"
+      style={{ paddingBottom: bottom }}
+    >
+      <View className="py-6 flex-1 items-start px-4 md:px-6 ">
+        <Text className={"text-center text-gray-700"}>
+          © {new Date().getFullYear()} Me
+        </Text>
+      </View>
+    </View>
+  );
+}

with-router-tailwind/src/global.css

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

with-router-tailwind/tailwind.config.js

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

with-router-tailwind/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "extends": "expo/tsconfig.base",
+  "include": ["global.d.ts", "**/*.ts", "**/*.tsx"]
+}