DEV Community: JulietteR

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

JulietteR — Tue, 30 Jul 2019 16:04:25 +0000

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

Full 64-bit Android support! (No more warnings from the Play Store!)
React Hooks support!
Our very first deprecations due to the Lean Core initiative

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"
}

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:

// .flowconfig

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

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

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:

// metro.config.js

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

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:

// android/build.gradle

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

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

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

// 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.

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

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
}

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

// android/app/build.gradle

android {

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

}

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

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]
  }
}

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:

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"'

…and to your android/gradlew.bat:

# 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>

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:

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

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

// ios/APP_NAME/AppDelegate.h

#import <React/RCTBridgeDelegate.h>

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

// ios/APP_NAME/AppDelegate.h

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>

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

// 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];

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

// ios/APP_NAME/AppDelegate.m 

#import <React/RCTBridge.h>

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).

// 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];

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

// 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:

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 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:

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

// New Code
import { View } from "react-native"

5. Add the new import:

import ViewPager from "@react-native-community/viewpager"

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

// Old Code
render() {
     return (
          <ViewPagerAndroid>
          ...
          </ViewPagerAndroid>
     )
}

// New Code
render() {
     return (
          <ViewPager>
          ...
         </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:

"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. 🙌

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

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.

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

JulietteR — Tue, 23 Jul 2019 11:29:07 +0000

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:

// 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.

// 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 to diagnose any issues.

Step 4: Link the JavaScriptCore Framework 🔗

1. Open up your XCode project.

2. Select your project:

3. Select your project’s main target settings:

4. Navigate into the Build Phases screen:

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

Be aware that you may need to clean your XCode caches after this change. Here’s an article that can help with that.

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:

// 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:

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

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

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:

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:

### 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:

# 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.

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. Once you’ve created these files, add them to your android/app/src/main/AndroidManifest.xml file:

<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. 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:

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

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

How to Replace a React Native ListView Component with a FlatList Component

JulietteR — Fri, 21 Jun 2019 22:19:19 +0000

Look familiar?

<ListView> was officially deprecated in React Native 0.48. Sometimes, we ignore deprecation warnings (guilty! 🙈) and don't deal with things until they're officially removed. Do yourself a favor and replace your <ListView>s now. It's easy, will improve your app performance, and will clean up your code ( Read: No. More. DataSources!).

My `<ListView>` Component (Puppies! 🐶)

Here’s a simple class component named <PuppyLitter> that we will need to update. It takes two props:

puppies: An array of objects, one for each puppy in a litter. For example: [{id: 1, name: 'Winky', age: 2}, {id: 2, name: 'Floofy', age: 1} ]
getPuppies(): A function that fetches an updated puppies array.

It renders a <ListView> full of <PuppyInfo> components, one for each puppy in the array. A <PuppyInfo> will render things such as the puppy's name and date of birth.

Our Options

A <ListView> can be replaced by any of the following:

<FlatList>: A component that renders a list, such as a list of components.
<SectionList>: Same as a but with section support (think of a contact list with section headers labeled A, B, C..)
A <VirtualizedList>: Simple. Very performant. Great for immutable arrays. Not great for an array of objects with property values that change.

To keep things simple, I’ll replace the <ListView> with a <FlatList>. I have no need for sections. I just want a list of puppies. The list may change though. Sometimes I'm indecisive and like to rename my puppies.

Converting to a `<FlatList>`

First, let’s change our imports:

// import { ListView, RefreshControl, View } from "react-native"
import { FlatList, RefreshControl, View } from "react-native"

Next, get rid of all of this.

Really. No more DataSources! 🗑

Let’s simplify our renderRefreshControl() method:

Finally, update the rendered component:

Some things to note about `<FlatList>`

data replaces your dataStore prop. This is where you pass in your array.
renderItem replaces renderRow.

IMPORTANT : renderItem passes an item, 🐶, from the data array, [🐶, 🐶, 🐶], within an object. Your puppy will be the value of an item property within this object: {item: 🐶} . If you wish to keep your renderRow() method as is, pass in the item instead.

Another option:

renderItem={({item: puppy}) _=>_ this.renderRow(puppy)}

Keys have been added to each rendered item by using the keyExtractor prop. We'll use the id of the puppy object.
The new this.renderRefreshControl() function needs to be bound to the component in onRefresh
pageSize does not exist here. Use initialNumToRender to communicate home many rows to render in the initial batch (approximately how many will fit in the screen at once)

My Final Component

Doesn’t that look so much better?

It’s way more performant too! 🏁

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

Tutorial: How to Fix a Failing Android Build Due to [androidx.core:core:1.0.0] Issues (June 2019)

JulietteR — Wed, 19 Jun 2019 02:48:42 +0000

Photo by Johnny Wharris

If you’re a React Native developer like me, you may have been surprised to see your Android build that JUST WORKED, failing and failing and failing again.

The issue, if you’re in Android Studio, went something like this:

Caused by: java.lang.RuntimeException: Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18–91
 is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18–86 value=(androidx.core.app.CoreComponentFactory).
 Suggestion: add ‘tools:replace=”android:appComponentFactory”’ to \<application\> element at manifestMerger6369655802117611865.xml:7:5–9:19 to override.

Did you think to yourself “Huh? AndroidX? I’m not supporting that yet.”, then follow along. Here’s how to fix the issue without adding AndroidX support.

What Happened?

Google pulled a fast one on us yesterday (June 17, 2019) and released a MAJOR version update on it’s Google Play and Firebase libraries. That means, any dependencies imported to the tune of:

implementation ‘com.google.android.gms:play-services-base:+’

…(note the +) will be affected.

How to Fix It

1) Hop over to your /android/app/build.gradle file and check out your dependencies. Search for any instance of play-services or firebase* and see if it’s pulling in the latest version (+).

dependencies {
  implementation "com.android.support:appcompat-v7...
  implementation "com.facebook.react:react-native:+"
  // found one! vv
  implementation "com.google.android.gms:play-services-base:+"
  // found one! vv
  implementation "com.google.android.gms:play-services-maps:+"
  implementation "com.google.firebase:firebase-core:16.0.1"
}

2) Head over to MVNRepository and search for the troublesome dependencies. Here you’ll be able to find the last released version of your module. Update /android/app/build.gradle to that version along with a force flag to handle any version conflicts:

dependencies {
 implementation "com.android.support:appcompat-v7..
 implementation "com.facebook.react:react-native:+"
 implementation ("com.google.android.gms:play-services-base:16.1.0"){ force = true }
 implementation ("com.google.android.gms:play-services-maps:16.1.0"){ force = true }
 implementation "com.google.firebase:firebase-core:16.0.1"
}

3) Time to handle your node_modules. Navigate into /android and run the following command:

./gradlew :app:dependencies

This will generate a dependency tree for your entire project.

4) Grab the tree and paste in into a text editor. Search for any instance of play-services or firebase* and navigate up the tree to see where the module is being used. In this case, react-native-push-notifications has a com.google.android.gms:play-services-gcm:+ dependency.

+ — — project :react-native-push-notification
 | + — — com.android.support:appcompat-v7:28.0.0 (\*)
 | + — — com.facebook.react:react-native:+ -\> 0.59.8 (\*)
 | + — — com.google.android.gms:play-services-gcm:+ -\> 17.0.0 (\*)
 | + — — me.leolin:ShortcutBadger:1.1.8

5) Patch those packages! If I am in a time crunch, I will use patch-package, a genius library that lets you make changes to a package and then creates a patch for you to store with your project. The patch will then apply via a postinstall any time you or someone on your team runs npm i.

In my case, I navigated to the build.gradle file of react-native-push-notification, made my updates, ran:

npx patch-package react-native-push-notification

…and voila! I have a patch!

And You’re Done!

In my case, I needed to apply patches to both react-native-push-notification and react-native-push-notification.

Do note that this is just a band-aid until you’re ready to support AndroidX and all its glory 🤖

Hope this helps!

*For a full list of updated dependencies navigate here.

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

DEV Community: JulietteR

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

Welcome to Part 2!

Part 2: Upgrading to React Native 0.59 ⬆️

🔑 Key Changes

Step 1: Update your package.json ⬆️

Step 2: Update Flow ⬆️

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

Step 4: Update android/build.gradle ⬆️

Step 5: Update Gradle ⬆️

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

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

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

Step 9: Remove the SYSTEM ALERT WINDOW 🚨

Step 10: Update iOS Files 🍎

Step 11: Trim the Fat! ✂️

Step 12: Test, Test, Test 🧪

And You’re Done!

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

Hey you! You need to upgrade to 0.59! 📢

About This Tutorial

Part 1: Upgrading to React Native 0.58 ⬆️

🔑 Key Changes

Step 1: Update your package.json ⬆️

Step 2: Modernize Babel 🗣

Step 3: Update Flow ⬆️

Step 4: Link the JavaScriptCore Framework 🔗

Step 5: Update android/build.gradle ⬆️

Step 6: Update Gradle ⬆️

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

Step 8: Change Up Android Build Scripts 🚧

Step 9: Check Your Refs 👀

Step 10: New Round Android Icons! 👏

Step 11: Test, Test, Test 🧪

Next Steps

How to Replace a React Native ListView Component with a FlatList Component

My <ListView> Component (Puppies! 🐶)

Our Options

Converting to a <FlatList>

Some things to note about <FlatList>

My Final Component

Tutorial: How to Fix a Failing Android Build Due to [androidx.core:core:1.0.0] Issues (June 2019)

What Happened?

How to Fix It

And You’re Done!

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

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

Step 4: Update `android/build.gradle` ⬆️

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

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

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

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

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

My `<ListView>` Component (Puppies! 🐶)

Converting to a `<FlatList>`

Some things to note about `<FlatList>`