how do I pass image data to a native module in React Native?

Question

In my class that implements the RCTBridgeModule protocol in Xcode, I am trying to write an RCT_EXPORT_MEATHOD that I can expose to React Native code to consume image data. Currently, I can write an image to disk in React Native, and then pass the path through to the native method, but I'm wondering if there is a better technique to pass image data directly for better performance?

So instead of this:

RCT_EXPORT_METHOD(scanImage:(NSString *)path) {
  UIImage *sampleImage = [[UIImage alloc] initWithContentsOfFile:path];  
  [self processImage: UIImage];
}

Something more like this:

RCT_EXPORT_METHOD(scanImage:(NSData *)imageData) {
  [self processImageWithData: imageData];
}

score 0 · Answer 1 · answered Jun 30 '17 at 13:22

0

You can use [RCTConvert UIImage:icon] method from #import <React/RCTConvert.h>

You need to specify "schema" as "data". For more details look at the source code bellow: https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.m#L762

answered Jun 30 '17 at 13:22

Aleksandras

595
6
6

Could you add a code example how to specify this schema as data? Also there is a comment in that section saying: "This method is only used when loading images synchronously, e.g. for tabbar icons".. Are you sure about using it like this? – Tieme Jul 19 '17 at 17:13

score 0 · Answer 2 · answered Feb 13 '19 at 14:10

For me, this works:

  NSURL *url = [NSURL URLWithString:[imagePath stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]];
  UIImage *image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:url]];

imagePath is NSString comes from the react-native bridge (using react-native-image-picker's response - response.uri).

how do I pass image data to a native module in React Native?

2 Answers2