[!NOTE]
For quick start instructions, please see Quick Start.
If you're looking to contribute directly to React Native Test App, have a look at our contribution guide.
Motivation
Many of us have been there. We create a new React Native project with react-native init, write a few test screens for our library, and everything is seemingly fine and dandy. Until some time later, when a new version of React Native gets published. "Awesome!", you think, but when you try to upgrade to the latest version, something doesn't work. You need to look at React Native Upgrade Helper and comb through all the files that need to be changed. Eventually, you get it working and everything is fine again. Then a new version of Xcode or iOS comes out, or a new version of Gradle is required, and things stop working again. If you're lucky, you get to do this N number of times for all the projects you maintain.
react-native-test-app aims to take away a lot of these pains.
- We want to make it easy to get started.
react-native-test-appshould provide everything needed to get a cross-platform project set up and running in no time. - We want to make it easy to upgrade and downgrade React Native without having to deal with project files for every supported platform. Just change the version numbers in
package.json, and reinstall the dependencies.- So you can quickly switch between versions of React Native to test compatibility or reproduce difficult bugs.
- So your next React Native upgrade is a lot more painless. Especially if you have to repeat the same process in a lot of projects.
- We want to make it easy to add support for and maintain additional platforms, such as macOS or Windows, without requiring the domain knowledge to do so.
- We want to give you a consistent developer experience across all the projects you maintain.
You can find the full design document in the sidebar.
React Native Versions
Unless specified otherwise, react-native-test-app supports the following targets and versions:
| Version | Android | iOS | macOS | visionOS | Windows | Web |
|---|---|---|---|---|---|---|
| nightly | >=0.1.15 | >=0.1.15 | >=0.1.15 | >=0.5.11 | ||
| 0.76 | >=3.10.16 | >=3.10.16 | >=3.10.20 | >=3.10.16 | >=3.10.16 | |
| 0.75 | >=3.8.15 | >=3.8.15 | >=3.9.8 | >=3.8.15 | >=3.8.15 | |
| 0.74 | >=3.3.7 | >=3.3.7 | >=3.9.2 | >=3.4.6 | >=3.5.8 | |
| 0.73 | >=2.5.34 | >=2.5.34 | >=2.5.35 | >=3.3.0 | >=2.5.35 | |
| 0.72 | >=2.5.3 | >=2.5.3 | >=2.5.20 | -- | >=2.5.3 | |
| 0.71 | >=2.2.1 | >=2.2.1 | >=2.3.16 | -- | >=2.3.2 | |
| 0.70 | >=1.6.9 | >=1.6.9 | -- | -- | >=1.6.11 |
Support for web is currently unplanned. See also #812.
Deprecated Versions
| Version | Android | iOS | macOS | visionOS | Windows | Web |
|---|---|---|---|---|---|---|
| 0.69 | >=1.3.10 <4.0.0 | >=1.3.10 <4.0.0 | -- | -- | >=1.3.10 <4.0.0 | |
| 0.68 | >=1.3.5 <4.0.0 | >=1.3.5 <4.0.0 | >=1.3.11 <4.0.0 | -- | >=1.3.5 <4.0.0 | |
| 0.67 | >=0.11.2 <4.0.0 | >=0.11.2 <4.0.0 | -- | -- | >=0.11.2 <4.0.0 | |
| 0.66 | >=0.7.10 <4.0.0 | >=0.7.10 <4.0.0 | >=0.11.4 <4.0.0 | -- | >=0.7.10 <4.0.0 | |
| 0.65 | >=0.7.5 <3.0.0 | >=0.7.5 <3.0.0 | >=0.11.4 <3.0.0 | -- | >=0.7.6 <3.0.0 | |
| 0.64 | >=0.4.4 <3.0.0 | >=0.4.4 <3.0.0 | >=0.9.12 <3.0.0 | -- | >=0.5.2 <3.0.0 | |
| 0.63 | >=0.1.15 <2.0.0 | >=0.1.15 <2.0.0 | >=0.3.0 <2.0.0 | -- | >=0.2.2 <2.0.0 | |
| 0.62 | >=0.1.11 <2.0.0 | >=0.1.11 <2.0.0 | >=0.1.37 <2.0.0 | -- | >=0.2.0 <2.0.0 | |
| 0.61 | >=0.1.0 <1.0.0 | >=0.1.0 <1.0.0 | >=0.1.0 <1.0.0 | -- | -- | |
| 0.60 | >=0.0.7 <1.0.0 | >=0.0.5 <1.0.0 | >=0.0.16 <1.0.0 | -- | -- |
Dependencies
- Android:
- Android Studio
- Android SDK Platform 34
- Android SDK Build-Tools 30.0.3
- To install the required SDKs, go into Preferences ❭ Appearance & Behavior ❭ System Settings ❭ Android SDK
- Android Studio
- iOS/macOS:
- Windows:
- Ensure that Developer Mode is turned on in Windows Settings app
- Install development dependencies as described in the React Native for Windows documentation
- [dev] Node LTS
- [dev] Yarn
Folder Structures
While we try not to hard code any assumptions, we've only tested react-native-test-app with the following project folder structures:
-
"Common" package folder structure where each platform has its own folder:
my-awesome-component ├── android │ └── build.gradle ├── example │ ├── App.js │ └── package.json ├── ios │ └── Podfile ├── macos │ └── Podfile ├── package.json └── src -
Monorepos where each platform is its own package:
my-awesome-component ├── package.json └── packages ├── my-awesome-component-android │ ├── build.gradle │ ├── package.json │ ├── settings.gradle │ └── src ├── my-awesome-component-core │ ├── package.json │ └── src ├── my-awesome-component-ios │ ├── Podfile │ ├── package.json │ └── src └── my-awesome-component-macos ├── Podfile ├── package.json └── src
How the Test App Finds the JS Bundle
See Assets.