Skip to content

Single app Mode

Tommy Nguyen edited this page Feb 19, 2024 · 14 revisions

In single-app mode, a component is launched automatically, essentially behaving like a normal app.

The differences can be summed up in the table below:

Feature Multi-app Single-app (debug) Single-app (release)
Launch component automatically
Component picker
React dev menu
Auto-detect components

Enable Single-app Mode

To enable single-app mode, first assign a unique slug to your target component, then set singleApp to the slug. For instance, to launch the component example-app:

 {
   "$schema": "https://raw.githubusercontent.com/microsoft/react-native-test-app/trunk/schema.json",
   "name": "Example",
   "displayName": "Example",
+  "singleApp": "example-app",
   "components": [
     {
       "appKey": "Example",
       "displayName": "App",
+      "slug": "example-app"
     },
     {
       "appKey": "Example",
       "displayName": "App (modal)",
       "presentationStyle": "modal"
     }
   ],
   "resources": {
     ...
   }
 }

Save and regenerate your project (pod install on iOS/macOS or npx install-windows-test-app on Windows), then build your app.

Change Application/Bundle ID

Configure Signing Certificates

Assets/Resources

You can include additional resources by declaring them under the resources field in app.json.

For more information, see Assets.

[Experimental] Use RNTA in Single-app Mode For App Development

Warning

This feature is considered experimental.

We are still evaluating and testing this approach — use at your own risk!

In this mode, by most intents and purposes, RNTA can act as a vanilla React Native project. We have a special command, init, to mirror partially the experience provided by the RN CLI command npx react-native init. To use the command, run:

npx --package react-native-test-app@latest --legacy-peer-deps init --version 0.73

You will be greeted by an interactive CLI for some base setup, after which you can cd into the new generated project. Now you can to base setup steps like git init and npm install; and pod install on iOS/macOS or npx install-windows-test-app on Windows to generate the needed files for building.

Once that's done, you can use npm run (android|ios|macos|windows) to start the app; this command will not open/start Metro for you, so open a secondary terminal window on the project root and run npm run start from there.

You will find that App.tsx will match the standard React Native vanilla template, and from this point onward, you can keep developing your code as you would in a normal vanilla RN project.