Update: React Native has released new stable version 0.60. It comes with AndroidX support but still, you may need to migrate your native libraries to AndroidX yourself. React Native team also recommends using a tool named Jetifier to patch node modules for a temporary solution.
In late 2018, Google started to change Android support library to a new namespace androidx. React Native begins to support AndroidX from 0.60 version. But, at the time of writing this blogpost the 0.60 version is in prerelease and hence it’s not advisable to use that version in production. So, how to migrate to AndroidX in react native?
I decided to migrate only when I came across the following error while running the project.
Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.sup
port: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 AndroidManifest.xml:11:5-117 to override.
See http://g.co/androidstudio/manifest-merger for more information about the manifest merger.
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ‘:app:processDebugManifest’.
> 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 AndroidManifest.xml:11:5-117 to override.
* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.
On searching, I found out on Google that this react native issue is related to AndroidX. React Native version of my project is 0.59.8. First of all, I went through the official documentation on AndroidX migration. Even though the documentation is for native android developers, I followed steps from there and my migration was successful.
- First of all, I opened MyProject/Android/build.gradle and verified I am targeting Android Pie or later. It’s because AndroidX support is available for apps targeting API 28 or later. My build.gradle file was as given below:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
supportLibVersion = "28.0.0"
}
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.3.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
- Then I opened MyProject/Android/gradle.properties and added the following lines.
android.useAndroidX=true
android.enableJetifier=true- Then I opened MyProject/Android using Android Studio. As given in the screenshot below, I have two native third parties named react native fs and react native gesture handler.
- Then I selected the app folder and choose Refactor option from the top menu bar and selected Migrate to AndroidX option. If you couldn’t find migrate to AndroidX then it means you are using an older version of Android Studio. Update your Android Studio to the latest version and try again.
- When the refactoring preview was shown, I clicked on Do Refactor button.
- After refactoring was done, I tried to run the project from command line. But unfortunately the build failed and the following error was shown. This meant that refactoring wasn’t perfect and I needed to change some things manually.
Task :react-native-fs:compileDebugJavaWithJavac
/home/rashid/Desktop/React Native/sample/node_modules/react-native-fs/android/src/main/java/com/rnfs/RNFSManager.
java:11: error: package android.support.annotation does not exist
import android.support.annotation.Nullable;
^
/home/rashid/Desktop/React Native/sample/node_modules/react-native-fs/android/src/main/java/com/rnfs/RNFSManager.
java:624: error: cannot find symbol
private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
^
symbol: class Nullable
location: class RNFSManager
Note: /home/rashid/Desktop/React Native/sample/node_modules/react-native-fs/android/src/main/java/com/rnfs/RNFSMa
nager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
2 errors
- As shown in the error, the error is in RNFSManager.java file in react native fs library. The error is related to importing android.support.annotation.Nullable as android. support namespace should be replaced by androidx namespace. I went through artifact mappings given here and changed it into import androidx.annotation.Nullable
- I again tried to run the react native project with react-native run-android command and it was successful. The react native androidx error had gone and the androidx migration in my react native project was successful.
I hope you can also follow the steps given above to migrate to androidx in react native. Please keep in my mind that the whole process is not automatic, you may need to do some manual changes depending on number of third party dependencies you have used.
Have any doubts? Please let me know through the comment section .
