feat: add File based router support with Expo Router

Author: ixartz

App.tsx

@@ -0,0 +1 @@
+import 'expo-router/entry';

Main.tsx

@@ -14,6 +14,7 @@ Developer experience first:
 - ⚛️ [React Native](https://reactnative.dev) for building native apps using React
 - 🔥 Type checking [TypeScript](https://www.typescriptlang.org)
 - 💎 Integrate with [NativeWind](https://www.nativewind.dev), Tailwind CSS for React Native
+- 📁 File-based routing with Expo Router
 - 📏 Linter with [ESLint](https://eslint.org)
 - 💖 Code Formatter with [Prettier](https://prettier.io)
 - 🦊 Husky for Git Hooks

README.md

@@ -6,6 +6,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+    "scheme": "myapp",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -24,7 +25,8 @@
       "package": "com.anonymous.reactnativeboilerplate"
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
     },
     "plugins": ["@config-plugins/detox"]
   }

app.json

@@ -0,0 +1,5 @@
+import { Stack } from 'expo-router';
+
+export default function Layout() {
+  return <Stack />;
+}

app/_layout.tsx

@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+
+import { Welcome } from '@/templates/Welcome';
+
+const Home = () => (
+  <>
+    <Stack.Screen
+      options={{
+        title: 'My home',
+      }}
+    />
+    <Welcome />
+  </>
+);
+
+export default Home;

app/index.tsx

@@ -13,6 +13,7 @@ module.exports = (api) => {
           },
         },
       ],
+      require.resolve('expo-router/babel'),
     ],
   };
 };

babel.config.js

@@ -1,13 +1,14 @@
 {
   "name": "react-native-boilerplate",
   "version": "1.0.0",
+  "main": "Main.tsx",
   "scripts": {
     "start": "expo start --dev-client",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
     "dev:android": "expo start --android",
     "dev:ios": "expo start --ios",
     "web": "expo start --web",
+    "build:android": "expo run:android",
+    "build:ios": "expo run:ios",
     "clean": "rimraf .expo android coverage ios index.js",
     "lint": "eslint .",
     "format": "eslint --fix . && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore",
@@ -23,27 +24,33 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "expo": "~48.0.11",
-    "expo-splash-screen": "~0.18.1",
+    "expo": "~48.0.16",
+    "expo-constants": "^14.2.1",
+    "expo-linking": "^4.0.1",
+    "expo-router": "^1.5.3",
+    "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.4",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
-    "react-native": "0.71.6"
+    "react-native": "0.71.7",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "^3.20.0",
+    "react-native-web": "~0.18.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
+    "@babel/core": "^7.21.8",
     "@config-plugins/detox": "^5.0.1",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.0.1",
+    "@testing-library/react-native": "^12.1.2",
     "@types/detox": "^18.1.0",
     "@types/jest": "^29.5.1",
-    "@types/react": "^18.0.38",
+    "@types/react": "~18.0.27",
     "@types/react-native": "^0.71.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "detox": "^20.7.0",
-    "eas-cli": "^3.10.0",
-    "eslint": "^8.39.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "detox": "^20.8.0",
+    "eas-cli": "^3.12.0",
+    "eslint": "^8.40.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
@@ -61,11 +68,11 @@
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "jest-expo": "^48.0.2",
-    "lint-staged": "^13.2.1",
+    "lint-staged": "^13.2.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.0",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.9.5"
   }
 }

package-lock.json

@@ -1,13 +1,13 @@
 import { render, screen } from '@testing-library/react-native';
 
-import { Main } from './Main';
+import { Welcome } from './Welcome';
 
 describe('App component', () => {
   describe('Render method', () => {
     it('should render the default text', () => {
-      render(<Main />);
+      render(<Welcome />);
 
-      const text = screen.queryByText(/Open up App.js/);
+      const text = screen.queryByText(/Open up App\//);
       expect(text).toBeVisible();
     });
   });

package.json

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+const Welcome = () => (
+  <View className="flex-1 items-center justify-center">
+    <Text>Open up App/ to start working on your app!</Text>
+  </View>
+);
+
+export { Welcome };