[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82887":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":15,"starSnapshotCount":15,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},82887,"react-native-runtimes","margelo\u002Freact-native-runtimes","margelo","Run heavy React Native components and business logic in isolated Hermes runtimes (without freezing your main JS thread)","https:\u002F\u002Fruntimes.margelo.com",null,"TypeScript",437,9,4,0,31,102,379,112,90,false,"main",[24,25,26,27,28,29,30,31],"library","nitro","parallel","performance","react-native","runtimes","threading","worklets","2026-06-12 04:01:39","\u003Cdiv align=\"center\">\n\n\u003Cimg src=\".\u002Fassets\u002Fimage.png\" width=\"1280\" alt=\"react-native-runtimes logo\" \u002F>\n\n# react-native-runtimes\n\n**Run heavy React Native UI and business logic in isolated Hermes runtimes — without freezing your main JS thread**\n\n[![React Native](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact%20Native-0.76%2B-61DAFB?style=flat-square&logo=react)](https:\u002F\u002Freactnative.dev)\n[![New Architecture](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNew%20Architecture-required-brightgreen?style=flat-square)](https:\u002F\u002Freactnative.dev\u002Fdocs\u002Fthe-new-architecture\u002Flanding-page)\n[![Expo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FExpo-config%20plugin-000020?style=flat-square&logo=expo)](https:\u002F\u002Fexpo.dev)\n[![Android](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAndroid-supported-3DDC84?style=flat-square&logo=android)](https:\u002F\u002Fdeveloper.android.com)\n[![iOS](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FiOS-supported-000000?style=flat-square&logo=apple)](https:\u002F\u002Fdeveloper.apple.com)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow?style=flat-square)](LICENSE)\n\n[📖 Docs](https:\u002F\u002Fruntimes.margelo.com\u002F) · [⚡ Quick Start](#getting-started) · [📦 Core](packages\u002Fcore\u002FREADME.md) · [🗂 State](packages\u002Fstate\u002FREADME.md)\n\n\u003C\u002Fdiv>\n\n---\n\n\u003Cdiv align=\"center\">\n\n\u003Ca href=\"https:\u002F\u002Fmargelo.com\">\u003Cpicture>\u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Fassets\u002Fmargelo_light.svg\">\u003Cimg src=\".\u002Fassets\u002Fmargelo_dark.svg\" height=\"48\" align=\"middle\" alt=\"Margelo\" \u002F>\u003C\u002Fpicture>\u003C\u002Fa>\n    \u003Cpicture>\u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Fassets\u002Fx_light.svg\">\u003Cimg src=\".\u002Fassets\u002Fx_dark.svg\" height=\"18\" align=\"middle\" alt=\"✕\" \u002F>\u003C\u002Fpicture>    \n\u003Ca href=\"https:\u002F\u002Fwww.callstack.com\">\u003Cpicture>\u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Fassets\u002Fcallstack_light.svg\">\u003Cimg src=\".\u002Fassets\u002Fcallstack_dark.svg\" height=\"40\" align=\"middle\" alt=\"Callstack\" \u002F>\u003C\u002Fpicture>\u003C\u002Fa>\n\n\u003Cbr\u002F>\n\n**react-native-runtimes** is built in collaboration with our friends at **[Callstack](https:\u002F\u002Fwww.callstack.com)**\n\n\u003Csub>We love fast apps ⚡ and cars 🏎️\u003C\u002Fsub>\n\n\u003C\u002Fdiv>\n\n---\n\n## What is this?\n\nReact Native gives your product one main JavaScript runtime. When a feed, chat screen, editor, reducer, or hydration job monopolizes that runtime, input, animation, and navigation all start competing for the same VM.\n\n**react-native-runtimes** adds a multi-runtime layer for React Native New Architecture apps:\n\n- mount selected React components in named secondary Hermes runtimes\n- run whole screens, headless tasks, and typed functions away from the main runtime\n- share state across isolated JS heaps through a native C++ singleton\n- prewarm runtimes before navigation so expensive surfaces are ready when users arrive\n- wire it through Metro and, for Expo, a config plugin instead of hand-written runtime plumbing\n\n```tsx\n\u002F\u002F That's it. This component now renders in its own Hermes instance.\n\u003COnRuntime name=\"chat-runtime\">\n  \u003CMessageList conversationId={conversationId} \u002F>\n\u003C\u002FOnRuntime>\n```\n\n---\n\n## What it unlocks\n\n| If your app has... | You can move... | Main runtime keeps... |\n|---|---|---|\n| A chat, feed, or inbox that janks on mount | The expensive list or route surface | Navigation, gestures, and input |\n| Reducers or stores competing with animation | Business logic in a long-lived runtime | Frame-critical UI work |\n| Slow first-open screens | A prewarmed runtime before the user taps | Predictable navigation latency |\n| Background hydration or decoding | Headless tasks on a worker runtime | Responsive startup and render |\n| State that must be visible everywhere | Native-backed shared stores | Synchronous reads without bridge round-trips |\n\n---\n\n## When to reach for it\n\n- You have one or two expensive features that repeatedly monopolize the main JS runtime.\n- You want a chat, feed, editor, map sidebar, or media-heavy route to stay alive and warm.\n- You need business logic or cache hydration to run without blocking interaction.\n- You are already on React Native New Architecture with Hermes, or you are willing to move there.\n\n## When not to use it\n\n- Your app is simple enough that memoization, virtualization, or moving work off render fixes the issue.\n- You need legacy architecture or a non-Hermes JS engine.\n- You want to pass large mutable objects or non-serializable props directly between runtimes. Pass ids\u002Fkeys and read shared data from native-backed state instead.\n\n---\n\n## Packages\n\n| Package | Description |\n|---|---|\n| [`@react-native-runtimes\u002Fcore`](packages\u002Fcore\u002FREADME.md) | Mount React components in secondary runtimes. Metro transform, `OnRuntime`, `ThreadedScreen`, headless tasks, cross-runtime function calls. |\n| [`@react-native-runtimes\u002Fstate`](packages\u002Fstate\u002FREADME.md) | Zustand-style shared store backed by a process-wide C++ singleton. Synchronous reads and commits from every runtime. |\n\n---\n\n## Core capabilities\n\n### 🧵 Zero-boilerplate threaded components\n\nWrap a component in `OnRuntime` — Metro rewrites the JSX to a registered threaded boundary at build time. No manual registration required.\n\n```tsx\nimport { OnRuntime } from '@react-native-runtimes\u002Fcore';\n\n\u003COnRuntime name=\"feed-runtime\">\n  \u003CHeavyFeedList userId={userId} \u002F>\n\u003C\u002FOnRuntime>\n```\n\n### 📱 Full-screen threaded routes\n\nFor navigation flows that should live entirely on a secondary runtime:\n\n```tsx\nimport { ThreadedScreen, threadedComponent } from '@react-native-runtimes\u002Fcore';\n\nexport const ConversationScreen = threadedComponent\u003CProps>(\n  'ConversationScreen',\n  (props) => \u003CConversationRoute {...props} \u002F>,\n);\n\n\u002F\u002F In your navigator:\n\u003CThreadedScreen\n  component={ConversationScreen}\n  props={{ conversationId }}\n  runtimeName={`chat-${conversationId}`}\n\u002F>\n```\n\n### ⚡ Runtime prewarming\n\nStart the runtime before the user navigates so there is no cold-start lag:\n\n```tsx\nimport { ThreadedRuntime } from '@react-native-runtimes\u002Fcore';\n\n\u002F\u002F e.g. when the inbox row becomes visible\nawait ThreadedRuntime.prewarm(`chat-${conversationId}`);\n```\n\n### 🏃 Headless tasks\n\nRun JS on a named runtime without mounting a view — perfect for pre-hydrating stores, decoding data, or running reducers in a long-lived worker:\n\n```tsx\n\u002F\u002F Register on the threaded bundle side:\nregisterThreadedHeadlessTask('hydrateConversation', async ({ payload }) => {\n  const messages = await loadMessages(payload.conversationId, payload.limit);\n  await messagesStore.setSubtreeState(payload.conversationId, messages, true);\n});\n\n\u002F\u002F Dispatch from anywhere:\nawait ThreadedRuntime.runHeadlessTask('hydrateConversation', {\n  runtimeName: 'chat-worker-runtime',\n  payload: { conversationId, limit: 50 },\n});\n```\n\n### 🔀 Cross-runtime function calls\n\nCall a typed function on a specific runtime and await the result — arguments and return values are JSON-serialized automatically:\n\n```tsx\nimport { call, runtimeFunction } from '@react-native-runtimes\u002Fcore';\n\nexport const fibonacci = runtimeFunction((n: number) => ({\n  input: n,\n  result: fibonacciNumber(n),\n  computedAt: new Date().toISOString(),\n}));\n\n\u002F\u002F Call it on a named runtime from the main runtime:\nconst result = await call(fibonacci).on('fibonacci-worker-runtime')(38);\n```\n\nOr use a function directive for fixed-runtime helpers — Metro rewrites the call site automatically:\n\n```tsx\nasync function refreshCache(key: string) {\n  'background'; \u002F\u002F ← directive: this function always runs on 'background' runtime\n  await cacheStore.hydrate();\n  return cacheStore.get(key);\n}\n\nconst value = await refreshCache('settings'); \u002F\u002F cross-runtime, no extra API\n```\n\n### 🗂 Shared state — synchronous, cross-heap\n\nA Zustand-style API backed by a native C++ process-wide singleton. Reads are synchronous. No bridge round-trip. Any runtime can write and every subscriber is notified.\n\n```tsx\nimport { createSharedStore } from '@react-native-runtimes\u002Fstate';\n\nexport const chatStore = createSharedStore({\n  name: 'chat',\n  initialState: { messages: {}, settings: { theme: 'dark' } },\n});\n\n\u002F\u002F Path handles for fine-grained subscriptions:\nconst roomMessages = chatStore.path\u003CMessage[]>(['messages', 'release-room']);\n\nawait roomMessages.update(items => [...(items ?? []), newMessage]);\n\n\u002F\u002F Subscribe with a selector — works in any runtime:\nconst count = roomMessages.use(items => items?.length ?? 0);\n```\n\nAdd native persistence with a single option:\n\n```tsx\nexport const preferencesStore = createSharedStore({\n  name: 'preferences',\n  initialState: { counter: { count: 0 } },\n  persist: { key: 'preferences', version: 1, subtrees: ['counter'] },\n});\n```\n\n### 🏗 Business runtimes\n\nFor an app-lifetime runtime that sees the same native modules as the main runtime, use `prewarmBusinessRuntime`:\n\n```kotlin\nThreadedRuntime.setMainReactPackagesProvider { PackageList(this).packages }\nThreadedRuntime.prewarmBusinessRuntime(applicationContext, \"business-runtime\")\n```\n\n```tsx\nif (global.__THREADED_RUNTIME_ENV__?.kind === 'business-runtime') {\n  require('.\u002Fsrc\u002FbusinessRuntimeEntry');\n}\n```\n\n### 🔌 Expo support\n\n`@react-native-runtimes\u002Fcore` ships a config plugin. No manual native edits needed:\n\n```ts\n\u002F\u002F app.config.ts\nexport default {\n  newArchEnabled: true,\n  plugins: [\n    ['@react-native-runtimes\u002Fcore', {\n      packages: ['@react-native-runtimes\u002Fstate'],\n    }],\n  ],\n};\n```\n\n---\n\n## Getting Started\n\n### 1. Install\n\n```sh\nnpm install @react-native-runtimes\u002Fcore @react-native-runtimes\u002Fstate react-native-nitro-modules\n```\n\n### 2. Configure Metro\n\n```js\n\u002F\u002F metro.config.js\nconst { getDefaultConfig, mergeConfig } = require('@react-native\u002Fmetro-config');\nconst { withThreadedRuntime } = require('@react-native-runtimes\u002Fcore\u002Fmetro');\n\nmodule.exports = withThreadedRuntime(\n  mergeConfig(getDefaultConfig(__dirname), {}),\n  { roots: ['App.tsx', 'src'], generatedDir: '.threaded-runtime' },\n);\n```\n\n### 3. Load the generated entry\n\n```js\n\u002F\u002F index.js\nif (global.__THREADED_RUNTIME_ENV__) {\n  require('.\u002F.threaded-runtime\u002Fentry');\n} else {\n  require('.\u002FApp');\n}\n```\n\n### 4. Render\n\n```tsx\nimport { OnRuntime } from '@react-native-runtimes\u002Fcore';\n\nexport default function App() {\n  return (\n    \u003COnRuntime name=\"my-runtime\">\n      \u003CHeavyComponent \u002F>\n    \u003C\u002FOnRuntime>\n  );\n}\n```\n\n→ Full setup guide: [packages\u002Fcore\u002FREADME.md](packages\u002Fcore\u002FREADME.md)\n\n---\n\n## Requirements\n\n| Requirement | Support |\n|---|---|\n| React Native | **0.76+** |\n| Architecture | New Architecture required |\n| JavaScript engine | Hermes |\n| Platforms | Android and iOS |\n| Expo | Config plugin included in `@react-native-runtimes\u002Fcore` |\n\n---\n\n## Documentation\n\n- 📖 [Hosted docs](https:\u002F\u002Fruntimes.margelo.com\u002F)\n- 📦 [Core package — full API reference](packages\u002Fcore\u002FREADME.md)\n- 🗂 [State package — shared store API](packages\u002Fstate\u002FREADME.md)\n- 🧪 [Example app](example)\n- 🏗 [Docusaurus source](website\u002Fdocs\u002Fintro.md)\n- 🤝 [Contributing guide](CONTRIBUTING.md)\n\n---\n\n## Authors\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FSzymon20000\">\n        \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FSzymon20000.png\" width=\"32\" \u002F>\u003Cbr\u002F>\n        \u003Csub>\u003Cb>Szymon Kapała\u003C\u002Fb>\u003C\u002Fsub>\n      \u003C\u002Fa>\u003Cbr\u002F>\n      \u003Ca href=\"https:\u002F\u002Fx.com\u002FTurbo_Szymon\">@Turbo_Szymon\u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fv3ron\">\n        \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fv3ron.png\" width=\"32\" \u002F>\u003Cbr\u002F>\n        \u003Csub>\u003Cb>Szymon Chmal\u003C\u002Fb>\u003C\u002Fsub>\n      \u003C\u002Fa>\u003Cbr\u002F>\n      \u003Ca href=\"https:\u002F\u002Fx.com\u002FChmalSzymon\">@ChmalSzymon\u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpioner92\">\n        \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpioner92.png\" width=\"32\" \u002F>\u003Cbr\u002F>\n        \u003Csub>\u003Cb>Alex Shumihin\u003C\u002Fb>\u003C\u002Fsub>\n      \u003C\u002Fa>\u003Cbr\u002F>\n      \u003Ca href=\"https:\u002F\u002Fx.com\u002Fpioner_dev\">@pioner_dev\u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Friteshshukla04\">\n        \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Friteshshukla04.png\" width=\"32\" \u002F>\u003Cbr\u002F>\n        \u003Csub>\u003Cb>Ritesh Shukla\u003C\u002Fb>\u003C\u002Fsub>\n      \u003C\u002Fa>\u003Cbr\u002F>\n      \u003Ca href=\"https:\u002F\u002Fx.com\u002FRiteshRk14\">@RiteshRk14\u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n---\n\n\u003Cdiv align=\"center\">\n\nMIT License · Built with ❤️ for the React Native community\n\n\u003C\u002Fdiv>\n","react-native-runtimes 是一个用于在隔离的 Hermes 运行时中执行繁重的 React Native 组件和业务逻辑的库，从而避免阻塞主线程。其核心功能包括将选定的 React 组件挂载到命名的次级 Hermes 运行时、运行整个屏幕或无头任务、通过原生 C++ 单例跨隔离 JS 堆共享状态以及预热运行时以提高用户体验。该库支持 React Native 新架构，并且与 Android 和 iOS 平台兼容，同时提供 Expo 配置插件简化集成过程。适用于需要优化性能、保持界面流畅度的应用场景，特别是在处理复杂 UI 渲染或后台计算任务时。",2,"2026-06-11 04:09:31","CREATED_QUERY"]