React Native — How to use AndroidX dependencies on AppCenter CodePush

My current RN apps using an old version of React Native, usually at 0.57. Then there is update on Android studio to support AndroidX at React Native 0.59, suddenly my AppCenter build engine running into trouble, usually the problem is on pre AndroidX dependencies like

com.android.support…

but the new AndroidX ditch this dependencies, and use new dependencies like

androidx.appcompat…

Usually the configuration on RN Android to use AndroidX is written in android -> build.gradle

android.useAndroidX=true
android.enableJetifier=true

Usually the error looks like this

> Task :@mapbox_react-native-mapbox-gl:compileReleaseJavaWithJavac/Users/vsts/agent/2.153.2/work/1/s/node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/ResourceUtils.java:6: error: package android.support.v4.content does not existimport android.support.v4.content.ContextCompat;^/Users/vsts/agent/2.153.2/work/1/s/node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/constants/CameraMode.java:3: error: package android.support.annotation does not existimport android.support.annotation.IntDef;^

the problem usually on this line

android.useAndroidX=true

Usually you can Convert to AndroidX using Android Studio by replace line by line using this reference.

Then i read about build custom script on Microsoft Codepush Documentation, you can write script like on CI/CD platform

so i add new dependencies on my new project

npm install npx
npm install jetifier — dev ( dev dependencies on npm )

create a new file named appcenter-pre-build.sh on root of the project the text something like this

#!/bin/bash

npx jetify

then

• commit your changes including your new files and push into your remote branch.
• Navigate to the build settings for this branch
• Check the tick on build script ✔ Pre-build
• Then “Save” or “Save and Build”, otherwise the script will not run.

now the AppCenter Build working properly

File upload succeed.
Upload '/Users/vsts/agent/2.154.3/work/1/a/build' to file container: '#/1250244/build'
Associated artifact 1 with build 12
##[section]Async Command End: Upload Artifact
##[section]Finishing: Publish build
##[section]Starting: Analyze build log
==============================================================================
Task         : Command Line
Description  : Run a command line with arguments
Version      : 1.1.3
Author       : Microsoft Corporation
Help         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613735)
==============================================================================
[command]/Users/vsts/.nvm/versions/node/v10.16.0/bin/node /Users/vsts/agent/2.154.3/scripts/build-logs-analyzer/node_modules/@build/logs-analyzer-build-script/script/bin.js *** <HASH> Android React-Native
##[section]Finishing: Analyze build log
##[section]Starting: Checkout
==============================================================================
Task         : Get sources
Description  : Get sources from a repository. Supports Git, TfsVC, and SVN repositories.
Version      : 1.0.0
Author       : Microsoft
Help         : [More Information](https://go.microsoft.com/fwlink/?LinkId=798199)
==============================================================================
Cleaning any cached credential from repository: <REPO_NAME> (ExternalGit)
##[section]Finishing: Checkout
##[section]Starting: Finalize Job
Start cleaning up orphan processes.
Terminate orphan process: pid (37106) (java)
Terminate orphan process: pid (37065) (java)
##[section]Finishing: Finalize Job
##[section]Finishing: Build

This is my first post, and i think there is some flow in this post,

By the way, this post is inspired by:

React Native — How to handle an app with both pre-AndroidX and AndroidX dependencies (RN60)
https://itnext.io/react-native-how-to-handle-an-app-with-both-pre-androidx-and-androidx-dependencies-rn60-bf4df7ea0dd2