Often when developing cross-platform apps there comes a point when we want to access platform-specific features in our app. Creating a native module is one such technique that can be used to access platform-specific features when we are developing apps in the React Native.

In this blog post, we will see how we can make a native module for using SharedPreferences in our React Native app.

Let’s start by creating a native module for SharedPreferences. We will create a file called SharedPrefModule.kt in the Android directory of our React Native project. This is how the file would look:

So it is a class that extends ReactContextBaseJavaModule . ReactContextBaseJavaModule requires that we implement a method getName that returns a string. This string is the name with which we will refer to this native module in our JavaScript code. You can name it anything, it is not necessary to return the name of the class.

To expose a method to JavaScript a Java method must be annotated using @ReactMethod . There are a few things that we need to keep in mind while making these methods. The return type will always be void . Now the first question that might come to your mind is what if I need to pass a value to JavaScript? For that, we need to use a callback/promise. If we want our method to return a promise in JavaScript, we need to add the last parameter of our native Java method as a promise. This is exactly what has been done in the method signature of getString in the above code snippet.

Another important point to be kept in mind while making the method signature for a ReactMethod is that JavaScript has different data types in comparison to Java for example float and int is number in JavaScript. The following mapping should be kept in mind while deciding the argument type for the method.

Since all this communication is taking place through a bridge so all the methods declared in the code snippet will work asynchronously.

Now the next step is to register this module in a package, if a module is not registered then it cannot be accessed in JavaScript. We just need to create another class in the android folder like this

Since the class extends ReactPackage , we need to implement all the required methods. For all the native modules that we have in our project, we need to add them in the createNativeModules method.

Now the package that we just made needs to be added in the getPackages method of the MainApplication.java file.

Our native module is now ready, it’s finally the time to access this module from our JavaScript code.

It’s a common practice to declare all the native modules in a single place so following that practice we can create a file named SharedPref.js like this

SharedPrefModule is the name that we are returning from the getName method in our code in the android directory, this is the reason why we wrote NativeModules.SharedPrefModule . Now we just need to call this from our code.

For simplicity, we are just initializing a SharedPreference from JavaScript and checking if the value has been updated in a Toast message because that’s how lazy developers debug 😋

I have made a sample project from where all the above code snippets have been taken. The project is linked below:

Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!

If you have any kind of feedback, feel free to connect with me on Twitter.