react-native-multithreading

Because pure JSI Modules cannot be autolinked, you must manually initialize them in MainApplication.java. Use this method if you are NOT using react-native-mmkv or other JSI libraries that require custom JSI module packaging.

1. Open MainApplication.java.
2. Import MultithreadingJSIModulePackage and JSIModulePackage.
3. In your ReactNativeHost implementation, add MultithreadingPackage to the getPackages() list.
4. Override the getJSIModulePackage() method to return a new instance of MultithreadingJSIModulePackage.

// In MainApplication.java
import com.reactnativemultithreading.MultithreadingJSIModulePackage;
import com.facebook.react.bridge.JSIModulePackage;

// ... inside ReactNativeHost implementation
@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new MultithreadingPackage());
  return packages;
}

@Override
protected JSIModulePackage getJSIModulePackage() {
  return new MultithreadingJSIModulePackage();
}

If your project already uses JSI libraries like react-native-mmkv or react-native-reanimated, you must create a custom JSI package to ensure MultithreadingModule is installed alongside them.

1. Create a new Java class (e.g., ExampleJSIPackage) in your src/main/java/... folder.
2. Extend ReanimatedJSIModulePackage.
3. Override getJSIModules to call MultithreadingModule.install(reactApplicationContext, jsContext) after calling super.getJSIModules(...).
4. In MainApplication.java, override getJSIModulePackage() to return your new custom package class.

Note: Ensure you replace com.example with your actual package name and ExampleJSIPackage with the name of the class you created.

// 1. Create your custom JSI package class
package com.example;

import com.facebook.react.bridge.JSIModuleSpec;
import com.facebook.react.bridge.JavaScriptContextHolder;
import com.facebook.react.bridge.ReactApplicationContext;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
import com.reactnativemmkv.MultithreadingModule;
import java.util.Collections;
import java.util.List;

public class ExampleJSIPackage extends ReanimatedJSIModulePackage {
    @Override
    public List<JSIModuleSpec> getJSIModules(ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext) {
        super.getJSIModules(reactApplicationContext, jsContext);
        MultithreadingModule.install(reactApplicationContext, jsContext);
        return Collections.emptyList();
    }
}

// 2. In MainApplication.java, override getJSIModulePackage
import com.example.ExampleJSIPackage;
import com.facebook.react.bridge.JSIModulePackage;

// ... inside ReactNativeHost implementation
@Override
protected JSIModulePackage getJSIModulePackage() {
  return new ExampleJSIPackage();
}

The spawnThread function allows you to run expensive calculations or blocking calls on a separate parallel runtime without freezing the main React-JS thread.

Shoot and Forget

If you do not need the result of the calculation, call spawnThread without awaiting it. The React-JS thread will continue execution immediately.

Await Results

Since spawnThread returns a Promise, you can await the result. The main React-JS thread remains unblocked (timers, callbacks, and rendering continue to function) while the custom thread processes the work.

Note: Every function called inside the thread, including the callback itself, must include the 'worklet' directive to ensure it runs on the separate thread.

// Shoot and Forget
spawnThread(() => {
  'worklet'
  // expensive calculation
})

// Await
const result = await spawnThread(() => {
  'worklet'
  // expensive calculation
  return result
})

When setting up the react-native-multithreading-example project, the metro.config.js must be configured to handle peer dependencies correctly. This prevents multiple versions of the same dependency from being loaded by blacklisting the versions located in the monorepo root and aliasing them to the versions inside the example's node_modules via extraNodeModules.

const path = require('path');
const blacklist = require('metro-config/src/defaults/exclusionList');
const escape = require('escape-string-regexp');
const pak = require('../package.json');

const root = path.resolve(__dirname, '..');
const modules = Object.keys({
  ...pak.peerDependencies,
});

module.exports = {
  projectRoot: __dirname,
  watchFolders: [root],

  resolver: {
    // Blacklist peer dependencies at the root to avoid duplicate loading
    blacklistRE: blacklist(
      modules.map(
        (m) =>
          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
      ),
    ),

    // Alias peer dependencies to the versions in the example's node_modules
    extraNodeModules: modules.reduce((acc, name) => {
      acc[name] = path.join(__dirname, 'node_modules', name);
      return acc;
    }, {}),
  },

  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};