Skip to content

Commit

Permalink
router with tailwind demo
Browse files Browse the repository at this point in the history
  • Loading branch information
EvanBacon committed Dec 27, 2023
1 parent 76c0512 commit 8bc9c91
Show file tree
Hide file tree
Showing 11 changed files with 198 additions and 0 deletions.
9 changes: 9 additions & 0 deletions with-router-tailwind/README.md
Original file line number Diff line number Diff line change
@@ -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
```
17 changes: 17 additions & 0 deletions with-router-tailwind/app.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"expo": {
"scheme": "acme",
"web": {
"output": "static",
"bundler": "metro"
},
"plugins": [
[
"expo-router",
{
"origin": "https://n"
}
]
]
}
}
9 changes: 9 additions & 0 deletions with-router-tailwind/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};
1 change: 1 addition & 0 deletions with-router-tailwind/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="nativewind/types" />
6 changes: 6 additions & 0 deletions with-router-tailwind/metro.config.js
Original file line number Diff line number Diff line change
@@ -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" });
30 changes: 30 additions & 0 deletions with-router-tailwind/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
6 changes: 6 additions & 0 deletions with-router-tailwind/src/app/_layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import "../global.css";
import { Slot } from "expo-router";

export default function Layout() {
return <Slot />;
}
95 changes: 95 additions & 0 deletions with-router-tailwind/src/app/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
3 changes: 3 additions & 0 deletions with-router-tailwind/src/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
12 changes: 12 additions & 0 deletions with-router-tailwind/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -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: [],
};
10 changes: 10 additions & 0 deletions with-router-tailwind/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"extends": "expo/tsconfig.base",
"include": ["global.d.ts", "**/*.ts", "**/*.tsx"]
}

0 comments on commit 8bc9c91

Please sign in to comment.