How to Upgrade from React Native 0.57 to 0.59 | Part 1: Upgrading to 0.58
Tags: reactnative, react, android, ios
Published: 2019-07-29 16:39:07

---
title: How to Upgrade from React Native 0.57 to 0.59 | Part 1: Upgrading to 0.58
published: true
tags: react-native, react, android, ios
canonical_url: https://medium.com/@jrapala/how-to-upgrade-from-react-native-0-57-to-0-59-part-1-upgrading-to-0-58-1d6a672186cb
---

![](https://cdn-images-1.medium.com/proxy/1*tg4oPcJpJ7dOTE9x0WstQg.jpeg)

#### Hey you! You need to upgrade to 0.59! 📢

If you haven’t already heard, all React Native apps will need to be upgraded to 0.59 by **August 01, 2019** if you wish to submit updates to the Google Play store. This is due to a new 64-bit requirement set forth by Google Play. They're pretty serious about it:

> By August 1, 2019, all apps that use native code must provide a 64-bit version in addition to the 32-bit version in order to publish an update. This past January, we reiterated that this is required in order to make way for innovation and in anticipation of future Android devices that only support 64-bit code.

Lucky for us, React Native has introduced 64-bits builds in their `0.59` release. The problem, though, is that it can be a little tricky to update. That’s why I created this tutorial. Follow along if you want to get your app up the speed and future-proofed for upcoming releases as well.

#### About This Tutorial

In my situation, I needed to upgrade a project from `0.57.4` to `0.59.8` (Note: A newer `0.59.10` has since been released). I also required both an Android and an iOS build.

When bumping a project up by two minor versions, **I highly suggest upgrading one minor version at a time.** (e.g. `0.57` to `0.58`, then `0.58` to `0.59`). It eases troubleshooting if something goes wrong.

So if you need to climb up from `0.57` like I did, I present to you **Part 1 of 2: Upgrading to 0.58!**

#### Part 1: Upgrading to React Native 0.58 ⬆️

#### 🔑 Key Changes

- The iOS JavaScriptCore framework now needs to be linked to our app.
- Android’s target 27 SDK is now supported.

#### Step 1: Update your package.json ⬆️

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

```json
// package.json

"dependencies": {
     "react": "16.6.3",
     "react-native": "0.58.6",
},
"devDependencies": {
     "babel-core": "^7.0.0-bridge.0",
     "react-test-renderer": "16.6.3",
}
```

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

#### Step 2: Modernize Babel 🗣

See that Babel upgrade above? Version 7 introduced a new type of Babel config file that is now much preferred, and even required by many libraries that you may use.

To update:

**1.** Create a new `babel.config.js` file.

**2.** Port over any configs you may have in your current `.babelrc` file. These presets will now need to be exported, like in the example below.

```javascript
// a basic react native babel.config.js

module.exports = {
     presets: ["module:metro-react-native-babel-preset"]
}
```

**3.** Once done, delete your old `.babelrc` file.

#### Step 3: Update Flow ⬆️

Here’s an easy one. Open `.flowconfig` and update the flow dependency:

```
// .flowconfig

[version]
^0.92.0
```

If you use Flow and run into errors after this update, head over to their [changelog](https://github.com/facebook/flow/blob/master/Changelog.md) to diagnose any issues.

#### Step 4: Link the JavaScriptCore Framework 🔗

**1.** Open up your XCode project.

**2.** Select your project:

![](https://cdn-images-1.medium.com/proxy/1*e-16F4qmNUIbdl6V9JIw9w.png)

**3.** Select your project’s main target settings:

![](https://cdn-images-1.medium.com/proxy/1*QAip1dbngymFpYK22VdXyg.png)

**4.** Navigate into the `Build Phases` screen:

![](https://cdn-images-1.medium.com/proxy/1*3ZhaeWwxJu1CMueVGwU1qA.png)

**5.** Under `Link Binary With Libraries`, add the `JavaScriptCore.framework`

![](https://cdn-images-1.medium.com/proxy/1*x7LhxNbYVVm7xVaKLCEHHg.png)

![](https://cdn-images-1.medium.com/proxy/1*u6Aqk3Z114iQHG37roeuGw.png)

Be aware that you may need to clean your XCode caches after this change. [Here’s an article that can help with that.](https://macpaw.com/how-to/clear-xcode-cache)

#### Step 5: Update `android/build.gradle` ⬆️

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

```groovy
// android/build.gradle

buildscript {
     ext {
          buildToolsVersion = "28.0.2"
          compileSdkVersion = 28
          targetSdkVersion = 27
          supportLibVersion = "28.0.0"
     }

     dependencies {
          classpath 'com.android.tools.build:gradle:3.2.1'
     }

     task wrapper(type: Wrapper) {
          gradleVersion = '4.7'
     }
}
```

#### Step 6: Update Gradle ⬆️

Using the new Gradle version of 4.7 (updated in the previous step) will require you to update `android/gradle/wrapper/gradle-wrapper.properties`

```
distributionUrl=https\://services.gradle.org/distributions/gradle-4.7-all.zip
```

#### Step 7: Update `android/app/build.gradle` ⬆️

In `0.58`, React Native started to introduce 64-bit Android builds. To add this build type:

**1.** First, remove the `ndk` section. It will no longer be used:

```groovy
android {
     defaultConfig {
          // Remove the following:
          ndk {
               abiFilters "armeabi-v7a", "x86"
          }
     }
}
```

**2.** Add the `“arm64-v8a”` architecture to the following lists:

```groovy
android {
  splits {
    abi {
      include "armeabi-v7a", "x86", "arm64-v8a"
    }
  }
  buildTypes {
    variant.outputs.each { output ->
      def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3]
    }
  }
```

**3.** Finally, since we are only upgrading to React Native `0.58.6`, we must specify the React Native dependency that Android should use:

```groovy
dependencies {
     // implementation "com.facebook.react:reactnative:+"
     implementation "com.facebook.react:react-native:0.58.6"
}
```

#### Step 8: Change Up Android Build Scripts 🚧

For those that use Buck, the build scripts have changed a bit:

**1.** In `android/app/BUCK`, replace the for `jarfile`/`for aarfile` loops with the following:

```python
### OLD CODE
lib_deps = []

for jarfile in glob(['libs/*.jar']):
  name = 'jars__' + jarfile[jarfile.rindex('/')+ 1: jarfile.rindex('.jar')]
  lib_deps.append(':' + name)
  prebuilt_jar(
    name = name,
    binary_jar = jarfile,
  )

for aarfile in glob(['libs/*.aar']):
  name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
  lib_deps.append(':' + name)
  android_prebuilt_aar(
    name = name,
    aar = aarfile,
 )

### NEW CODE
load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")

lib_deps = []

create_aar_targets(glob(["libs/*.aar"]))

create_jar_targets(glob(["libs/*.jar"]))
```

**2.** Now, create a new `android/app/build_defs.bzl` file:

```python
# android/app/build_defs.bzl

"""Helper definitions to glob .aar and .jar targets"""
def create_aar_targets(aarfiles):
    for aarfile in aarfiles:
        name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
        lib_deps.append(":" + name)
        android_prebuilt_aar(
            name = name,
            aar = aarfile,
        )
def create_jar_targets(jarfiles):
    for jarfile in jarfiles:
        name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
        lib_deps.append(":" + name)
        prebuilt_jar(
            name = name,
            binary_jar = jarfile,
        )
```

#### Step 9: Check Your Refs 👀

`<ScrollView>`, `<CameraRollView>`, and `<SwipeableRow>` all got some updates that may cause you trouble if you use any refs in these components.

This wasn’t an issue in my project, but if it is for you, using `createRef()` for these components should get you on your way. More info can be [found here](https://github.com/react-native-community/releases/issues/81#issuecomment-459252692).

#### Step 10: New Round Android Icons! 👏

Last but not least, round Android icons are now supported! [Here’s a great article on how to create these](https://dev.to/_s_farias/how-to-create-adaptive-icons-for-android-using-android-studio-459h). Once you’ve created these files, add them to your `android/app/src/main/AndroidManifest.xml` file:

```xml
<manifest...
     <application...
          android:roundIcon="@mipmap/ic_launcher_round"
```

#### Step 11: 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. Some of these warnings may be coming from your dependencies. See if there are any updates out there. If not, you may need to patch things yourself.

**Patching Packages**  🚑

Need to patch a package? My favorite way to do this is with [patch-package](https://github.com/ds300/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`:

```json
"scripts": {
     "postinstall": "patch-package"
}
```

**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`. 🙌

#### Next Steps

Got `0.58` working for your project? Congrats! 🎉 You’re halfway there!

Stayed tuned for Part 2: Upgrading to React Native `0.59`!

![](https://thepracticaldev.s3.amazonaws.com/i/laychg7tuxkzt61a0jpv.png)

👋 Hi! I’m [Juliette](http://www.julietterapala.com). I work at [Eventric](https://www.eventric.com/) as a Software Developer. Come follow me on Twitter at [@Juliette](https://twitter.com/JulietteR).