How to handle an app with both pre-AndroidX and AndroidX dependencies

Android Jul 30, 2020

Before starting about why/how to handle an application for AndroidX dependancies, let's have a small talk about AndroidX for a minute.

Android X is the new program rolled out by google to package libraries with Jetpack.old way of libraries are over complicated to manage so google decide to cleaning up and make a new system

So if your project was relaying on library called com.android.support:appcompat-v7 ,compatible AndroidX dependency is androidx.appcompat:appcompat:1.0.0

So what does that mean for your React Native project ? Well if like us you use a bunch of third party libraries (Firebase, Auth0, Mapbox, etc.) then chances are either your project directly imports Google librairies, or some of your third party rely on Google librairies.

This mean that somewhere in your android project, in your build.gradle, you may have a line such as :
implementation "com.android.support:appcompat-v7:<version-name>" perhaps in your dependency tree is like this

This is all nice and good, as long as either project's all dependencies and third party are pre-androidX or or all your dependencies rely on AndroidX namespace

How is started going wrong

So what happened? when we need to upgrade some of our libraries in order to fix some bugs and behind the scene two of both dependencies are mixed. Most of the time we see this type of error related to AndroidManifest :

As you can see the messaging is telling something like two library are trying to write into same key of manifest, causing merger failed.
So the only solution was to pick any one side and force the project to use AndroidX namespace.

google provide a solution like simply add below key in android > gradle.properties file

android.useAndroidX=true
android.enableJetifier=true

After adding above lines build a project
Except the next step introduced a new problem:

No we had a different problem : the useAndroidX flag swap internal library to AndroidX, but some third party libraries which installed via npm these are explicitly calling modules.

let's have an example like react-native-config in this dependence useage pre androidx dependency so in that file we have two errors like above image
If you were to replace the import with You can find the mapping of old name / new name here

Everything would be fine.
OK, so the problem is clear : we need to update the code of your third party dependencies in order to get the project to build. So our options were:

if possible do latest version of your librairies, as some may already support AndroidX
for the libraries that don’t have a version that supports AndroidX, get the developers to update their libraries to support AndroidX.
Manually find all the Java files that specifically import pre-AndroidX libraries, and change the code to use the new AndroidX name spaces.Option 3 is working fine for any libraries but it is not perfect solution because
it's time consuming.

after npm install every time we need to do repeat steps. Set Automated Solution With jetifier

Jetifier convert node_modules dependencies to androidX
How is this done?
1) npm install --save-dev jetifier
2) npm jetify
3) npm react-native run-android (your app should correctly compile and work)4) Call npm jetify run in the postinstall target of your package.json
(Any time your dependencies update you have to jetify again)

"scripts": {
  "postinstall": "npm jetify"
}

For learn jettifier in detail click here

Handling special cases
There are might be case like if you use react-native-image-crop-picker then myou might have error message related to the androidManifest because of some old classes.

like the provider key is using
providerandroid:name="android.support.v4.content.FileProvider"android:authorities="${applicationId}.provider"

for this you need to add below lines

AndroidX with RN 0.60 In react native 60 or above already installed jetifier which handles older libraries

In this post, we learnt about Android X, and how to Migrate Android Support Packages into AndroidX in React Native. We also learn about what is jetifier.

Thank you.