-->

How to migrate a multi-platform app in React Nativ

2020-07-13 10:49发布

问题:

I’ve started to dig into integrating React Native in existing apps, and I mean real industrialized apps (iOS and Android version of a same app) that we wish to refactor with as much RN as we can for bringing code bases together (there is also an existing web version).

We are pretty convinced that including multiple RCTRootView sharing the same bridge is the best approach for us, starting from the basic content views (where sharing code bases is easier and more profitable) and iterating to turn more and more parts of app in RN (Animation, Navigation, …).

But when we’ve investigated this approach, several questions popped out, both technical and organizational.

First of all, although we don’t want to be iOS-first or Android-first, the Android platform doesn’t seem to have the same maturity of the iOS platform for this kind of work. We faced some problems like:

  • The ReactRootView doesn’t follow the React lifecycle, unlike iOS’s RCTRootView, there is no API to update props : https://github.com/facebook/react-native/issues/6303
  • It’s impossible to include a ReactRootView inside a native scrollview. This limitation exists from the day one of the Android release (see https://github.com/facebook/react-native/issues/9022)

The following is not really a “problem” but it adds some doubts about the Android support.
The iOS part of the integrating doc clearly mentions that it’s possible to init a view using an existing bridge (initWithBridge, the API is explicit too).
On Android, the same doc mentions that multiple views can share the same ReactInstanceManager, but if you expose 2 components in your bundle and use it, you have to call twice startReactApplication and you’ll see 2 lines in Chrome console
Running application "XXX" with appParams
Running application "YYY" with appParams
Sounds not very optimized to me… Did I really create 2 entire “RN apps” here ?

That being said, we are looking for feedbacks and answers :

  • About the Android platform, is it reasonable to synchronize the refactor on both platforms or we’d better turn the iOS app into RN and then the Android one ?
  • How far can we go in RN views displayed simultaneously ? 10, 20 views at a time ?
  • Our app is “data-oriented”. Is it a good idea to move the data-fetching in a Redux app in the RN world first ? I guess we have to expose data and notify store updates to the native world: what is the most efficient way to do this ? (Native modules makes the communication in the other side easy, native toward RN, but they seem not helpful for this purpose).
  • Also, how to organize the VCS ? Is moving the 4 code bases (iOS, Android, Web and the RN bundle) in a mono-repository a necessary move ?