Skip to content

Single app Mode

Jump to bottom
Tommy Nguyen edited this page Jan 18, 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

(experimental) use RNTA in Single App Mode for app development

(we are still evaluating and testing this approach - use at your own risk)

In this mode, by most intent and purposes, RNTA can act as a vanilla react-native project; we have setup a special command, init, to mirror partially the experience provided by the RN CLI command npx react-native init. To use the command, write in your CLI:

npx --package react-native-test-app --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/js 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.

Clone this wiki locally