Swift bridging header not exporting React Native types

Question

I'm trying to create a native (iOS) module for a React Native app using Swift. I want to expose a method on the module that returns a promise, using functions of type RCTPromiseResolveBlock and RCTPromiseRejectBlock, both of which are declared in React Native's RCTBridgeModule.h header. However, my build fails with the message "Use of undeclared type..." for both of these types.

I had already created a bridging header (automatically using Xcode) for another purpose, so I believe importing React/RCTBridgeModule.h is all that I'd need to supply the types mentioned above. Presumably I've misconfigured something, as this doesn't fix the issue. I've tried setting up a fresh project and everything works as expected there, but I can't seem to find a difference that would cause my project's build to fail.

Some relevant configuration details:

• Bridging header named <ProjectName>-Bridging-Header.h and stored in my source directory. I moved it around to confirm that Xcode is finding it (the build fails differently when it's not in the right place).
• The contents of the bridging header is simply: #import <React/RCTBridgeModule.h>
• In my project build settings:
  • <ProjectName>-Bridging-Header.h is configured as the "Objective-C Bridging Header"
  • "Install Objective-C Compatibility Header" is set to "Yes"
  • "Precompile Bridging Header" is set to "Yes"
• When I type alias the missing types the project builds and runs as expected
• I have some third-party Swift libraries installed (one using react-native link and one using a Git submodule)
• I've tried cleaning the build folder, reinstalling node_modules and deleting Xcode derived data, all to no effect.

Is my project misconfigured or have I otherwise missed something important?

Answer 1

This tutorial is pretty good at explaining how to set up a native module using Swift. It breaks everything down into steps and it is quite easy to follow.

https://teabreak.e-spres-oh.com/swift-in-react-native-the-ultimate-guide-part-1-modules-9bb8d054db03

1. Setup
2. How to expose a Swift class to JS
3. How to expose static Swift data
4. How to expose a Swift method
5. How to expose a method with a callback
6. How to expose a method as a Promise
7. How to expose an Event Emitter
8. How to extract your React Native Module

Clearly it is step 6 that you are looking to do.

Here is a code example. It is very similar to what is done in the above link. Your bridging header should look like this:

// <ProjectName>-Bridging-Header.h

#import "React/RCTBridgeModule.h"
#import "React/RCTEventEmitter.h"

---

You should have files named ModuleName.m and ModuleName.swift.

// ModuleName.m
#import "React/RCTBridgeModule.h"
#import "React/RCTEventEmitter.h"
@interface RCT_EXTERN_MODULE(ModuleName, NSObject)
// this is how we expose the promise to the javascript side.
RCT_EXTERN_METHOD(functionWithPromise: (RCTPromiseResolveBlock)resolve rejecter: (RCTPromiseRejectBlock)reject)
@end

---

// ModuleName.swift

@objc(ModuleName)
class ModuleName: NSObject {
  @objc
  func constantsToExport() -> [AnyHashable : Any]! {
    return ["projectName": "ModuleName"]
  }

  @objc
  static func requiresMainQueueSetup() -> Bool {
    return true
  }

  @objc
  func functionWithPromise(
    _ resolve: RCTPromiseResolveBlock,
    rejecter reject: RCTPromiseRejectBlock
  ) -> Void {
    if (//something bad happens) {
      let error = NSError(domain: "", code: 200, userInfo: nil)
      reject("ERROR_FOUND", "failure", error)
    } else {
      resolve("success")
    }
  }
}

---

Then on the Javascript side you can access it like this:

import { NativeModules } from 'react-native'

NativeModules.Counter.functionWithPromise()
    .then(res => console.log(res))
    .catch(e => console.log(e.message, e.code))