microsoft/react-native-test-app

react-native-test-app provides an app for all supported platforms as a package

React Native Test App

React Native Test App (RNTA) provides test apps for all platforms as a package. It handles the native bits for you so you can focus on what's important: your product.

• Quick Start ⚡
• Migrate an Existing Test App 📖
• Configuring the Test App 📖
• Upgrading the Test App 📖
• Learn More 🔍
• Libraries Using RNTA 📚
• Known Issues ⚠️
• Contributing 🤝
• License 📝

Quick Start ⚡

If you want to migrate an existing test app for a library, follow the dedicated guide in the wiki.

You can generate a new project using npx:

npx --package react-native-test-app@latest init

In this example, we will create a project named "sample" in sample with apps for all platforms:

✔ What is the name of your test app? … sample
? Which platforms do you need test apps for? ›
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
◉   Android
◉   iOS
◉   macOS
◉   Windows
✔ Where should we create the new project?? … sample

Install npm dependencies inside the new project folder:

Yarn:

cd sample
yarn

npm:

cd sample
npm install

Once the dependencies are installed, follow the platform specific instructions in the wiki.

Learn More 🔍

• 🗣️ If you want to learn how RNTA is used at Microsoft, check out the following talks:
  • "Improve all the repos – exploring Microsoft’s DevExp" by @kelset and @tido64 from React Native Europe 2021.
  • "Our Journey of Making React Native a Preferred Choice" by @kelset and @tido64 from React Native Europe 2023.
• 📖 In the wiki, you can read more about the motivation and the design of this tool.

Libraries Using RNTA 📚

microsoft/fluentui-react-native • microsoft/rnx-kit • react-native-add-calendar-event • react-native-apple-authentication • react-native-async-storage • react-native-blur • react-native-clipboard • react-native-datetimepicker • react-native-google-signin • react-native-image-editor • react-native-masked-view • react-native-menu • react-native-netinfo • react-native-segmented-control • react-native-webview • realm/realm-js • shopify/restyle • sparkfabrik-react-native-idfa-aaid • and many more…

Are you using RNTA? Submit a PR to add it to the list!

Known Issues ⚠️

For a list of known issues and workarounds, please refer to the Troubleshooting wiki.

Contributing 🤝

Thank you for your interest in this project! We welcome all contributions and suggestions!

Take a look at CONTRIBUTING.md for details.

License 📝

react-native-test-app is MIT licensed.

react-native-test-app's Issues

Windows: Allow user specified output directory for generated solution

test-app.js currently always outputs to ./windows/ReactTestApp.sln. We should allow it to be customizable, e.g. by specifying --project-directory=windows/.

Move platform specific files in `example` to `example/{android,ios}`

See #24 (review)

Support app.json resources on Android

#24

Unable to resolve module `./App` with newly generated project

App.js is missing from the template.

It would also be nice if we can provide build scripts in package.json.

Give Android files a proper namespace

The Android files currently live under com.sample. Let's move it into a proper space, e.g. com.react.testapp.

Windows: Add support for react-native-windows 0.63

Auto-linking is enabled in this release. We should make sure that it works.

Add macOS target to Plop template

Requires #87

• Add template macOS targets to CI

Ensure compat of `test-app.gradle` with windows

Check whether hardcoded path delimiters in gradle scripts are compatible with windows. Otherwise use File.separator.

Windows: Allow user specified test project

test-app.js is currently hard-coded to look for ReactTestAppTests.vcxproj. This should be user specified. Alternatively, we can also add any .vcxproj found in a specified folder.

If complex `initialProperties` is set in `app.json` app fails to boot properly

The Manifest.swift offers the ability to set an initialProperties in the app.json and the intention is that the dictionary is passed to the initialProperties argument of the ReactRootView. However, only initialProperties that contain simple String:String pairs work. But if initialProperties contains sub objects it fails to boot. The issue has been fixed on iOS / Mac #144

Use parts of ReactActivity in ComponentActivity to support different use cases

At the moment, ComponentActivity extends ReactActivity, that makes strong assumptions on default behaviour. For example, ReactActivity intercepts all calls to onBackPressed that breaks the backstack behavior when using fragments. onActivityResult events are also not propagated to Fragments as expected, because ReactActivity intercepts and routes them to the react-native instance.

The solution is to borrow some parts of ReactActivity and incorporate them into ComponentActivity.

Set up CI to build with all supported versions of React Native

We need to make sure that all incoming changes are compatible with all currently supported React Native versions.

Pipeline Proposal

1. Check whether there has been any changes the last week.
   a. If there's been no changes, we end here. There is nothing to do.
   b. Otherwise, we continue with step 2.
2. Build against a reduced set of jobs (otherwise we will be spinning up 20+ jobs per version)
   a. Suggest to build only main jobs, i.e. Android, iOS, macOS, Windows, all debug, single architecture, no templates
   b. Even with reduced number of jobs, we're looking at 4 * N jobs where N is number of versions supported. Currently, this means 52 jobs.
   c. 52 jobs is a bit much to run on every PR, so we will do weekly builds instead.

Populate components list from AppRegistry if app.json is empty/missing

If the list of components in the manifest (app.json) is empty or missing, we should be able to retrieve the list of registered components from AppRegistry.

Remaining work:

• Android (#1127)
• iOS (#482)
• macOS (#482)
• Windows (#482)

Add support for React Native 0.62

RN for macOS isn't on 0.62 yet but we can make sure Android and iOS are ready for it.

Test app should prefer loading from the dev server

The Android test app always loads the embedded bundle if it exists.

Implement Windows test app

Acceptance Criteria

• Create skeleton app with React menu (#136)
  • Load From Embedded JS Bundle
  • Load From Dev Server
• Implement loading of the manifest (#142)
  • Populate the React menu with components from the manifest
• Initialize React Native bridge on app startup (#166)
  • Hook up Load From Embedded JS Bundle
  • Hook up Load From Dev Server
  • Implement launching a React component from the React menu
• Figure out how to consume the test app via npm (#192)
  • ¯\(ツ)/¯
• Add Windows target to CI (#202)
• Add quick start instructions to README

Stretch Goals

• Add unit tests (#202)
• Move React menu to the title bar and center the app title, similar to how Visual Studio looks (#178)

  Visual Studio
  Visual Studio Code

• Add option to open the debug menu in React menu (#194):
  
• Add keyboard accelerators to items in React menu (#194):
  
• Make sure autolinking works (depends on microsoft/react-native-windows#2853)

Non-Goals

• ARM (just making sure it builds is enough)

Consolidate fixtures for manifest tests on all platforms

At the moment, iOS and Android have nearly identical test fixtures. They can be extracted into json files and re-used across platforms instead of being duplicated.

CI builds fail randomly with `ESOCKETTIMEDOUT`

CI builds fail randomly with the following:

info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz: ESOCKETTIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "/Users/runner/runners/2.263.0/work/react-native-test-app/react-native-test-app/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Add support for non-iOS platforms in `test_app.rb`

use_test_app! currently assumes target platform is iOS. Allow specifying different targets.

Add overflow menu to component Activity

Currently, the overflow menu from the home screen disappears when navigating to a component. To access the overflow menu, one would have to navigate back first. For scenarios where there are only one component, and the test app navigate immediately to it, it may be confusing for users as it's not obvious whether it's been navigated to or replaced.

Overflow menu (closed)	Overflow menu (open)	Component activity (without overflow menu)

Add support for React Native for macOS

https://github.com/microsoft/react-native

Blocked by:

• Make macOS apps work using CocoaPods
• Make modern autolinking work for macOS (implemented in Enable auto-linking of native modules)
• Improve Metro support for out-of-tree platforms

Tasks:

• Add support for non-iOS platforms in test_app.rb (#86)
• Implement the test app itself (#87)
• Add macOS target to Plop template (#88)
• Update the wiki and document platform specifics

Add support for building React Native from source

In addition to supporting published npm packages, it should also be possible to use React Native source as described in Building from source.

Overriding the package name when auto-linking on Android

Upstream the change to the auto-linking plugin to specify a package name in parameters. This way we can force the plugin to generate code for a module other than the one that react-native config was executed for. An alternative solution is to derive the packageName from the project that the plugin gets applied to.

Support for native controllers on Android

#24

`pod install` fails when `--repo-update` is also specified

pod install works fine. Install only fails with --repo-update.

Repro Steps

From latest master (c2a4ce1), run:

cd example
yarn
pod install --project-directory=ios --repo-update

Expected: Successful install
Actual: Install fails with the following message:

[!] No podspec found for `ReactTestApp-Resources` in `..`

Workaround

Remove the following line:

react-native-test-app/ios/test_app.rb

Line 122 in c2a4ce1

at_exit { File.delete(podspec_path) if File.exist?(podspec_path) }

Add support for macOS Big Sur

macOS Big Sur was announced at WWDC 2020. We should make sure our macOS test app is compatible with it, and that we can compile Universal 2 binaries.

Android build artifacts pollute package installation folder

Android build artifacts are currently output under node_modules/react-native-test-app/android. In a monorepo, multiple packages can share the same installation if it was hoisted, e.g.:

my-monorepo
├── node_modules
│   └── react-native-test-app
│       └── android  # Used by both packages
├── package.json
└── packages
    ├── my-awesome-component-android
    │   ├── build.gradle
    │   ├── package.json
    │   ├── settings.gradle
    │   └── src
    └── my-second-awesome-component-android
        ├── build.gradle
        ├── package.json
        ├── settings.gradle
        └── src

In this example, my-monorepo/node_modules/react-native-test-app/android may contain build artifacts from both my-awesome-component-android and my-second-awesome-component-android.

Enable Flipper by default when on RN 0.62+

Flipper is disabled by default today to keep backwards compatibility with 0.60. We should try to detect whether the user is on 0.62 and enable it by default.

• Detect whether we're on RN 0.62 or greater and enable Flipper by default
• Update documentation on how to opt out of Flipper

Add a property to the manifest to designate a component to launch on app startup

When the app manifest only contains a single component, the test app will try to launch it on startup. There is currently no way to launch an arbitrary component on startup when there are more than one.

Write documentation

The documentation should at minimum include:

• How to get started with:
  • Android on Windows/macOS (e.g. Android Studio, SDK version, etc.)
  • iOS (e.g. Xcode version, CLI tools, etc.)
• What assumptions were made for each platform (e.g. directory structure,)
• Description of the extra fields in the app manifest (app.json)

Investigate whether we can remove `TestAppReactNativeHost.currentActivity`

See comment in #64 (comment).

Android: Wrong version of Hermes is bundled

The wrong version of Hermes can be bundled in the APK if multiple versions are installed and the wrong version is being hoisted. To repro this, bump react-native to 0.62 and keep react-native-macos at 0.61 in the Example app. The hoisted hermes version is ^0.2.1. This causes a crash at runtime when the app tries to load non-existing symbols in the Hermes .so.

We should use node_modules/react-native/node_modules/ as starting point when looking for Hermes. If the wrong version is hoisted, it right one should be installed here.

If that's not possible, we should at least be able to detect that we will pick up the wrong version, and warn the user.

Generate resources podspec or inject them directly into Xcode project

We're currently adding resources to the Xcode project by manually writing a .podspec:

react-native-test-app/example/Example-dev.podspec

Line 19 in 03b6479

s.resources = ['dist/assets', 'dist/main.jsbundle']

It should be possible to generate this file, or alternatively, inject them directly into the project from the manifest, e.g.:

{
  "name": "Example",
  "displayName": "Example",
  "components": {},
  "resources": [
    "dist/assets",
    "dist/main.jsbundle"
  ]
}

CI builds fail randomly with `assertion failed` in Node

CI builds fail randomly with the following:

yarn run v1.22.4
$ mkdirp dist/res && react-native bundle --entry-file index.js --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist/res --reset-cache
warning: the transform cache was reset.
Loading dependency graph, done.
info Writing bundle output to:, dist/main.android.jsbundle
info Done writing bundle output
info Copying 2 asset files
info Done copying assets
Assertion failed: (!uv__is_closing(handle)), function uv_close, file ../deps/uv/src/unix/core.c, line 117.
/bin/sh: line 1:  2547 Abort trap: 6           react-native bundle --entry-file index.js --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist/res --reset-cache
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
##[error]Process completed with exit code 134.

Document how to migrate an existing app

We're currently missing a guide for migrate an existing app to react-native-test-app in the wiki.

Use manifest parser from @microsoft/continuity

Hi Tommy,

I've got code you can use for dealing with manifests. It's a new project, and I started with Windows first, but I have every intention of making it work for Apple and Android platforms, too.

Look at the public headers to see the manifest schema. It's based on some already-outdated ideas. In issues 4, 5 and 6, I've got notes on how it will change.

Our projects are likely to converge when the Apple platforms come online. Maybe you're available to get them running? :) If not, let's make sure we're staying in sync on schema (which still needs to be formally documented).

Originally posted by @afoxman in #9 (comment)

Add Windows target to Plop template

Requires #89

• Add template Windows targets to CI

For posterity, this is Plop: https://plopjs.com/documentation/

Add ability to change app bundle ID

The current app bundle ID is com.react.testapp for Android, and com.microsoft.ReactTestApp for iOS and macOS. This is an issue if users want to implement auth (see #139 (comment)), or want to publish to the App Store. Users need a way to change the bundle ID.

Revisit support for multiline messages in problem matchers

Due to a limitation in the format of problem matchers, it's currently not possible to extract multiline messages. For input such as:

TestTestApp#test_resources_pod_returns_spec_path [test/test_test_app.rb:31]:
Expected: ".."
  Actual: "."

"Expected: …" and "Actual: …" are two separate errors with this matcher. We are currently not able to match output such as:

TestTestApp#test_resources_pod_writes_podspec [test/test_test_app.rb:50]:
--- expected
+++ actual
@@ -1 +1 @@
-["dist/assetd", "dist/main.jsbundle"]
+["dist/assets", "dist/main.jsbundle"]

This issue has been reported in actions/toolkit#193 and actions/toolkit#319.

Originally posted by @tido64 in #61

Add React compatibility layer

There's a breaking change between 0.61 and 0.62. In order to support both (and future breaking changes), we need a way to conditionally compile a subset of code under the right conditions, i.e.

#if REACT_NATIVE_VERSION < 6200
  // Compile < 0.61 code here
#else
  // Compile >= 0.62 code here
#endif

Move actions for loading bundles from multiple sources under the RN dev menu

Move actions for loading bundles from the component list on iOS and the context menu on (Android) to the dev menu where react-native options are.

If complex `initialProperties` is set in `app.json` app fails to boot properly

The Manifest.swift offers the ability to set an initialProperties in the app.json and the intention is that the dictionary is passed to the initialProperties argument of the RCTRootView or RCTBridge. However, only initialProperties that contain simple String:String pairs work. But if initialProperties contains sub objects it fails to boot.

Changing the Swift type from [String: String]? to [AnyHashable: Any]? would be ideal, but that makes the object fail to conform to Codeable.

Excessive reloads when switching component

Both setting the component name and initial props trigger a reload. This means that for the following block, we are calling ReloadView() twice, throwing away the work of the first call.

    ReactRootView().ComponentName(name);
    ReactRootView().InitialProps(initialProps);

ReloadView() checks whether a component name is set before doing anything, so unsetting the component name, doing all the set up needed, then setting the component name as the final step should fix this issue:

    ReactRootView().ComponentName({});
    ReactRootView().InitialProps(initialProps);
    ReactRootView().ComponentName(name);

However, this crashes the app. The issue has been filed upstream: microsoft/react-native-windows#5676.

Implement macOS test app

Save for the QR code reader, we can reuse a lot of iOS code for initializing React Native and loading the manifest.

Acceptance Criteria:

• Reuse iOS code for initializing React Native
• Reuse iOS code for loading the manifest
• Add macOS target to CI
• Add quick start instructions to README

macOS: Migrate to SwiftUI and deprecate `Main.storyboard`

It seems like a better idea to either hookup the window from the nib/storyboard to the AppDelegate; or, if the nib/storyboard doesn’t do anything of interest, just remove the window from there and create it programmatically instead.

Originally posted by @alloy in #104

Add support for enabling Flipper

Give users a way to enable Flipper when on React Native 0.62

Split out Xcode build configuration to separate files

Xcode build configuration files allow users to manage build configurations outside of Xcode. There is currently no obvious way to include them in react-native-test-app.

Example project with .xcconfig files: https://github.com/microsoft/fluentui-react-native/tree/master/apps/ios/src

cc @alloy

Add support for React Native for Windows

https://microsoft.github.io/react-native-windows/

Blocked by:

• Improve Metro support for out-of-tree platforms

Tasks:

• Implement Windows test app (#89)
• Add Windows target to Plop template (#90)
• Update the wiki and document platform specifics

Feature request: ability to hook `RCTRootView` and/or `RCTBridge` initialization.

It would be useful for consumers to be able to hook into the creation of the RCTRootView and/or RCTBridge objects with custom code. For example, if the consumer wanted to run some custom code to build an initialProperties NSDictionary to pass to the RCTRootView or RCTBridge init. Or if some customization needed to be done to the RCTRootView such as changing properties on the view.

Android: options to load the bundle either from the dev server or assets

The iOS test-app has two UI options to choose the bundle source. Android should have support for the same feature.