React Native - Swift Native Modules

RCTSwiftBridgeModule.h

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

#define RCT_EXTERN_MODULE(objc_name, objc_supername) \
  RCT_EXTERN_REMAP_MODULE(objc_name, objc_name, objc_supername)

#define RCT_EXTERN_REMAP_MODULE(js_name, objc_name, objc_supername) \
  objc_name : objc_supername \
  @end \
  @interface objc_name (RCTExternModule) <RCTBridgeModule> \
  @end \
  @implementation objc_name (RCTExternModule) \
  RCT_EXPORT_MODULE(js_name)

#define RCT_EXTERN_METHOD(method) \
  RCT_EXTERN_REMAP_METHOD(, method)

#define RCT_EXTERN_REMAP_METHOD(js_name, method) \
  - (void)__rct_export__##method { \
    __attribute__((used, section("__DATA,RCTExport"))) \
    __attribute__((__aligned__(1))) \
    static const char *__rct_export_entry__[] = { __func__, #method, #js_name }; \
  }

SwiftReactModule.swift

import Foundation

@objc(SwiftReactModule)
class SwiftReactModule: NSObject {
    
    @objc func printMessage(message: String!) {
        println("SwiftReactModule::printMessage => \(message)")
    }
    
}

SwiftReactModuleExports.m

#import "RCTSwiftBridgeModule.h"

@interface RCT_EXTERN_MODULE(SwiftReactModule, NSObject)

RCT_EXTERN_METHOD(printMessage:(NSString *)message)

@end

• RCTSwiftBridgeModule.h - a set of macro used to assist with generation of export requirements, you need to add this to your project.
• SwiftReactModule.swift - the Swift class you want to expose to React Native
• SwiftReactModuleExports.m - the Objective-C source file that generates the necessary export requirements.

Using this method the Objective-C code file generates two categories for the given Swift module class. The first category solely exports the module and the second category exports the methods.

Please note that this will likely break in the future as it relies a bit on the internal workings of react-native. I'll try and keep it up to date.

This is great!

FYI to anyone watching this, these macros have been merged into master of react-native and they have documentation in the header files.

@robertjpayne do you have a repo example using this macros to create a UI bridge in swift?

Would love to see an example of creating an external Swift framework (since you can't create a Static library with Swift) and what needs to be done to have your methods be registered with NativeModules in a parent app.

I'm very close to this but having trouble getting the framework to compile with React whilst not conflicting with the parent project that also depends on React.

Thanks!

Josh

@joshuapinter

for those who has same confusion, if you want to create a swift external module:

• swift doesn't support library for now (xxx.a file)
• you don't even need to create an framework.
• you don't need any .xcodeproj directory

The only files you need:

1. YourModule.swift => implementation you logic in swift
2. YourModuleBridge.m => an objc files that expose your swift class/method to react via RCT_EXTERN_XXX by import RCTBridge.h
3. YourModule-Bridging-Header.h => a header file tells ios that your swift class can be access from objc.

so in your npm module, there is only a directory contains three files mentioned above.

ex: node_modules/react-native-your-module/ios/YourModule/{ x.swift, xBridge.m, x-Bridging-Header.h }

Then:

1. npm install react-native-your-module
2. open your xcode project, and find your project directory under your project's xcodeproject root. ( it's a sub-directoory, not root xcodeproject )
3. you can either directly drag your node_modules/react-native-your-module/ios/YourModule/ into it or right click on your project directory and add fileS to your project and find the node_modules/react-native-your-module/ios/YourModule/
4. on the pop up window, UNcheck Copy items if needed and select Added folders: Create groups, and you will see a new directory.
5. click your project's xcodeproject root, go to build setting and search Objective-C Bridging Header
6. specify you header location, current path is: ReactNativeProjectRoot/ios/, so in this case, you should specify ../node_modules/react-native-your-module/ios/YourModule/YourModule-Bridging-Header.h

DONE!

Maybe it can not use rnpm link for now until Apple supports swift as link library. or you may want to make a PR to rnpm to handle this case :)

EXAMPLE:

• YourModule.swift

// YourModule.swift
import Foundation

@objc(YourModule)
class YourModule: NSObject {

    @objc func YouMethod(arg1: String, arg2: Bool) -> Void {
        // --- do something
    }
}

• YourModuleBridge.m

// YourModuleBridge.m
#import "RCTBridge.h"
@interface RCT_EXTERN_MODULE(YourModule, NSObject)
//or
//@interface RCT_EXTERN_REMAP_MODULE(YourDesiredModuleNameInJS, YourModule, NSObject)

RCT_EXTERN_METHOD(YourMethod:(NSString *)arg1 arg2:(BOOL)arg2)

@end

YourModule-Bridging-Header.h

// YourModule-Bridging-Header.h

#ifndef YourModule_Bridging_Header_h
#define YourModule_Bridging_Header_h
#import "RCTBridge.h"
#import "RCTBridgeModule.h"
#import "RCTEventDispatcher.h"
#endif /* YourModule_Bridging_Header_h */

@robertjpayne what would the syntax look like for an async method with the RCTPromiseResolveBlock and RCTPromiseRejectBlock?

The documentation doesn't say anything about this and several variations I've tried have failed to work.

Does this still work?

For those who may encounter similar issues to me, you have to update few things in @zxcpoiu example.

In bridging header, you need to add "React/" when import react header files.

#import "React/RCTBridge.h"
#import "React/RCTBridgeModule.h"
#import "React/RCTEventDispatcher.h"

In your native module header (YourModuleBridge.m)

#import "React/RCTBridge.h"

Make sure In Project Build Settings, in Swift Compiler - Code Generation, Objective-C Bridging Header is set to bridging header file path relative to your project.

Pretty sure you already have a bridging header in your swift project, so you wouldn't need to create another one

@robertjpayne @zxcpoiu @oun Do any of you have a working, up-to-date example project that you could share to demonstrate this? I've followed both sets of your instructions, yet I can only get as far as:

Unhandled JS Exception: undefined is not an object (evaluating 'CalendarManager.addEvent')

It seems that my module is not being exposed to JS. I don't really have any stable source code to share as an example (I'm trying different things every few minutes and they're all not working), so really I'd just like to refer to a working example project.

Edit: Looks like I was doing everything right, just running into an undocumented error: you can't name modules by any name that begins with "RCT"!. See my repo at https://github.com/shirakaba/react-native-cfstringtokenizer for an example of an npm-distributable Swift module. Thanks to all your instructions (from 2015-2017) that helped me reach this state!

I am trying to write module in Swift and I tried 2 ways to link it to my main react-native app:

1st attempt

I tried the documentation in native modules setup but when I try to add new swift code I am getting errors when adding swift code as it written in set up section

2nd attempt

If I follow the guide I steps 1-4 and than tries to link it to my main react-native project than:

1. I don't have static library file - which I learned that swift does not support.
2. I can't link the project as describe in the example above by @zxcpoiu - I am using Xcode 10 and I don't have Objective-C Bridging Header in the build settings.

How can we integrate third party swift packages to the native modules? @robertjpayne Can you explain with example? Is there a need for adding Package.swift or Swift Package Manager would work?