colinramsay.co.uk

React Native - Super Simple Native Module Example

27 Mar 2015

UPDATE: The API for this changed slightly on 9th April. Rather than using just RCT_EXPORT you must use RCT_EXPORT_MODULE for the class and RCT_EXPORT_METHOD on the methods you want to export. The article has been amended to reflect this.

For whatever reason, you want to send a string from the Obj-C side down to React Native. One example might be to do something with the device’s file system, like retrieve the path of a resource or document. In Xcode, use File > New > File… to create a new Cocoa Touch class that extends NSObject. I’ve called the class SomeString:

//  SomeString.h

#import "RCTBridgeModule.h"

@interface SomeString : NSObject<RCTBridgeModule>

@end

//  SomeString.m
#import "SomeString.h"

@implementation SomeString

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(get:(RCTResponseSenderBlock)callback)
{ 
  // Change this depending on what you want to retrieve:
  NSString* someString = @"something";
  
  callback(@[someString]);
}

@end

RCT_EXPORT makes the method available to React Native. Notice that we need to use a callback in order to send a value back to JS, we can’t just return it from the method. That means that the calling JavaScript looks like this:

var ss = require('NativeModules').SomeString;

ss.get(someString => {
    console.log(someString);
});

If you’ve got the Chrome Debugger open (press CMD+D in the Simulator to pop it open) then you’ll see your string logged in the console. Easy peasy!

Feedback or questions on this post? Create an issue on GitHub.