Building a DeviceInfo Package for Android in React Native

If you work with React Native you may know that sometimes you have to deal with native code, being for package integration or writing your own code in Java for Android or Objective-C/Swift for iOS. Recently I faced the second situation, so I had to write my own code in Java to build a package that is able to get the device ID. At this point you may ask: "Why don't you use the react-native-device-info package provided by react-native-community, it is very good and allows you not to only get the device ID but also lots of other device resources". Yes, I know that, and it is a very good package indeed, but the problem is that I've been facing an issue with this package that was becoming a big headache. As part of a React Native Developer's reality you have work with cross-platform, so you should be able to make it work in both Android and iOS, but sometimes that doesn't happen and you may spend some time struggling with some feature that simply doesn't work in one of them(in most cases on Android 😂) after you have spent more than a hour working on that feature.

So that happened to me working with react-native-device-info to get the devices ID, everything works fine in iOS but I couldn't make any of the package versions work on Android. I didn't get anything far from build errors like deprecated classes or missing androidX support, as I'm not able to migrate to androidX now, it's not an option. And, yes, I tried a several versions trying to find a point of balance that works for both. So I got really tired and decided to build my own package to get device ID, at least of Android, that was my major problem, once everything is working fine on iOS.

To be honest I'm not a specialist on Java or Android native development, so I had to make a lot of research and go through many examples to achieve something functional. So I will guide you through the steps to implement this package on Android.

Let's go ahead and create our DeviceInfoModule.java where we have three main functions: getName, getDeviceID and getDeviceIDHandler. The first one is to define the name we gonna use on JavaScript to call our module. The getDeviceID is the one that will be properly called on JavaScript side and this function simply receives a callback and calls getDeviceIDHandler that defines a function that will return a callback passing our id, I will call your attention for this line:

This is how we get our device ID, which is provided by android api and should be a 64-bit number (expressed as a hexadecimal string), unique to each combination of app-signing key, user, and device. All I had to do was to know how to return it back in my callback function, but there's a lot of packages out there where you can get some reference.

Once we have our module ready we have to register it inside a package and this will distributed through our application. The process is very similar to the way you register a package on MainApplication.java when you are integrating a package on react native. You basically have the createNativeModules that returns a list and this is where you add your module:

Now that we registered our module inside the package we can pass it on to our MainApplication.java where we will make it accessible to our whole application. If you’re used to the process of integrating packages on Android this step will be pretty easy, all you have to do is to import the package and instantiate it inside getPackages.

NativeModules is provided by react native and it makes a bridge between your JS code and the native code, so you can use it to access the function created inside your package. This should return a promise and then you will be able to access the device ID on JavaScript side. Now with a simple function call you are able to get the device ID!

So that's it! Of course that you can increment other device resources on this package but I hope that, for now, it can be useful for you as it was for me that was struggling with react native packages to achieve a simple goal, but sometimes the best way is to cross the door, get to work and do your own thing. Even if you're a beginner on native code your are able to achieve good result without pain.

Developer at Enhancers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store