fix(boilerplate): App.tsx -> index.tsx (#2882 by @frankcalise)

* fix(boilerplate): App.tsx -> index.tsx

* fix(boilerplate): run scripts update

* test: update test for entry point rework

* test: fix package json script expectation

boilerplate/app/app.tsx

@@ -23,6 +23,7 @@ import { useFonts } from "expo-font"
 import { useEffect, useState } from "react"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
+import * as SplashScreen from "expo-splash-screen"
 import { useInitialRootStore } from "./models" // @mst remove-current-line
 import { AppNavigator, useNavigationPersistence } from "./navigators"
 import { ErrorBoundary } from "./screens/ErrorScreen/ErrorBoundary"
@@ -55,17 +56,12 @@ const config = {
   },
 }
 
-interface AppProps {
-  hideSplashScreen: () => Promise<void>
-}
-
 /**
  * This is the root component of our app.
  * @param {AppProps} props - The props for the `App` component.
  * @returns {JSX.Element} The rendered `App` component.
  */
-function App(props: AppProps) {
-  const { hideSplashScreen } = props
+export function App() {
   const {
     initialNavigationState,
     onNavigationStateChange,
@@ -88,9 +84,7 @@ function App(props: AppProps) {
 
     // If your initialization scripts run very fast, it's good to show the splash screen for just a bit longer to prevent flicker.
     // Slightly delaying splash screen hiding for better UX; can be customized or removed as needed,
-    // Note: (vanilla Android) The splash-screen will not appear if you launch your app via the terminal or Android Studio. Kill the app and launch it normally by tapping on the launcher icon. https://stackoverflow.com/a/69831106
-    // Note: (vanilla iOS) You might notice the splash-screen logo change size. This happens in debug/development mode. Try building the app for release.
-    setTimeout(hideSplashScreen, 500)
+    setTimeout(SplashScreen.hideAsync, 500)
 
     // @mst replace-next-line }, [])
   })
@@ -130,5 +124,3 @@ function App(props: AppProps) {
     </SafeAreaProvider>
   )
 }
-
-export default App

boilerplate/index.tsx

@@ -0,0 +1,9 @@
+import "@expo/metro-runtime" // this is for fast refresh on web w/o expo-router
+import { registerRootComponent } from "expo"
+
+import { App } from "@/app"
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App)

boilerplate/package.json

@@ -2,7 +2,7 @@
   "name": "hello-world",
   "version": "0.0.1",
   "private": true,
-  "main": "App.tsx",
+  "main": "index.tsx",
   "scripts": {
     "compile": "tsc --noEmit -p . --pretty",
     "lint": "eslint . --fix",
@@ -19,12 +19,12 @@
     "build:android:sim": "eas build --profile development --platform android --local",
     "build:android:dev": "eas build --profile development:device --platform android --local",
     "build:android:prod": "eas build --profile production --platform android --local",
-    "start": "npx expo start",
-    "android": "npx expo run:android",
-    "ios": "npx expo run:ios",
-    "web": "npx expo start --web",
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
     "bundle:web": "npx expo export --platform web",
-    "serve:web": "npx server dist",
+    "serve:web": "npx serve dist",
     "prebuild:clean": "npx expo prebuild --clean"
   },
   "dependencies": {

docs/boilerplate/Boilerplate.md

@@ -45,7 +45,7 @@ your-project
 │   ├── test-tsconfig.json
 ├── app.config.ts
 ├── app.json
-├── App.tsx
+├── index.tsx
 ├── eas.json
 ├── package.json
 └── README.md
@@ -123,6 +123,6 @@ The main entry point for your app!
 
 **[app.json/app.config.ts](./app.json.md)** - configuration files for your app. `app.json` contains the static configuration which will be fed into the dynamic configuration in `app.config.ts`, where Expo builds it's final configuration for the app.
 
-**[App.tsx](./App.tsx.md)** - entry point to your app. This is where you will find the main App component which renders the rest of the application.
+**[index.tsx](./index.tsx.md)** - entry point to your app. This is where you will find the main App component which renders the rest of the application.
 
 **[eas.json](./eas.json.md)** - build configurations for Expo EAS builds

docs/boilerplate/app/app.tsx.md

@@ -3,7 +3,7 @@
 The `app/app.tsx` file is the main entry point for your app.
 
 :::tip
-Don't confuse this `app/app.tsx` file with the `App.tsx` component in the root of your project -- that's the entry point for Expo/React Native itself and just immediately loads this one after setting up the splash screen.
+Don't confuse this `app/app.tsx` file with the `index.tsx` component in the root of your project -- that's the entry point for Expo/React Native itself and just immediately loads this one after setting up the splash screen.
 :::
 
 Most of this file is boilerplate and you shouldn't need to modify it very often. But take some time to look through and understand what is going on.

docs/boilerplate/index.tsx.md

@@ -0,0 +1,11 @@
+---
+title: index.tsx
+sidebar_position: 65
+---
+
+# index.tsx
+
+`index.tsx` is the entry point for Expo / React Native itself. It is minimal on purpose - its only responsibility is to:
+
+- Register the root component with the `AppRegistry`
+- Sets up the environment properly for the native build

src/tools/react-native.ts

@@ -337,7 +337,7 @@ export function cleanupExpoRouterConversion(toolbox: GluegunToolbox, targetPath:
     workingDir.path("src", "screens", "ErrorScreen"),
     workingDir.path("src", "components", "ErrorBoundary"),
   )
-  workingDir.remove("App.tsx")
+  workingDir.remove("index.tsx")
   workingDir.remove(workingDir.path("ignite", "templates", "screen", "NAMEScreen.tsx.ejs"))
   workingDir.remove(workingDir.path("ignite", "templates", "navigator"))
   workingDir.remove(workingDir.path("src", "screens"))

test/vanilla/ignite-new.test.ts

@@ -88,13 +88,13 @@ describe("ignite new", () => {
       const igniteJSON = filesystem.read(`${appPath}/package.json`, "json")
       expect(igniteJSON).toHaveProperty("scripts")
       expect(igniteJSON).toHaveProperty("dependencies")
-      expect(igniteJSON.scripts.android).toBe("npx expo run:android")
-      expect(igniteJSON.scripts.ios).toBe("npx expo run:ios")
+      expect(igniteJSON.scripts.android).toBe("expo run:android")
+      expect(igniteJSON.scripts.ios).toBe("expo run:ios")
     })
 
-    it("should have created app.tsx with default export and RootStore", () => {
+    it("should have created app.tsx with export and RootStore", () => {
       const appJS = filesystem.read(`${appPath}/app/app.tsx`)
-      expect(appJS).toContain("export default App")
+      expect(appJS).toContain("export function App")
       expect(appJS).toContain("RootStore")
     })