How to send images from react native to native modules?

Question

Problem

I'm trying to send an array of images (saved locally on the javascript side on an assets folder) to the native side (both iOS and Android). There the native side process the images and returns a new image. This works because I've tried sending the image URL (using internet based images instead of local images) and the native code runs perfectly.

The problem is that downloading each image is such a slow process, and I would send like 10 or 15 images. I think the best way to handle this is sending absolute paths of the images within the device.

What I've tried so far:

• Sending URL of the images (Works but this is not what I'm looking for, the idea is to have the images saved on an "assets" folder instead of downloading one by one)

Ideas:

• Maybe I can get an array of base64 strings of every image, but seems like a slow task to do; in the native side I will have to convert every base64 string into data and then into images.

• It will be ideal to send the absolute uri path of each asset, but I couldn't find a way to get it (only could get like './assets/myImage.png')

According to React Native documentation (https://facebook.github.io/react-native/docs/native-modules-ios.html) the native side supports the JSON standard formats (such as string, number, boolean, arrays and objects of any type of this list, and react callback/promises)

Answer 1

When you require a local image file on the JS side you're not actually getting its data. Instead, RN creates a map of IDs to images; if you try to log it you can see that it's actually just a number.

Although numbers can be serialized over the bridge this is not enough, to be able to access the image on the native side you first need to resolve the required image to an object that you can later convert on native. On the JS side it would look something like this:

const myImage = require('./my-image.png');
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
const resolvedImage = resolveAssetSource(myImage);

You can now pass the resolvedImage to your native API, this will be a dictionary object (a map) with the image info (size, uri, etc.). On the native side you can now convert the image:

UIImage *image = [RCTConvert UIImage:imageObj];

On Android it works in a similar way, but as far as I know there are no direct conversion methods, so you'll need to extract the uri from the image map object and load it from there.