React Native 0.57.5 to 0.59.5 Upgrade Process

For the https://www.streetcred.co/ iOS and Android app

Previous upgrade path: https://github.com/tylergaw/RNUpgradePath

Step 1. Read as much about the changes as possible

Step 2. Create a new test project

Following the standard tutorial https://facebook.github.io/react-native/docs/getting-started using the react-native cli, create a new RN project with the latest 0.59.x version
- I do this so I can see a foundation for what's different, mostly in the project tooling and configuration like babel, metro, gradle, jest, etc. Those things are easier to try out in a new project than trying to shoehorn them into an existing project that we've made a bunch of specific changes

Step 3. Install all StreetCred App Third-party modules in test project

Go down our package.json file and install every dependency (and certain dev dependencies)
I do this to make sure we make any necessary updates to third-party modules and just to do a general "check-in" on all of them to see if they've changed drastically, or on their way out, or anything like that that we need to be aware of
During this process I also went through the CocoaPods setup again to make sure our Podfile is using only things we still need.

Highlights / lowlights

Much smoother

This upgrade was much, much smoother than our previous upgrade to 0.57.x. We were also able to remove workarounds that were needed from that. Those are documented here https://github.com/tylergaw/RNUpgradePath.

we were able to remove the custom jest preprocessor. Just deleted the file and removed it from the Jest config.

Gradle things

Many third-party modules that have native code have updated to use newest gradle so we'll finally stop seeing on the warnings about compile instead of implementation

react-native-mapbox-gl

We're still using my fork. Not because we've made code changes only so we have a tag to instlall from. The main repo hasn't made a tag/npm release since 6.1.2 and they've made updates and fixes we we need. During this process we caught the form up to the latest master of the upstream and tagged it. We install it as:

"@mapbox/react-native-mapbox-gl": "tylergaw/react-native-mapbox-gl#2019-04-30.1"

react-native-permissions

We've struggled with permissions. Especially on Android. And it sounds like things might get tougher in that department in the future. The permissions module we use has a 2.0.0 version in the works since Feb 2019. It seems to be getting close to being ready and it seems like we're going to need it, so we're giving the alpha version a try in the app https://www.npmjs.com/package/react-native-permissions/v/2.0.0-alpha.1

There's an PR with ongoing conversation and fixes here zoontek/react-native-permissions#291

react-redux

We're going from 5.x to 7.x so a number of things have changed with how we'll use it. This will take a bit of fiddling to get fixed up, but they have good release notes so we'll have help. We're hopping on the 7.1.0 alpha because it's likely to be stable for our needs and we have some time for it to shake out.

cocoapods

These are always a little weird. Hit a lot of "..can't find compatible...", blah blah blah. In a couple instances, following the error message instructions to pod update <package-name> fixed the issue. But I got stuck Needed to update cocoapods from 1.5.3 to latest stable 1.6.1

Android multidex

At one point in the process, trying to run the app for android with react-native run-android would fail and spit up a bunch of errors. I spent a long time chasing error messages that were mentioning react-native-gesture-handler. The error messages pointed that way, but that ended up not being the issue. The issue was the app needed Multidex support. The article Enable multidex for apps with over 64K methods gets you almost there. They don't mention from where you need to import the MultiDexApplication class. It's at:

import android.support.multidex.MultiDexApplication;

I found that on a StackOverflow question, that I'm not sure where the link is anymore. Here's an example MainApplication.java https://gist.github.com/tylergaw/f38cedac83a5b8ea77c966718c44bced

Android: Could not connect to development server

Android would not connect to the development server no matter how many times I stop/started/deleted everything, walked away, kicked things. Turns out there's a needed change in AndroidManifest.xml See: facebook/react-native#23380 (comment)

Things I Learned

There's a TouchableBounce component https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableBounce.js Seems to not be documented on any official docs?