Skip to content

Instantly share code, notes, and snippets.

@robertjpayne
Last active January 17, 2024 11:43
Show Gist options
  • Save robertjpayne/855fdb15d5ceca12f6c5 to your computer and use it in GitHub Desktop.
Save robertjpayne/855fdb15d5ceca12f6c5 to your computer and use it in GitHub Desktop.
React Native - Swift Native Modules
#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 }; \
}
import Foundation
@objc(SwiftReactModule)
class SwiftReactModule: NSObject {
@objc func printMessage(message: String!) {
println("SwiftReactModule::printMessage => \(message)")
}
}
#import "RCTSwiftBridgeModule.h"
@interface RCT_EXTERN_MODULE(SwiftReactModule, NSObject)
RCT_EXTERN_METHOD(printMessage:(NSString *)message)
@end
@robertjpayne
Copy link
Author

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

@nmn
Copy link

nmn commented Apr 22, 2015

This is great!

@robertjpayne
Copy link
Author

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

@sibelius
Copy link

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

@joshuapinter
Copy link

joshuapinter commented Mar 24, 2016

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

@zxcpoiu
Copy link

zxcpoiu commented Apr 11, 2016

@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 */

@amsul
Copy link

amsul commented Oct 7, 2016

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

@ugiacoman
Copy link

Does this still work?

@oun
Copy link

oun commented Nov 27, 2017

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.

@tirrorex
Copy link

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

@shirakaba
Copy link

shirakaba commented May 19, 2018

@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!

@b-asaf
Copy link

b-asaf commented Jan 15, 2019

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.

@Archish27
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment