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") })