Seamlessly Integrating Native Modules in iOS for React Native AR Apps
Tags: reactnative, ios, objectivec, arkit
Published: 2023-12-21 21:11:56

## 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](https://dev.to/9bytes/building-ar-vr-experiences-with-react-native-part-1-bridging-the-gap-with-kotlin-1dii).
- Part Two: [Integrating ARCore](https://dev.to/9bytes/navigating-the-ar-landscape-in-react-native-with-kotlin-2caj)
- Part Four: [Integrating ARKit](https://dev.to/9bytes/seamlessly-integrating-native-modules-in-ios-for-react-native-ar-apps-5alp)

The full code for this part is [here](https://github.com/Gh05d/RN3DWorldExplorer/tree/part-3).

## Prerequisites

[XCODE](https://developer.apple.com/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](https://reactnative.dev/docs/environment-setup?os=macos&platform=ios).

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

```bash
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](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html) or [Swift](https://developer.apple.com/swift/) for writing native apps. We will closely follow the [docs](https://reactnative.dev/docs/native-modules-ios) 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.

2. 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.

3. Create a New File:

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

4. Select the File Type:

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

5. 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:

```objective-c
#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:

```objective-c
#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_:

```objective-c
#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.