diff --git a/boilerplate/App.tsx b/boilerplate/App.tsx
deleted file mode 100644
index e6ad5a798..000000000
--- a/boilerplate/App.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import "@expo/metro-runtime"
-import { registerRootComponent } from "expo"
-import * as SplashScreen from "expo-splash-screen"
-import App from "@/app"
-
-SplashScreen.preventAutoHideAsync()
-
-function IgniteApp() {
- return
-}
-
-// 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(IgniteApp)
diff --git a/boilerplate/app/app.tsx b/boilerplate/app/app.tsx
index e02aea23a..e43de749c 100644
--- a/boilerplate/app/app.tsx
+++ b/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
-}
-
/**
* 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) {
)
}
-
-export default App
diff --git a/boilerplate/index.tsx b/boilerplate/index.tsx
new file mode 100644
index 000000000..f7a154293
--- /dev/null
+++ b/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)
diff --git a/boilerplate/package.json b/boilerplate/package.json
index 8e33252fb..1357e6462 100644
--- a/boilerplate/package.json
+++ b/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": {
diff --git a/docs/boilerplate/App.tsx.md b/docs/boilerplate/App.tsx.md
deleted file mode 100644
index f3078a5ce..000000000
--- a/docs/boilerplate/App.tsx.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: App.tsx
-sidebar_position: 65
----
-
-# App.tsx
-
-`App.tsx` is the entry point for Expo / React Native itself. It is minimal on purpose - its only responsibility is to:
-
-- Setup the Splash Screen
-- Immediately load our app's root component
-
-Not to be confused with [app/app.tsx](./app/app.tsx.md), which is the main root component that gets rendered.
diff --git a/docs/boilerplate/Boilerplate.md b/docs/boilerplate/Boilerplate.md
index 490ef8756..daa998475 100644
--- a/docs/boilerplate/Boilerplate.md
+++ b/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
diff --git a/docs/boilerplate/app/app.tsx.md b/docs/boilerplate/app/app.tsx.md
index 64ab458ec..27d2d6673 100644
--- a/docs/boilerplate/app/app.tsx.md
+++ b/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.
diff --git a/docs/boilerplate/index.tsx.md b/docs/boilerplate/index.tsx.md
new file mode 100644
index 000000000..e7ed0124b
--- /dev/null
+++ b/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
diff --git a/src/tools/react-native.ts b/src/tools/react-native.ts
index c3f2bce03..18933d705 100644
--- a/src/tools/react-native.ts
+++ b/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"))
diff --git a/test/vanilla/ignite-new.test.ts b/test/vanilla/ignite-new.test.ts
index 34875cd84..6dc3a934c 100644
--- a/test/vanilla/ignite-new.test.ts
+++ b/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")
})