react-native-parallel
v0.0.5
Published
A react-native-threads fork, for react-native versions greater than 0.70.0
Downloads
11
Maintainers
Readme
react-native-parallel
Spawn new react native JavaScript processes for CPU intensive work outside of your main UI JavaScript process.
Despite this package's name, this isn't real 'threading', but rather multi-processing.
The main tradeoff of using this library is memory usage, as creating new JS processes
can have significant overhead. Be sure to benchmark your app's memory usage and other
resources before using this library! Alternative solutions include using runAfterInteractions
or the Interaction Manager,
and I recommend you investigate those thoroughly before using this library.
Getting started
$ npm install react-native-parallel --save
Note that with Android only the official react native modules are available from your threads (vibration, fetch, etc...). To include additional native modules in your threads, you need to deactivate module auto-linking and do manual installation.
Deactivate auto-linking
Add in your app root folder, react-native.config.js
module.exports = {
dependencies: {
'react-native-parallel': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
},
},
},
};
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-parallel
and addRNThread.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNThread.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.reactlibrary.RNThreadPackage;
to the imports at the top of the file - Add
new RNThreadPackage(mReactNativeHost)
to the list returned by thegetPackages()
method - Also note that only the official react native modules are available from your
threads (vibration, fetch, etc...). To include additional native modules in your
threads, pass them into the
RNThreadPackage
constructor after themReactNativeHost
like this:new RNThreadPackage(mReactNativeHost, new ExampleNativePackage(), new SQLitePackage())
Append the following lines to
android/settings.gradle
:include ':react-native-parallel' project(':react-native-parallel').projectDir = file('../node_modules/react-native-parallel/android')
Insert the following lines inside the dependencies block in
android/app/build.gradle
:implementation project(':react-native-parallel')
Windows
Windows support is not yet implemented.
- In Visual Studio add the
RNThread.sln
innode_modules/react-native-parallel/windows/RNThread.sln
folder to their solution, reference from their app. - Open up your
MainPage.cs
app
- Add
using Thread.RNThread;
to the usings at the top of the file - Add
new RNThreadPackage()
to theList<IReactPackage>
returned by thePackages
method
Usage
In your application code (react components, etc.):
import { Thread } from 'react-native-parallel';
// start a new react native JS process
const thread = new Thread('path/to/thread.js');
// send a message, strings only
thread.postMessage('hello');
// listen for messages
thread.onmessage = (message) => console.log(message);
// stop the JS process
thread.terminate();
In your thread code (dedicated file such as thread.js
):
import { self } from 'react-native-parallel';
// listen for messages
self.onmessage = (message) => {
}
// send a message, strings only
self.postMessage('hello');
Thread Lifecycle
- Threads are paused when the app enters in the background
- Threads are resumed once the app is running in the foreground
- During development, when you reload the main JS bundle (shake device ->
Reload
) the threads are killed
Building for Release
You will need to manually bundle your thread files for use in a production release
of your app. This documentation assumes you have a single thread file called
index.thread.js
in your project root. If your file is named differently or in
a different location, you can update the documented commands accordingly.
Note: If your single thread file is in a different location, the folder structure needs to
be replicated under ./ios
and ./android/app/src/main/assets/threads
.
./App/Workers/worker.thread.js => ./ios/App/Workers/worker.thread.jsbundle
./App/Workers/worker.thread.js => ./android/app/src/main/assets/threads/App/Workers/worker.thread.jsbundle
For iOS you can use the following command:
node node_modules/react-native/local-cli/cli.js bundle --dev false --assets-dest ./ios --entry-file index.thread.js --platform ios --bundle-output ./ios/index.thread.jsbundle
Once you have generated the bundle file in your ios folder, you will also need to add
the bundle file to you project in Xcode. In Xcode's file explorer you should see
a folder with the same name as your app, containing a main.jsbundle
file as well
as an appDelegate.m
file. Right click on that folder and select the 'Add Files to '
option, which will open up finder and allow you to select your ios/index.thread.jsbundle
file. You will only need to do this once, and the file will be included in all future
builds.
For Android create this direactory
mkdir ./android/app/src/main/assets/threads
And then you can use the following command:
node node_modules/react-native/local-cli/cli.js bundle --dev false --assets-dest ./android/app/src/main/res/ --entry-file index.thread.js --platform android --bundle-output ./android/app/src/main/assets/threads/index.thread.bundle
For convenience I recommend adding these thread building commands as npm scripts to your project.
Acknowledgements
This library is a fork of react-native-threads
at https://github.com/joltup/react-native-threads, heavily inspired by two other packages both under the name of
react-native-workers
.
The first was https://github.com/fabriciovergal/react-native-workers , and the second was https://github.com/devfd/react-native-workers
react-native-threads
follows devfd's implementation strategy as it seemed more flexible
and feature-rich to me. At the time of this writing neither library was functioning
on the latest version of react native, and neither seemed to be very actively maintained.
This library would not exist without those two reference implementations!