How to get a react native module in native via Maven

19 Août

In this tutorial, we will learn how to add our React Native library to our Native app from Maven. we will publish our library into Github Packages I’ll assume that you followed this tutorial on how your add your react native app to an existing native app the goal is to be able to do it like this

After doing the react-native tutorial, you’ll have something like that

Note : I did a little refactoring here, rather than putting the MyReactActivity in the app module, I put it in the new module my-react-native-lib.

Note 2: In the package.json file I added some dependencies.

Now if we publish everything to Maven, when trying to retrieve our library in another project, it stills need the main dependencies that are :

And these two dependencies are in node_modules, you can’t get them from Maven (the new versions), so the only solution I found is to add their aar files as modules and to publish them.

So now go to your node_modules -> react-native -> android -> com -> facebook -> react -> react-native -> 0.64.2

Inside it, you’ll find the file react-native-0.64.2.aar and add it as a module, I don’t know why in the new Android Studio version they removed AAR file importation, if you struggle with that just copy/paste my directory react-native in your android folder.

But there is a step missing, inside 0.64.2 folder, you will find a pom xml file called react-native-0.64.2.pom this will list  all the dependencies our aar needs

We need to add them to our module my-react-native-lib

So go to my-react-native.lib’s build.gradle file and add the following implementations

Now, same thing for android-jsc dependency, go to node_modules -> jsc-android -> dist -> org -> webkit -> android-jsc -> r245459 as above your import the android-jsc-r245459.aar file as a module.

So now our project structure will look like that

The publishing

For the publishing part, you need to check out my previous tutorial about how to publish a multi-module Android library

Go to project’s build.gradle file and add the following code :

What are we doing here? we’re publishing every module to Maven (Java, Android, AAR), so when we’ll try to get our lib from another project it will have all the dependencies needed.

When you publish to Maven with Gradle, by default it will try to publish a Gradle metadata file, that contains all the dependencies needed by the module, it’s the same thing as a pom xml file, so in the first line, we’re disabling it, in our case we just need pom file.

And for com.facebook.react and org.webkit we’re telling to Gradle that if you find those dependencies replace it with react-native and jsc-android, rather than pointing to com.facebook.react it will point to react-native, by doing that we avoid using node_modules 

After publishing, if we check our repository it will look like that

I made a project that implements our react-native library you can find it below

https://github.com/BackPackerDz/TestBridgeReact

and here is the link to the react-native lib

https://github.com/BackPackerDz/react-native-to-native-tuto

If you have any questions, feel free to ask 🙏

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *