How to communicate between React Native and Swift using Bridging

In this article we will learn how can we achieve communication between React Native and Swift code. As we know React Native (RN) is great for building cross platform apps, but during development of react native app we might come across a situation where we need to call native code written in swift.

This is where bridge module comes in, which allows us to communicate with the native layer of the application. If we are developing app in React Native for iOS and Android platform then we need to create a bridge for each platform. In this article we will discuss creation of React Native Bridge for iOS only.

So Let’s start

To better understand the concept we will create sample DemoApp in react native using react native CLI. Below are the commands to setup new project in react native.

·      react-native init DemoApp

·      cd DemoApp

·      react-native run-ios

On running the app on iOS simulator, you will be presented with following screen.

React Native welcome screen

Moving to the coding part

In this App, we will store some sensitive data in keychain. I am using  SwiftKeychainWrapper  cocoapod library to store data securely in iOS keychain.

This pod can be installed by adding pod ‘SwiftKeychainWrapper’ line to your podfile. Make sure to run command pod install in terminal to install the required pod in your project.

Let’s now edit our App.js react native file with below code:

In the above code, we simply added one TextInput and Button on the screen. In this, we will save the password enter by user in the TextInput field on the button click.

handleChangePassword method is used to store the text entered in the TextInput field inside the password state.

If you run your code now then your iOS screen will look like below:

Next we need to open ios/DemoApp.xcworkspace in Xcode.

Create a swift file

·      CMD + N

·      Select Swift file

·      Name your file KeyChainWrapper

·      In the group dropdown, make sure to select group DemoApp not the project itself.

Configure the Objective-C Bridging Header

After we created swift file, we should be prompted to choose if we want to configure an Objective-C Bridging Header. Select Create Bridging Header option.

Objective C Bridging Header

Now open bridging header file just created above and add below header:

#import "React/RCTBridgeModule.h"

  RCTBridgeModule will provide an interface to register a bridge module.

Now open your keyChainWrapper swift file. It should be inherited from NSObject so that it can be exposed to Obj-C

Now Let’s expose our swift file to JS

To do this we need to use Obj-C Macro available in React Native. To use these Obj-C Macros, we need a new Obj-C file. So follow below steps to create new Obj-C file

·      CMD+N

·      Select Objective-C file

·      Name your file KeyChainWrapper

Now we will import RCTBridgeModule so that we can use Macro to bridge the native code

We will use RCT_EXTERN_MODULE Macro to expose our KeyChainWrapper class to JS

·      The first argument is the name of your swift class

·      The second is its superclass

Accessing your module from JS

Now it’s time to check swift class access from JS. So open your App.js react file and import NativeModules from react-native and let’s see if we can access our keyChainWrapper swift class from componentDidMount() method.

 Any module exposed to React Native should be available as a property on the NativeModules object. If we debug it remotely, we will get undefined because react native doesn’t expose native class if we don’t expose some of its methods. So let’s do that now.

Open your KeyChainWrapper swift class and add below method.

In above method, we are receiving password text entered by user from react native code and saving it securely in iOS Keychain. Here, please note that we need to pass an Array in the callback and have to used @objc directive for each property and method that needs to accessed from Obj-C.

Next we have to expose the method to React Native bridge, open your KeyChainWrapper Objective C .m class and declare savePassword method inside RCT_EXTERN_METHOD as below:

Now, it’s time to call this method from our React Native code. So open App.js and declare the handler for save password button as below:

In above code we are sending the password entered by user on button click to our swift class where it is getting saved securely in iOS keychain.

Main queue setup warning

We might get a warning which tells that we didn’t implemented the requiresMainQueueSetup method.

Main Queue setup warning

To remove this warning we simply have to implement specified method in our swift class and returns Boolean as below:

Now, it’s time to test our bridging code. Run your app and enter the password and click save password button.

After clicking the button, we passed the entered password text to our swift class where it is getting saved in the iOS keychain. On successful completion, we received call back with Boolean value in our React Native code. Here we  show alert to the user if password is saved successfully.

In this way we can call any code written in Swift from our React codebase to perform some operations which are not possible to implement in React Native

If you enjoyed reading this article🙂, then please don’t forget to share it with your friends and do subscribe this blog to receive more technical posts in future via email.