{"id":17941757,"url":"https://github.com/joltup/react-native-threads","last_synced_at":"2025-05-15T09:05:10.908Z","repository":{"id":25711383,"uuid":"103781936","full_name":"joltup/react-native-threads","owner":"joltup","description":"Create new JS processes for CPU intensive work","archived":false,"fork":false,"pushed_at":"2024-07-12T10:09:35.000Z","size":1590,"stargazers_count":769,"open_issues_count":77,"forks_count":147,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-11T16:33:29.027Z","etag":null,"topics":["concurrency","parallelism","react-native","thread","web-worker","workers"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joltup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-16T20:30:28.000Z","updated_at":"2025-04-08T07:43:33.000Z","dependencies_parsed_at":"2024-06-18T15:17:56.204Z","dependency_job_id":"773209db-5e69-460a-98f5-d6e490d1f68e","html_url":"https://github.com/joltup/react-native-threads","commit_stats":{"total_commits":71,"total_committers":15,"mean_commits":4.733333333333333,"dds":"0.46478873239436624","last_synced_commit":"e8a9d68cd9b0a7d289ead366e6a427339f875f4c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joltup%2Freact-native-threads","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joltup%2Freact-native-threads/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joltup%2Freact-native-threads/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joltup%2Freact-native-threads/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joltup","download_url":"https://codeload.github.com/joltup/react-native-threads/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248441356,"owners_count":21103978,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["concurrency","parallelism","react-native","thread","web-worker","workers"],"created_at":"2024-10-29T02:03:57.240Z","updated_at":"2025-04-11T16:34:01.970Z","avatar_url":"https://github.com/joltup.png","language":"Java","funding_links":[],"categories":["Java"],"sub_categories":[],"readme":"# react-native-threads\n\n[![npm version](https://img.shields.io/npm/v/react-native-threads.svg?style=flat-square)](https://www.npmjs.com/package/react-native-threads)\n[![downloads](https://img.shields.io/npm/dm/react-native-threads.svg?style=flat-square)](https://www.npmjs.com/package/react-native-threads)\n\nSpawn new react native JavaScript processes for CPU intensive work outside of your\nmain UI JavaScript process.\n\nDespite this package's name, this isn't real 'threading', but rather multi-processing.\nThe main tradeoff of using this library is memory usage, as creating new JS processes\ncan have significant overhead.  Be sure to benchmark your app's memory usage and other\nresources before using this library! Alternative solutions include using `runAfterInteractions`\nor the [Interaction Manager](https://facebook.github.io/react-native/docs/interactionmanager.html),\nand I recommend you investigate those thoroughly before using this library.\n\n## Getting started\n\n`$ npm install react-native-threads --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-threads`\n\n### Android\n\nFor android you will need to make a slight modification to your `MainApplication.java`\nfile.  In the `getPackages` method pass in `mReactNativeHost` to the `RNThreadPackage`\nconstructor:\n\n```java\n    @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n      return Arrays.\u003cReactPackage\u003easList(\n        new MainReactPackage(),\n        new RNThreadPackage(mReactNativeHost)  // \u003c-- Here\n      );\n    }\n```\n\nAlso note that only the official react native modules are available from your\nthreads (vibration, fetch, etc...). To include additional native modules in your\nthreads, pass them into the `RNThreadPackage` constructor after the `mReactNativeHost`\nlike this:\n`new RNThreadPackage(mReactNativeHost, new ExampleNativePackage(), new SQLitePackage())`\n\n### Manual installation\n\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-threads` and add `RNThread.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNThread.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n  - Add `import com.reactlibrary.RNThreadPackage;` to the imports at the top of the file\n  - Add `new RNThreadPackage(mReactNativeHost)` to the list returned by the `getPackages()` method\n  - Also note that only the official react native modules are available from your\n    threads (vibration, fetch, etc...). To include additional native modules in your\n    threads, pass them into the `RNThreadPackage` constructor after the `mReactNativeHost`\n    like this:\n    `new RNThreadPackage(mReactNativeHost, new ExampleNativePackage(), new SQLitePackage())`\n\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-threads'\n  \tproject(':react-native-threads').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-threads/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-threads')\n  \t```\n\n#### Windows\nWindows support is not yet implemented, but PRs are welcome if you want to give it a shot!\n\n[Read it! :D](https://github.com/ReactWindows/react-native)\n\n1. In Visual Studio add the `RNThread.sln` in `node_modules/react-native-threads/windows/RNThread.sln` folder to their solution, reference from their app.\n2. Open up your `MainPage.cs` app\n  - Add `using Thread.RNThread;` to the usings at the top of the file\n  - Add `new RNThreadPackage()` to the `List\u003cIReactPackage\u003e` returned by the `Packages` method\n\n\n## Usage\n\nIn your application code (react components, etc.):\n\n```javascript\nimport { Thread } from 'react-native-threads';\n\n// start a new react native JS process\nconst thread = new Thread('path/to/thread.js');\n\n// send a message, strings only\nthread.postMessage('hello');\n\n// listen for messages\nthread.onmessage = (message) =\u003e console.log(message);\n\n// stop the JS process\nthread.terminate();\n```\n\nIn your thread code (dedicated file such as `thread.js`):\n```javascript\nimport { self } from 'react-native-threads';\n\n// listen for messages\nself.onmessage = (message) =\u003e {\n}\n\n// send a message, strings only\nself.postMessage('hello');\n```\n\nCheck out the examples directory in this repo for demos of using `react-native-threads`\nin a functioning app!\n\n### Thread Lifecycle\n\n- Threads are paused when the app enters in the background\n- Threads are resumed once the app is running in the foreground\n- During development, when you reload the main JS bundle (shake device -\u003e `Reload`) the threads are killed\n\n### Debugging\n\nInstantiating Threads creates multiple react native JS processes and can make debugging\nremotely behave unpredictably. I recommend using a third party debugging tool like\n[Reactotron](https://github.com/infinitered/reactotron) to aid with this. Each process,\nincluding your main application as well as your thread code can connect to Reactotron\nand log debugging messages.\n\n### Building for Release\n\nYou will need to manually bundle your thread files for use in a production release\nof your app.  This documentation assumes you have a single thread file called\n`index.thread.js` in your project root.  If your file is named differently or in\na different location, you can update the documented commands accordingly.\n\n**Note**: If your single thread file is in a different location, the folder structure needs to \nbe replicated under `./ios` and `./android/app/src/main/assets/threads`.\n\n```\n./App/Workers/worker.thread.js =\u003e ./ios/App/Workers/worker.thread.jsbundle\n./App/Workers/worker.thread.js =\u003e ./android/app/src/main/assets/threads/App/Workers/worker.thread.jsbundle\n```\n\nFor iOS you can use the following command:\n\n`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`\n\nOnce you have generated the bundle file in your ios folder, you will also need to add\nthe bundle file to you project in Xcode. In Xcode's file explorer you should see\na folder with the same name as your app, containing a `main.jsbundle` file as well\nas an `appDelegate.m` file. Right click on that folder and select the 'Add Files to \u003cYour App Name\u003e'\noption, which will open up finder and allow you to select your `ios/index.thread.jsbundle`\nfile. You will only need to do this once, and the file will be included in all future\nbuilds.\n\nFor Android create this direactory\n`mkdir ./android/app/src/main/assets/threads`\n\nAnd then you can use the following command:\n\n`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`\n\nFor convenience I recommend adding these thread building commands as npm scripts\nto your project.\n\n## Example App\nIncluded in this repository is a simple example application demonstrating basic\nusage of react-native-threads. Look at `examples/SimpleExample/README.md` for\ninstructions on running it.  Here's how the app looks with the Reactotron debugger:\n\n![SimpleExample Screen Capture](https://raw.githubusercontent.com/traviskn/react-native-threads/master/media/simplethreadexample.gif)\n\n## Acknowledgements\n\nThis library was heavily inspired by two other packages both under the name of\n`react-native-workers`.\n\nThe first was https://github.com/fabriciovergal/react-native-workers ,\nand the second was https://github.com/devfd/react-native-workers\n\nI ended up going with devfd's implementation strategy as it seemed more flexible\nand feature-rich to me.  At the time of this writing neither library was functioning\non the latest version of react native, and neither seemed to be very actively maintained.\n\nThis library would not exist without those two reference implementations to guide me!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoltup%2Freact-native-threads","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoltup%2Freact-native-threads","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoltup%2Freact-native-threads/lists"}