Seamlessly Integrating Native Modules in iOS for React Native AR Apps

Introduction

Welcome to the intricate world of iOS development in React Native! In this tutorial, we will be learning how to create native modules for iOS using Objective-C.

This is part three of a multi part article series about the integration of AR services via native modules into a React Native app. While React Native simplifies cross-platform app development, there are scenarios where leveraging native iOS capabilities becomes essential, especially when dealing with advanced features like augmented reality.

You can find the other parts here:

• Part one: Setting up a native module via Kotlin.
• Part Two: Integrating ARCore
• Part Four: Integrating ARKit

The full code for this part is here.

Prerequisites

XCODE is the preferred way to write native modules on iOS. It is an IDE developed by Apple and has some - in theory - useful integrated appliances. In reality, like most of Apples stuff, it is a poorly cobbled together piece of software which will let you run your head through the wall in frustration many times you are forced to interact with it. Anyways, you need it, so if you haven't downloaded it yet, follow the setup for iOS.

Also make sure to have executed the following commands in the project folder:

npm i
npx pod-install

This will install the necessary dependencies and finish the iOS setup. XCode will build the project in the background now. This will take some time, so maybe grab a coffee ☕. You can follow the progress in the upper right corner.

Coding

Apple uses Objective-C or Swift for writing native apps. We will closely follow the docs and use Objective-C for our native module.

Writing the Bridge

The first step is to create our main custom native module header and implementation files. Create a new file called RCTARModule.h. For this:

1. Open Your React Native Project in Xcode:

• Launch Xcode.
• Open your React Native project. You should open the .xcworkspace file if you are using CocoaPods, or the .xcodeproj file if not.

1. Navigate to the Project Directory:

• In the Xcode Navigator pane, select the project directory where you want to add your native module. This is typically within the main project directory.

1. Create a New File:

• Right-click on the directory.
• Choose New File... from the context menu.

1. Select the File Type:

• In the dialog that appears, you'll be presented with several template options.
• Select Header File.
• Click Next.

1. Name the Header File:

• In the 'Name' field, enter RCTARModule.h.
• Make sure that the project is selected under Targets
• Click Create.

Now add the following content to the file:

#import <React/RCTBridgeModule.h>
@interface RCTARModule : NSObject <RCTBridgeModule>
@end

The RCT prefix stands for React Native by the way and it is convention to prepend class names with a substring in Objective-C because of missing namespacing. Now we have to create the Objective-C file. It has the same name as the header file, only with another extension, RCTARModule.m. Like before, create a new file in the same folder, but this time select Objective-C as the type. Then paste the following contents to it:

#import "RCTARModule.h"

@implementation RCTARModule

RCT_EXPORT_MODULE();

@end

There is not much going on here. Basically we only import our previously created header file (which took care of bridging) and export the module. We have have the option to change the name we export the module by passing an argument to RCT_EXPORT_MODULE, but we don't do this and stick with the default name ARModule.

Add a function

Last thing to do is to add a function which will be exposed to JavaScript. Let's add the following code to the RCTARModule.m:

#import <React/RCTLog.h>

RCT_EXPORT_METHOD(showAR:(NSString *)location)
{
 RCTLogInfo(@"Pretending to load a file named %@", location);
}

RCT_EXPORT_METHOD declares a method that JavaScript can call. This method takes a single NSString argument named location. All it does for now is log the string you pass to the method. In the next installment, we will be loading the model here instead.

Now click the play button in the upper left side and the app should be installed to your phone / simulator. Or you run into all the fun Apple specific stuff like selecting a Deveolpment Team, assigning provisioning profiles or certificates, creating an apple id ... 🤮

Conclusion

As we wrap up this part of our journey into iOS native modules with React Native, we have laid a solid foundation for integrating more complex functionalities into our app. In our next installment, we will dive deeper, moving from merely logging a file location to actually loading and manipulating models in our AR environment.