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

What is the method for retrieving the fixed information?

Mysterious data organization - transform into an object

Issues with CSS properties not functioning correctly within the class.col function

Utilize the capabilities of the Dropbox Core API in Javascript to effortlessly transfer and store files on

Patience is key when waiting for both subscriptions to be completed before proceeding with an

Determining the typing of a function based on a specific type condition

The Node.js error message "Module not found"

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

Utilizing Dropzone for file uploads in Node.js, Express, and Angular

Trigger the function upon displaying the modal

Instead of modifying the selected class, jQuery generates inline styles

Troubleshooting a Vue.js issue: How to fix a watch function that stops working after modifying

React state change is causing a functional component to not re-render

Connecting a Kendo Dropdown menu to external data sources for seamless integration

Utilizing the Power of Mui Datatable to Enhance User Experience with Repeatable Edit and Delete

What might be the reason my $q.defer().resolve is not functioning properly?

Terminate multiple axios requests using a common CancelToken

Incorporating CSS styles for attributes in React Material UI

How to Access a Method from Controller 2 in AngularJS Controller One

What is causing the presence of NaN?