Skip to content

Home

Jump to bottom
Tommy Nguyen edited this page Jul 11, 2023 · 87 revisions

Welcome to the React Native Test App wiki!

ⓘ 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.

Contents

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-app should 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 Windows Web
main (see instructions) >=0.1.15 >=0.1.15 >=0.1.15
0.72 >=2.5.3 >=2.5.3 >=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
0.69 >=1.3.10 >=1.3.10 -- >=1.3.10
0.68 >=1.3.5 >=1.3.5 >=1.3.11 >=1.3.5
0.67 >=0.11.2 >=0.11.2 -- >=0.11.2
0.66 >=0.7.10 >=0.7.10 >=0.11.4 >=0.7.10
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 (deprecated) >=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 (deprecated) >=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 (deprecated) >=0.1.0 <1.0.0 >=0.1.0 <1.0.0 >=0.1.0 <1.0.0 --
0.60 (deprecated) >=0.0.7 <1.0.0 >=0.0.5 <1.0.0 >=0.0.16 <1.0.0 --

Support for web is currently unplanned. See also #812.

Dependencies

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:

  1. "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

  2. 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

When the test app is instructed to load the embedded JS bundle, it will look for and load the first file it finds from the list, starting from the top:

  1. index.[platform].jsbundle
  2. main.[platform].jsbundle
  3. index.mobile.jsbundle
  4. main.mobile.jsbundle
  5. index.native.jsbundle
  6. main.native.jsbundle
  7. index.jsbundle
  8. main.jsbundle

When loading from the dev server, the test app will attempt to load http://localhost:8081/index.bundle by default.

You can tell React Native Test App to use a different filename by configuring bundleRoot.

Clone this wiki locally