diff --git a/with-router-tailwind/README.md b/with-router-tailwind/README.md new file mode 100644 index 00000000..ca707dfd --- /dev/null +++ b/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 +``` diff --git a/with-router-tailwind/app.json b/with-router-tailwind/app.json new file mode 100644 index 00000000..d8fb7e4c --- /dev/null +++ b/with-router-tailwind/app.json @@ -0,0 +1,17 @@ +{ + "expo": { + "scheme": "acme", + "web": { + "output": "static", + "bundler": "metro" + }, + "plugins": [ + [ + "expo-router", + { + "origin": "https://n" + } + ] + ] + } +} diff --git a/with-router-tailwind/babel.config.js b/with-router-tailwind/babel.config.js new file mode 100644 index 00000000..f3c649bb --- /dev/null +++ b/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", + ], + }; +}; diff --git a/with-router-tailwind/global.d.ts b/with-router-tailwind/global.d.ts new file mode 100644 index 00000000..a13e3136 --- /dev/null +++ b/with-router-tailwind/global.d.ts @@ -0,0 +1 @@ +/// diff --git a/with-router-tailwind/metro.config.js b/with-router-tailwind/metro.config.js new file mode 100644 index 00000000..34bf631d --- /dev/null +++ b/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" }); diff --git a/with-router-tailwind/package.json b/with-router-tailwind/package.json new file mode 100644 index 00000000..8e840ceb --- /dev/null +++ b/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" + } +} diff --git a/with-router-tailwind/src/app/_layout.tsx b/with-router-tailwind/src/app/_layout.tsx new file mode 100644 index 00000000..9b7da850 --- /dev/null +++ b/with-router-tailwind/src/app/_layout.tsx @@ -0,0 +1,6 @@ +import "../global.css"; +import { Slot } from "expo-router"; + +export default function Layout() { + return ; +} diff --git a/with-router-tailwind/src/app/index.tsx b/with-router-tailwind/src/app/index.tsx new file mode 100644 index 00000000..fb67382d --- /dev/null +++ b/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 ( + +
+ +