Creating native modules using Java/Swift for React Native projects.

Hello everyone I hope you all are doing great, today I am going to talk about something interesting for React Native Developers. Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript. Or write some high performance, multi-threaded code for things like image processing. How could approach this using native code base with Java or Swift? That’s all about our article for today. So without further talking let’s get into it.

Without going to deep dive into more complex modules such as image processing we will access simple native APIs such as Toast, Snackbar, log module. There are two different ways to write a native module for our React Native applications.

  1. Directly within your React Native application’s iOS/Android projects
  2. As a NPM package that can be installed as a dependency by your/other React Native applications

In this article we are going to stick with the first approach but in feature articles I will talk about second approach as well. In this example we are going to create the following Snackbar. We will be creating this Snackbar using native Java code for android only. We will not be creating any IOS related modules in this example. This Snackbar will be created and imported as a custom module for our React Native project.

The snackbar in above screen is not a component in React Native neither 3rd party library installed from the NPM. It’s purely a native API which written using Java and exported as a custom module for our React native application.

  1. Initialize the React Native project
npx react-native init snackbar 

2. Create a basic view with a button. So we can add a on click event that can be used to invoke our custom module.

Native Java configurations for create custom Snackbar module

3. Create SnackbarModule.java file inside android/app/src/main/java/com/your-app-name/ folder. This Java file will contain your native module Java class.

Then add the following content

remember to replace your package name at the beginning of the file. Every custom module class should extends the ReactContextBaseJavaModule class. For Android, Java native modules are written as classes that extend ReactContextBaseJavaModule and implement the functionality required by JavaScript.

The next step is that to override the getName() method. This method must return the name of the native module as a string. So we can import custom modules in JS like this.

const { SnackbarModule } = ReactNative.NativeModules;

4. Export a Native Method to JavaScript

All native module methods meant to be invoked from JavaScript must be annotated with @ReactMethod

Then the complete code for SnackbarModule.java will look like this

5. Register the Module (Android Specific)

To register the module ReactPackage, create a new Java Class named SnackManager.java that implements ReactPackage inside the android/app/src/main/java/com/your-app-name/ folder, then add the following content.

Finally add this line to getPackages() method inside MainApplication.java file

packages.add(new SnackManager());

Now, you can access the native module inside invoking its exported method in JavaScript.

6. Import NativeModules from react-native

import { NativeModules } from 'react-native';

7. Invoke its exported method

Congratulations you have successfully created and invoked native module.

You can refer more details about Native Modules from :

https://reactnative.dev/docs/native-modules-android

GitHub repository for complete example :

https://github.com/Shihara-Dilshan/RN-Snackbar-Native-module

Thanks for reading. Cheers 😁

--

--

--

Software Engineer 2 at Arimac || Data science | Machine learning | Deep learning Enthusiast || SE Undergraduate

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

4 Amazing Laravel UI Component Libraries to Consider for your Next Project

Reactive Application State Management with MobX

Manipulating State Featuring Fetch

Ignite UI for Angular

REST services & KoaJS

Node.js Advanced Topics

5 UI/UX Tips to Design Forms in Web Applications

Functional Programming

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
Shihara Dilshan

Shihara Dilshan

Software Engineer 2 at Arimac || Data science | Machine learning | Deep learning Enthusiast || SE Undergraduate

More from Medium

How to sign your React Native app for android

Building multi-platform React (web) and React Native (mobile) app in WSL2

Top Features of React Native App Development

FlatList | React Native Component Explained