Upgrade React-Native and dependencies

[mathcass]

Submitted by @ericboucher and copied into public repository

---

The react-native version is quite old. It is important to update it. It will also be a good opportunity to try and use clean node-modules again.

In particular, we recently tweaked RCTSRWebSocket.m and RCTScrollView.m to work with more recent versions of iOS, which we shouldn't have to do.

Almost all of our iOS users have iPhones 9.3 or up.

[laurentS]

Hello,

Following a conversation with @Hagellach37 I have attempted to upgrade react-native to the latest version, following the instructions at https://facebook.github.io/react-native/docs/upgrading#upgrade-based-on-git
SpoilerAlert: I have not succeeded yet :)
Some of my findings:

• the version of RN used in the app (0.27.1) is about 30 releases behind the current version, which causes a number of problems (as you'd expect)
• running the upgrade script on a clean repo (master branch) just leaves it in a broken state, from where I have tried manual fixes.
• a number of dependencies are deprecated: react-native-fcm and react-native-firebase-analytics are replaced by react-native-firebase. There are possibly others, but I haven't hit that point yet.
• react-native-extra-dimensions-android does not seem to be needed anymore, as it mainly fixed bugs in RN that have been resolved.
• remobile/react-native-splashscreen has not been updated in about a year, so it's not clear whether it will work with the latest RN version

At this point, I'm stuck on a build issue (while running react-native run-android) that I am trying to solve. I have spent a few hours on this, and I suspect it will take quite a few more to complete. @mathcass @ericboucher @PimDeWitte Any thoughts on a better way to proceed?

As a last resort alternative, I was pondering the option of rebuilding the app from scratch using create-react-native-app and readding code and dependencies piece by piece.

[mathcass]

Hi @laurentS, Thanks so much for taking this on! It's an ambitious effort but much appreciated!!

Your notes roughly coincide with my experience trying to upgrade the repository and I had to abandon it because of time constraints.

I think you're probably on the right track and this is just going to involve a lot of small fixes in various places to get working. From the best I can tell, there's a list of packages that we depend on directly (IE, that we're importing and using):

$ grep -R "require([\"'][@a-z]" src/shared/ | cut -d'=' -f 2 | sort | uniq -c
      1  require("crypto-js");
      3  require('react');
      3  require('react-native');
      1  require('react-native-device-info');
      1  require('react-native-extra-dimensions-android');
      1  require('react-native-firebase-analytics');
      2  require('react-native-fs');
      1  require('react-native-markdown');
      1  require('react-native-message-bar');
      4  require('react-native-modalbox');
      5  require('react-native-progress-bar');
      1  require('react-native-push-notification');
      3  require('react-native-simple-store');
      1  require('react-native-swiper');
      2  require('@remobile/react-native-splashscreen');
      1  require('underscore');

(The number prefix is how many times it's called.)

My hunch is that the errors we start running into initially are mainly due to installed packages being incompatible with the new target version of RN. The workflow there would probably look like:

• Iteratively run react-native run-<platform> noting the errors
• Upgrading the dependency the error points to

with the goal of hopefully getting to a point where the errors we encounter start appearing in code within the src/shared directory.

Like you mentioned, there might be other ways, like trying to rebuild the package. If we went that route, it probably makes sense to just focus on one piece of functionality at at time. For instance:

• Remove all source files except what we need to do the splash screen
• Increment and get the login form working
• Go on and get the project selection working
• etc

I think either would be good options depending on whether you're more comfortable figuring out which packages you need to upgrade to get things working vs incrementally re-building the application.

[laurentS]

So I've managed to rebuild most of the app on top of a clean react-native init template with the latest version (0.57.3). I still have a few bugs (mostly display), offline doesn't seem to be working, but I can move around the app, login, go into a project and swipe/tap away. Results seem to be saved back in firebase. The developer experience is a lot better and faster than the old RN.
I will spend a few more hours fixing the obvious bugs, adjusting some display to match what it was, at least on my device, clean up the code a bit and then we should be able to build a test release for android and iOS, and check that it behaves as expected (ie: as before).
Once that is done, I can get started on the new project type.

[ericboucher]

Yeaaah! Let us know if you want us to help test :)

[laurentS]

I will! Hopefully I can get an android test build out on Monday. I'll need your help for an iOS build. I'll post an update on slack when I have something usable for non-devs.

[laurentS]

Closing this as it is done, although not merged into master yet

[ericboucher]

I would recommend waiting until things are into master before closing as a best practice Eric Boucher

…

On Apr 9, 2019, at 04:49, laurentS ***@***.***> wrote: Closing this as it is done, although not merged into master yet — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[laurentS]

yeah, good point! I guess it's probably time to think about merging these 227 commits :)