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

Welcome to Part 2!

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

  • You’re already on React Native 0.58

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:

// package.json

"dependencies": {
"react": "16.8.3",
"react-native": "0.59.10",
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/runtime": "^7.4.5",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.3"
}

Step 2: Update Flow ⬆️

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

// .flowconfig

// Delete this line:
node_modules/react-native/flow-github/

// Update this version number, if you have not already:
[version]
^0.92.0

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:

// metro.config.js`

module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
}

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:

// android/build.gradle

buildscript {
ext {
buildToolsVersion = "28.0.3"
targetSdkVersion = 28
}

dependencies {
classpath("com.android.tools.build:gradle:3.4.0")
}
}
// android/build.gradle

// Delete this section:
task wrapper(type: Wrapper) {
gradleVersion = '4.7'
distributionUrl = distributionUrl.replace("bin", "all")
}

Step 5: Update Gradle ⬆️

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

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

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

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

// android/build.gradle

android {
// Delete the next line
buildToolsVersion rootProject.ext.buildToolsVersion
}
// android/app/build.gradle

android {

compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}

}
android {
splits {
abi {
include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
}
}
buildTypes {
variant.outputs.each { output ->
def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
}
}
dependencies {
// implementation "com.facebook.react:reactnative:+"
implementation "com.facebook.react:react-native:0.59.10"
}

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:

# android/gradlew

DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# android/gradlew.bat

set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"

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:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

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.

android/app/src/main/AndroidManifest.xml

<manifest ...
// Delete the following:
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

Step 10: Update iOS Files 🍎

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

// ios/APP_NAME/AppDelegate.h

#import <React/RCTBridgeDelegate.h>
// ios/APP_NAME/AppDelegate.h

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
// ios/APP_NAME/AppDelegate.m 

// DELETE:
NSURL *jsCodeLocation;

// DELETE:
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RnDiffApp"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [UIColor blackColor];
// ios/APP_NAME/AppDelegate.m 

#import <React/RCTBridge.h>
// ios/APP_NAME/AppDelegate.m 

- (BOOL)application:(UIApplication *) ...
{
// Add the following:
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"YOUR_APP_NAME_HERE"
initialProperties:nil];

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
// ios/APP_NAME/AppDelegate.m 

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

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:

// Old Code
// import { View, ViewPagerAndroid } from "react-native"

// New Code
import { View } from "react-native"
import ViewPager from "@react-native-community/viewpager"
// Old Code
render() {
return (
<ViewPagerAndroid>
...
</ViewPagerAndroid>
)
}

// New Code
render() {
return (
<ViewPager>
...
</ViewPager>
)
}
"scripts": {
"postinstall": "patch-package"
}

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! 🎉 🎉 🎉 🎉

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