From cf6102b5ab6e356e35b3bf2d36dd55eef8df0a55 Mon Sep 17 00:00:00 2001 From: evanbacon Date: Fri, 27 Jun 2025 10:02:58 -0500 Subject: [PATCH 1/4] wip --- with-router-rnr/README.md | 16 +++++ with-router-rnr/app.json | 11 ++++ with-router-rnr/babel.config.js | 9 +++ with-router-rnr/global.d.ts | 1 + with-router-rnr/metro.config.js | 6 ++ with-router-rnr/package.json | 61 ++++++++++++++++++ with-router-rnr/src/app/_layout.tsx | 6 ++ with-router-rnr/src/app/index.tsx | 95 +++++++++++++++++++++++++++++ with-router-rnr/src/global.css | 49 +++++++++++++++ with-router-rnr/tailwind.config.js | 68 +++++++++++++++++++++ with-router-rnr/tsconfig.json | 10 +++ 11 files changed, 332 insertions(+) create mode 100644 with-router-rnr/README.md create mode 100644 with-router-rnr/app.json create mode 100644 with-router-rnr/babel.config.js create mode 100644 with-router-rnr/global.d.ts create mode 100644 with-router-rnr/metro.config.js create mode 100644 with-router-rnr/package.json create mode 100644 with-router-rnr/src/app/_layout.tsx create mode 100644 with-router-rnr/src/app/index.tsx create mode 100644 with-router-rnr/src/global.css create mode 100644 with-router-rnr/tailwind.config.js create mode 100644 with-router-rnr/tsconfig.json diff --git a/with-router-rnr/README.md b/with-router-rnr/README.md new file mode 100644 index 00000000..d4e67e43 --- /dev/null +++ b/with-router-rnr/README.md @@ -0,0 +1,16 @@ +# Expo Router and React Native Reusables + +Use [Expo Router](https://docs.expo.dev/router/introduction/) with [React Native Reusables](https://github.com/mrzachnugent/react-native-reusables/tree/main) components. + +## 🚀 How to use + +```sh +npx create-expo-app -e with-router-rnr +``` + +## Deploy + +Deploy on all platforms with Expo Application Services (EAS). + +- Deploy the website: `npx eas-cli deploy` — [Learn more](https://docs.expo.dev/eas/hosting/get-started/) +- Deploy on iOS and Android using: `npx eas-cli build` — [Learn more](https://expo.dev/eas) diff --git a/with-router-rnr/app.json b/with-router-rnr/app.json new file mode 100644 index 00000000..55db85cb --- /dev/null +++ b/with-router-rnr/app.json @@ -0,0 +1,11 @@ +{ + "expo": { + "scheme": "acme", + "userInterfaceStyle": "automatic", + "orientation": "default", + "web": { + "output": "static" + }, + "plugins": ["expo-router"] + } +} diff --git a/with-router-rnr/babel.config.js b/with-router-rnr/babel.config.js new file mode 100644 index 00000000..f3c649bb --- /dev/null +++ b/with-router-rnr/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-rnr/global.d.ts b/with-router-rnr/global.d.ts new file mode 100644 index 00000000..a13e3136 --- /dev/null +++ b/with-router-rnr/global.d.ts @@ -0,0 +1 @@ +/// diff --git a/with-router-rnr/metro.config.js b/with-router-rnr/metro.config.js new file mode 100644 index 00000000..34bf631d --- /dev/null +++ b/with-router-rnr/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-rnr/package.json b/with-router-rnr/package.json new file mode 100644 index 00000000..5fae4093 --- /dev/null +++ b/with-router-rnr/package.json @@ -0,0 +1,61 @@ +{ + "name": "with-router-rnr", + "version": "1.0.0", + "main": "expo-router/entry", + "scripts": { + "start": "expo start", + "deploy": "npx expo export -p web && npx eas-cli@latest deploy" + }, + "dependencies": { + "@gorhom/bottom-sheet": "^5.1.4", + "@hookform/resolvers": "^3.3.4", + "@react-native-community/slider": "4.5.6", + "@react-navigation/material-top-tabs": "^7.0.0", + "@react-navigation/native": "^7.0.0", + "@rn-primitives/aspect-ratio": "~1.2.0", + "@rn-primitives/collapsible": "~1.2.0", + "@rn-primitives/label": "~1.2.0", + "@rn-primitives/portal": "~1.3.0", + "@rn-primitives/slider": "~1.2.0", + "@rn-primitives/toast": "~1.2.0", + "@rn-primitives/toolbar": "~1.2.0", + "@rnr/reusables": "^1.0.0", + "@shopify/flash-list": "1.7.6", + "@tanstack/react-table": "^8.11.7", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "expo": "^53.0.9", + "expo-font": "~13.3.1", + "expo-haptics": "~14.1.4", + "expo-linking": "~7.1.5", + "expo-navigation-bar": "~4.2.4", + "expo-router": "~5.0.7", + "expo-splash-screen": "~0.30.8", + "expo-status-bar": "~2.2.3", + "expo-system-ui": "~5.0.7", + "lucide-react-native": "^0.511.0", + "nativewind": "^4.1.23", + "react": "19.0.0", + "react-dom": "19.0.0", + "react-hook-form": "^7.49.2", + "react-native": "0.79.2", + "react-native-calendars": "^1.1302.0", + "react-native-gesture-handler": "~2.24.0", + "react-native-reanimated": "~3.17.5", + "react-native-safe-area-context": "5.4.0", + "react-native-screens": "^4.10.0", + "react-native-svg": "15.11.2", + "react-native-tab-view": "^3.5.2", + "react-native-toast-message": "^2.2.0", + "react-native-web": "~0.20.0", + "tailwind-merge": "^2.2.1", + "tailwindcss-animate": "^1.0.7", + "zod": "^3.22.4" + }, + "devDependencies": { + "@babel/core": "^7.20.0", + "@types/react": "~19.0.10", + "tailwindcss": "3.3.5", + "typescript": "~5.8.3" + } +} diff --git a/with-router-rnr/src/app/_layout.tsx b/with-router-rnr/src/app/_layout.tsx new file mode 100644 index 00000000..9b7da850 --- /dev/null +++ b/with-router-rnr/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-rnr/src/app/index.tsx b/with-router-rnr/src/app/index.tsx new file mode 100644 index 00000000..2fb20250 --- /dev/null +++ b/with-router-rnr/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 ( + +
+ +