React Native Android app as a Module
Can you embed React Native into larger native Android app
The answer is yes. It gets more complicated if you need to ship your React Native app component as just part of a larger application and have to deliver as only an AAR file, but still the answer is yes. The thing that is lacking is a good guide on how to do this.
Background info and application structure.
So I work on a team that ships a small component of a larger mobile application. In fact, there other teams shipping other components too. The structure looks like this:
If my team (Team A) wanted to be able to use React Native, we had to continue to ship our components exactly as before, via an AAR file. It is possible but there are some things to consider.
Starting from the React Native tutorial
I am going to start with the React Native tutorial and correct things that will trip you up if you try this. There are 500 open issues and almost 200 open PRs on React Native as I write this. You will run into trouble, so here are things I encountered.
Firstly, I did this in November of 2017. I found out that it is very important to lock down all of your dependency versions for everything. Here is what my package.json looks like:
Lock your dependencies in your Android project.
A very serious error is made in the tutorial:
Seriously, don’t do the “+”. Lock it to a version. A much smarter thing to do is to lock it to version
0.50.3, which is the version I have used in the package.json file.
Why lock it down? I will tell you why. It is because if you misidentify the path to the node modules in the line
in the maven config you will have major compilation issues. I did this exact thing because I made a directory inside of the “android” directory in my project. Why does this break things? Well, it is because in Maven Central there is a very old version of
React Native published (version 0.20.something) which is going to not compile. This is not easy to discover unless you list our the dependencies, because reffing to
node_modules directory wrong will just fail silently!
Setting up your React Native project as a module.
Publish React Native to your maven instance for your Apps team.
The goal is to be able to seamlessly hand off your components to your apps team so they can consume your project just like any other. Well in this case your apps team must now somehow consume the React Native android AAR file (version 0.50.3 was about 2.3 mb), which is a dependency of the AAR file you will ship.
React Native is not published to Maven Central anymore. So you need to get them this exact library version. I had trouble trying to compile the dependencies into my module, and you probably wouldn’t want to do that anyway just in case another team is using React Native. My solution was to publish the React Native android library to our internal Maven repo so that the apps team could just pick that up automatically.
Testing it out on a device.
Create a new project, then consume your published AAR module and try to instantiate the react activity. Just make sure to reference the React Native library in some way so that the one dependency will load.
I had some trouble testing the application on actual device, however. I ended up making some modifications to my
that had to do with making different APKs for different processor architecture. But I think the most important
part of is to include this
react.gradle file from node modules.