What is the process for transmitting images from React Native to native modules?

Question

What is the process for transmitting images from React Native to native modules?

Challenge

I am facing an issue trying to send an array of locally saved images from the JavaScript side (stored in an assets folder) to both iOS and Android native sides. The native code processes the images and returns a new image successfully when using internet-based image URLs instead of local images. However, downloading each image individually is slow, especially when dealing with multiple images.

I believe the best solution would be to send the absolute paths of the images stored on the device.

What I've Attempted:

Sending image URLs (Works but not ideal as it involves downloading each image)

Potential Solutions:

One option could be to obtain an array of base64 strings for each image. However, this process seems time-consuming as the native side would need to convert each base64 string into data and then into images.
An alternative approach could involve sending the absolute URI path for each asset. Unfortunately, finding a method to retrieve this path has proved challenging, as only relative paths have been discovered so far (e.g., './assets/myImage.png')

As per the React Native documentation (https://facebook.github.io/react-native/docs/native-modules-ios.html), the native side supports JSON standard formats, including strings, numbers, booleans, arrays, objects of any type, and React callbacks/promises.

javascript android ios objective-c react-native

Answer 1

Answer №1

When retrieving a local image file on the JavaScript side, you are not actually receiving the image data itself. Instead, React Native creates a mapping of IDs to images; if you attempt to log it, you will see that it is simply just a number.

Although numbers can be sent over the bridge, this alone is insufficient. In order to access the image on the native side, you must first resolve the required image to an object that can later be converted in native code. On the JavaScript side, it would appear something like this:

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

You can then pass the resolvedImage to your native API, which will contain a dictionary object (a map) with information about the image (size, uri, etc.). In native code, you can convert the image like so:

UIImage *image = [RCTConvert UIImage:imageObj];

On Android, the process is similar, but there are no direct conversion methods available. Therefore, you will need to extract the uri from the image map object and load it from there.

Answer 2

When retrieving a local image file on the JavaScript side, you are not actually receiving the image data itself. Instead, React Native creates a mapping of IDs to images; if you attempt to log it, you will see that it is simply just a number.

Although numbers can be sent over the bridge, this alone is insufficient. In order to access the image on the native side, you must first resolve the required image to an object that can later be converted in native code. On the JavaScript side, it would appear something like this:

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

You can then pass the resolvedImage to your native API, which will contain a dictionary object (a map) with information about the image (size, uri, etc.). In native code, you can convert the image like so:

UIImage *image = [RCTConvert UIImage:imageObj];

On Android, the process is similar, but there are no direct conversion methods available. Therefore, you will need to extract the uri from the image map object and load it from there.

What is the process for transmitting images from React Native to native modules?

Answer №1

Similar questions

Tips for enabling browser back and forward functionality in a one-page website design

What is causing the malfunction in this code? (Regarding the key and value variable objects)

Restful Spinner

Navigate from the RootViewController to the NavigationController

What is the reason that setTimeout does not delay calling a function?

The module in Node.js is unable to be loaded

How can the main activity be updated to detect changes in preferences?

Obtaining a byte array using the file input method

Issue with PHP $_GET function not functioning properly in conjunction with JQuery Mobile

NPM is searching for the package.json file within the user's directory

Is there a way to avoid NetworkOnMainThreadException when utilizing Retrofit in a separate thread on Android?

Eliminate the prior click action from the document object model

Explanation of JavaScript code snippet

Best practices for working with HTML elements using JavaScript

A guide on extracting specific text from a div class

Tips for restricting additional input when maximum length is reached in an Angular app

Is there a way to display a UIDatePicker within a Popover on an iPad by utilizing Storyboard?

How can I efficiently locate identical sequences of cells in two or more arrays?

What is the best way to sequentially invoke an asynchronous function within an Observable method?

Sending a multi-dimensional array to the server using PHP via POST