We are currently working on a React Native app. We get some data from the server and have to do a heavy transformation on this data before saving it to the local database (we are using Realm).

While this transformation is happening (10-20 seconds) the app cannot respond to any navigation or button presses.

What approach should be used to offload this work from the JS thread (or at least split it into manageable chunks)?

We have tried searching for multi-threaded solutions, however, they do not appear to be well supported or remended anywhere official. This leads us to believe we are missing a crucial concept.

We are currently working on a React Native app. We get some data from the server and have to do a heavy transformation on this data before saving it to the local database (we are using Realm).

While this transformation is happening (10-20 seconds) the app cannot respond to any navigation or button presses.

What approach should be used to offload this work from the JS thread (or at least split it into manageable chunks)?

We have tried searching for multi-threaded solutions, however, they do not appear to be well supported or remended anywhere official. This leads us to believe we are missing a crucial concept.

• javascript
• react-native

Share Follow asked Feb 8, 2019 at 8:31 JoshJosh 9761010 silver badges3333 bronze badges 2

• Better offload heavy data processing to Backend via API. – Harikrishnan Commented Feb 8, 2019 at 8:40
• I would agree with @Harikrishnan it is better to off load any heavy lifting to the backend rather than doing it on device. If you cannot do it on the backend and you have to do it on the device then you should perhaps consider passing it to a native module and processing it on the native side. – Andrew Commented Feb 8, 2019 at 8:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Are you familiar with Web Workers? They provide an off-thread means of running JavaScript in web pages.

If you search for "React Native Web Workers" a number of resources for acplishing this in React Native e up. Here's one example utilizing React Native's WebView ponent to provide Web Worker functionality.

Also see: Creating Web Worker in React Native Android app though it doesn't make reference to the simple WebView solution mentioned in the post above.

At the very least, you'll have to get out of JS for heavy processing. This is what native modules were build for. https://facebook.github.io/react-native/docs/native-modules-ios. Things like image processing or multi-threading, should be implemented in C++ or Swift and imported.

You can use WebAssembly with worker in backend to do heavy tasks without disturbing main thread.

For more: https://developer.mozilla/en-US/docs/WebAssembly