Native Modules in React Native using java and swift

If you are here, reading this article, then probably you are at a point where you are unable to achieve the desired functionality with react native packages and you have to implement some code on the native side to achieve that. So, if you are thinking that you do not have native side knowledge and you are unable to write code in java or swift, then you are probably wrong because this article will explain the easiest way by which you can implement native modules in just a few minutes.
I am assuming that you have already set up your react-native project at this point, and if not, then maybe this article is too early for you to start with.

The maximum version of React Native supported for this is 0.67.4.

Let’s start the code from android first —

Android —

• Open your project’s android folder in Android Studio.
• Navigate to the folder which contains MainApplication.java and create a new java class there (Let’s say NativeAppModule.java).

• Now extends the java class with ReactContextBaseJavaModule and implement abstract function getName() as shown below.

• Now you need to add functions in this class annotating them with @ReactMethod to call those on react native side. I have created 4 different functions to cater to different scenarios according to one’s needs. Comments are added in the below code to know more about their usage. Feel free to add accordingly —

• If you want to listen to certain events or callbacks from the android side to the react-native side then you will need to create an emitter function and call that function in your java class accordingly to emit the values to the react-native side as shown below —

• Now we need to make these functions accessible to react-native. For that, firstly we need to create a new class (Let’s say MyPackage.java) and implements that class with ReactPackage and override the necessary functions createNativeModules and createViewManagers as shown below —

• Now the last step is to add the previously created class (MyPackage.java) to the list of packages in getPackages() in your autogenerated MainApplication.java class as shown below —

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
   packages.add(new MyPackage());
  return packages;
}

• Now you are all set to use your android functions in react native. But let’s first see how to implement these functions for iOS in swift so that both platforms will be covered before switching to react native code.

iOS —

• Open your project in Xcode by navigating to your project’s ios folder and double-clicking on {PROJECT_NAME}.xcworkspace file.
• Now create a new swift file (Let’s say NativeAppModule.swift) in XCode as shown below.

• After clicking on Create in the above image, if there is no bridging file added to your project, then Xcode will ask to create one as shown below. Click on Create Bridging Header. It will be used to access react-native objective-c functions in a swift file.

• Now you need to add the below line to your {PROJECT_NAME}-Bridging-Header.h file that you have created in the previous step —

#import “React/RCTBridgeModule.h”

• Now you need to add some functions to your NativeAppModule file that you want to expose to your react native code same as we have done before for android. Comments are added to the following code to know more about their usage.

• If you want to listen to certain events or callbacks from the iOS side to the react-native side then you will need to create two new classes named NativeEventEmitter.swift and ReactNativeEventEmitter.swift and add the below code to them to emit data from the native code.

• Now you can emit events from swift to react-native using the code below —

NativeEventEmitter.sharedInstance.dispatch(name: "eventName", body: "This is body")

• Now we need to make these functions accessible to react-native. For that, firstly we need to create a new objective-c class (Let’s say NativeAppModule.m) and add the code as shown below —

React Native —

Since you have completed the implementation by adding some functions on the native side, so now the only thing left is to test them by using them in your react native file as shown below —

Thanks for reading the article. Let me know if you face any issues. You can connect with me on LinkedIn and Facebook.