How to Upgrade from React Native 0.57 to 0.59 | Part 2: Upgrading to 0.59

Juliette Rapala
Jul 30 · 7 min read

Welcome to Part 2!

If you’re here, then I will assume that:

  • You know that you need to update React Native 0.59
  • You’re already on React Native 0.58

No? Not correct? Then please check out the first part of this tutorial: Part 1: Upgrading to 0.58

Everyone else, read along to see how you can upgrade and get your React Native Android apps 64-bit ready!

Part 2: Upgrading to React Native 0.59 ⬆️

🔑 Key Changes

Step 1: Update your package.json ⬆️

Open up your package.json and update the following dependencies:

Then, delete your node_modules and reinstall a fresh batch with npm i.

Step 2: Update Flow ⬆️

Once again, an easy one. Open .flowconfig and update the flow dependency:

If you use Flow and run into errors after this update, head over to their changelog to diagnose any issues.

Step 3: Add a New metro.config.js File 🆕

Create a new file in your root directory called metro.config.js and add the following:

Everything is set to false for now, but you now have the ability to play around with some new bundling options. Cool! 😎

Step 4: Update android/build.gradle ⬆️

1. Update android/build.gradle to support some new libraries/SDKs. Don’t delete anything, just update the following version numbers:

2. Now, delete the following. You will no longer need to specify the version of Gradle that you need to use here:

Step 5: Update Gradle ⬆️

Though we’re no longer specifying the version, we still need to update Gradle to 5.4.1.

Open up android/gradle/wrapper/gradle-wrapper.properties and change the distributionUrl:

Step 6: Update android/app/build.gradle ⬆️

1. In android/app/build.gradle , delete the following line:

2. Now, add the following compileOptions section inside the android object:

3. Next, add the final required 64-bit build system, "x86_64", to the following lists:

4. Finally, since we are only upgrading to React Native 0.59.10 (there are newer versions out there), we must specify the React Native dependency that Android should use:

Step 7: Update android/gradlew and android/gradlew.bat ⬆️

One last step in updating to 64-bit builds. Add the following options to your android/gradlew:

…and to your android/gradlew.bat:

Step 8: Add a New android/app/src/debug/AndroidManifest.xml 🆕

Create a new file called android/app/src/debug/AndroidManifest.xml and add the following:

We now have a separate manifest for our Android debug builds.

Step 9: Remove the SYSTEM ALERT WINDOW 🚨

The SYSTEM_ALERT_WINDOW permission is what lets us see our favorite red box errors in Android. Since we’ve moved their permission to the new debug manifest file above, remove it from the release manifest file so we don’t ever see it in production.

In android/app/src/main/AndroidManifest.xml:

Step 10: Update iOS Files 🍎

A few changes need to be made to your AppDelegate files to prevent some errors from occurring:

1. Open ios/APP_NAME/AppDelegate.h and add the following import:

2. Next, add that RCTBridgeDelegate import to the AppDelegate class:

3. Open ios/APP_NAME/AppDelegate.m and remove all of the following:

4. Still in ios/APP_NAME/AppDelegate.m , add the following import:

5. Within the - (BOOL)application:(UIApplication *) ... didFinishLaunchingWithOptions.. { implementation, add the following. Note, replace YOUR_APP_NAME_HERE with the name of your app (the name according to XCode).

6. Right before @end at the end of the file, add the following:

Step 11: Trim the Fat! ✂️

As part of the Lean Core Initiative, React Native is starting to remove components that were once shipped with React Native. In this iteration, the following components are affected:

<AsyncStorage>

<ImageStore>

<MaskedViewIOS>

<NetInfo>

<Slider>

<ViewPagerAndroid>

If you use any of these components, you will now see some deprecation warnings. ⚠️ Fun!!

Don’t worry though! These components have migrated to different repos that are now maintained by the React Native community. I’ve linked each community with their corresponding component above.

To get rid of the warnings, you will need to go through your app and replace any instance of these components with their corrected import.

For example..

Replacing <ViewPagerAndroid> Imports: An Example:

1. Install the new library with npm i @react-native-community/viewpager

2. Link the library: react-native link @react-native-community/viewpager

3. Find an instance of ViewPagerAndroid in your app.

4. Remove the React Native import:

5. Add the new import:

6. Read the new documentation to see if any changes need to be made. In this case, ViewPagerAndroid needs to be replaced with ViewPager:

7. Repeat until your deprecations are gone!

A Note About Your node_modules ℹ️

Deprecated components can exist in your packages as well! If you see a deprecation, first check to see if a package update to handle the deprecation already exists. If it does not, create a pull request! Or if you’re in a hurry, patch the package yourself 😉

Patching Packages 🚑

Need to patch a package? My favorite way to do this is with patch-package. This is a library that diffs changes you made to a node_modules package, saves those changes, and applies those changes every time you run npm i. Here’s a quick tutorial:

1. Run npm i patch-package

2. Add this post-install script to your package.json:

3. Head into your node_modules and make whatever changes you need to your target dependency.

4. Once done, run npx patch-package package-name. This will create a patch file for that particular package. You should commit these files to your project.

5. Now, anytime you delete your node_modules, your patch(es) will get added after you run npm i. 🙌

Step 12: Test, Test, Test 🧪

Build your apps. Make sure to run them on actual iOS and Android devices. See any new deprecation warnings? Best to nip them in the bud right now. Note that warnings can also come from within your dependencies!

And You’re Done!

Got 0.59 working for your project? YOU. ARE. DONE! 🎉 🎉 🎉 🎉

Go ahead. Build some Android APKs. Some will be built in 64-bit. How can you make sure?

Testing 64-Bit Builds

1. Navigate to your Android release directory (where your release APKs are stored).

2. Connect a 64-bit device

3. Run one of the following commands, according to your device’s architecture (ARM or X86):

adb install --abi arm64-v8a ARM64-APP-NAME-HERE.apk

or

adb install --abi x86_64 X86-APP-NAME-HERE.apk

4. You have now forced the install of a 64-bit app. If it installs and runs correctly, then you are good to go!

Don’t have an Android device? Just upload your APKs to the Play Store. Google will let you know if you don’t pass the 64-bit test 🙂


👋 Hi! I’m Juliette. I work at Eventric as a Software Developer. Come follow me on Twitter at @Juliette.

Juliette Rapala

Written by

React & React Native Developer. Building awesome things @Eventric.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade