Скачать или смотреть Exposing Promised Functions from Native to JavaScript in React Native JSI

Discover how to seamlessly call asynchronous functions from native code in your React Native iOS applications using JSI.
---
This video is based on the question https://stackoverflow.com/q/70880175/ asked by the user 'iUrii' ( https://stackoverflow.com/u/979986/ ) and on the answer https://stackoverflow.com/a/70880176/ provided by the user 'iUrii' ( https://stackoverflow.com/u/979986/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React Native JSI: How to call expose a promised function from native to javascript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Exposing Promised Functions from Native to JavaScript in React Native JSI

When developing applications with React Native, especially on iOS, there are times when you may need to utilize native functionalities—in particular, custom asynchronous functions that can work similarly to the built-in fetch API. For instance, you might want to make network requests using a specialized native fetch function. If you're looking to expose asynchronous functions from native to JavaScript, React Native's JavaScript Interface (JSI) offers a robust solution.

In this guide, we'll go through how to implement this using the React Native JSI, allowing you to call your custom native fetch functions from JavaScript effortlessly.

Understanding the Problem

In a typical scenario where you want to use a native function from JavaScript, the challenge is ensuring that this function can handle asynchronous operations, such as HTTP requests. You want the function to return promises like the native fetch, so that it can be awaited in JavaScript. This is especially important for network requests, where success and error handling rely heavily on promise architecture.

Overview of the Solution

To bridge this gap, we will employ the Promise object in the React Native runtime to create a custom function in native code that behaves like JavaScript's fetch. We will specifically use NSURLSession from Objective-C to handle the HTTP requests asynchronously.

Step-by-Step Implementation

1. Creating the Native Function

Open your AppDelegate.mm file, which is where you will implement the native function:

[[See Video to Reveal this Text or Code Snippet]]

2. Setting Up the JavaScript Side

Once you have defined the native function, the next step is to call this function from your JavaScript code. This would usually be done in your App.js file:

[[See Video to Reveal this Text or Code Snippet]]

3. Expected Output

When you run the code above, you can expect outputs resembling the following:

[[See Video to Reveal this Text or Code Snippet]]

4. Important Note

While using JSI for synchronous native method access, keep in mind that remote debugging (like with Chrome) may no longer be possible. Instead, it's recommended to use Flipper for effective debugging of your JavaScript code.

Conclusion

Exposing promised functions from native code to JavaScript in your React Native application can greatly enhance your app's performance and capabilities. Using React Native JSI, you can create a seamless connection between native and JavaScript code, allowing for smoother asynchronous operations that replicate standard functionalities like fetch. Whether you’re fetching data from the network or performing native operations, this approach gives you the flexibility and power to enhance your iOS application.

Utilize this guide to implement your own custom async functionalities and enhance your React Native applications today!