In this post we’ll look into What is Android X and its support in React Native.
What Is React Native?
React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this blog, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some example: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.
If you haven’t heard the term yet, AndroidX is the new open-source project being rolled out by Google to package libraries with Jetpack. Essentially, the old way of managing libraries was becoming overcomplicated and so Google decided to start cleaning up their act and use a new system, along with new library names.
AndroidX is a major improvement to the original Android Support Library. Like the Support Library, AndroidX ships separately from the Android OS and provides backwards-compatibility across Android releases. AndroidX fully replaces the Support Library by providing feature parity and new libraries. In addition AndroidX includes the following features:
- All packages in AndroidX live in a consistent namespace starting with the string
androidx. The Support Library packages have been mapped into corresponding
androidx.*packages. For a full mapping of all the old classes and build artifacts to the new ones, see the Package Refactoring page.
- Unlike the Support Library, AndroidX packages are separately maintained and updated. The
androidxpackages use strict Semantic Versioning starting with version 1.0.0. You can update AndroidX libraries in your project independently.
- All new Support Library development will occur in the AndroidX library. This includes maintenance of the original Support Library artifacts and introduction of new Jetpack components.
If you want to use AndroidX in a new project, you need to set the compile SDK to Android 9.0 (API level 28) or higher and set both of the following Android Gradle plugin flags to
true in your
android.useAndroidX: When set to
true, the Android plugin uses the appropriate AndroidX library instead of a Support Library. The flag is
falseby default if it is not specified.
android.enableJetifier: When set to
true, the Android plugin automatically migrates existing third-party libraries to use AndroidX by rewriting their binaries. The flag is
falseby default if it is not specified.
How to Migrate Android Support Packages into AndroidX in React Native ≥0.59
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:
Then I opened
MyProject/Android/gradle.properties and added the following lines
If you use React Native modules with native Java code that isn’t converted to AndroidX, and your app is AndroidX, you probably need jetifier.
The jetifier is an AndroidX transition tool in npm format, with a react-native compatible style
Why do you need Jetifier?
The standard AndroidX migration rewrites your current installed source code, and at build time dynamically re-writes any linked jar/aar/zip files. This is all a “normal” Android app needs.
React Native apps are not standard Android apps. React Native modules with native Java code usually distribute that code as source, and link the source code directly.
When you update your modules (or install them again after following the standard AndroidX migration), the freshly installed Java code from your react-native dependencies will not be translated to AndroidX anymore, and your build will fail.
So you have to perform an AndroidX migration on your linked source every time you update react-native modules that ship native Java code. That is what this tool does.it can rewrite the source in node_modules every time you call it.
Usage for source files
To jetify / convert node_modules dependencies to AndroidX
Imagine you have a react-native project. One of your library dependencies converts to AndroidX., and you need to use the new version.
So now you need to convert your app to AndroidX, but many of your react-native libraries ship native Java code and have not updated. How is this done?
- First, use Android Studio’s refactoring tool to convert your app re: the Android developer docs
npm install --save-dev jetifier
npx react-native run-android(your app should correctly compile and work)
npx jetifyrun in the postinstall target of your package.json (Any time your dependencies update you have to jetify again)
Proof it works / how this is tested: https://github.com/mikehardy/rn-androidx-demo. You can clone that repo, run the script, and see it works. Please feel to make PRs to that repo, especially in App.js or in the dependencies included, if you would like to demonstrate success or failure for a specific module.
Inspiration: this jetify command was based on an idea from @janicduplessis — thank you Janic!
To reverse-jetify / convert node_modules dependencies to Support Libraries
Maybe you are in the position where you must not migrate to AndroidX yet. But your libraries have started to migrate and they ship AndroidX native Java code.
You can convert them back with reverse-jetify mode
Follow the instructions from above to convert to AndroidX, but add the
-r flag to the
npx jetify call.
If a library ships only as a jar/aar/zip file, you will have to use jetifier-standalone to convert that as well, but you can delay the AndroidX migration indefinitely with this style.
Usage for jar/zip/aar files
You may be a library maintainer, wanting to ship an AAR of your support code converted to AndroidX, or maybe you ship an AAR normally and you want to continue to support your non-AndroidX users even after you convert your library to AndroidX?
As part of your build process you can use this tool like so:
npm install jetifier(or maybe
npm install -g jetifierto make it globally available)
npx jetifier-standalone <your arguments here>(use
npx jetifier-standalone -hfor help)
In this post, we learnt about “What is Android X”, and how to Migrate Android Support Packages into AndroidX in React Native ≥0.59. We also learn about what is jetifier.
Now that you have learnt about How to Migrate Android Support Packages into AndroidX in React Native ≥0.59, here are some other topics you can look into
- React Native life cycle hooks
- How To in React Native — Image picker| Integrate Firebase
- Create Awesome Apps in React Native using Full App
If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App