{"id":13836088,"url":"https://github.com/cawfree/react-native-webassembly","last_synced_at":"2025-04-05T20:07:55.923Z","repository":{"id":147778315,"uuid":"616711948","full_name":"cawfree/react-native-webassembly","owner":"cawfree","description":"⚛️ 🏎 WebAssembly for React Native powered by JSI.","archived":false,"fork":false,"pushed_at":"2023-11-03T00:52:02.000Z","size":564,"stargazers_count":240,"open_issues_count":13,"forks_count":6,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-05-02T21:00:59.869Z","etag":null,"topics":["react-native","wasm","webassembly"],"latest_commit_sha":null,"homepage":"https://twitter.com/cawfree","language":"C","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/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-03-20T23:34:48.000Z","updated_at":"2024-05-02T21:00:59.870Z","dependencies_parsed_at":"2023-05-27T12:00:19.638Z","dependency_job_id":"b2d185c9-3e2d-46a8-b404-e27eb3a51b43","html_url":"https://github.com/cawfree/react-native-webassembly","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-webassembly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-webassembly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-webassembly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-webassembly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-webassembly/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393570,"owners_count":20931812,"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":["react-native","wasm","webassembly"],"created_at":"2024-08-04T15:00:35.218Z","updated_at":"2025-04-05T20:07:55.873Z","avatar_url":"https://github.com/cawfree.png","language":"C","funding_links":[],"categories":["C"],"sub_categories":[],"readme":"# react-native-webassembly\n\nThis package enables [__WebAssembly__](https://webassembly.org/) for [__React Native__](https://reactnative.dev) powered by C++ [__TurboModules__](https://reactnative.dev/docs/next/the-new-architecture/cxx-cxxturbomodules) and [__Wasm3__](https://github.com/wasm3/wasm3), a fast and universal WebAssembly runtime.\n\n[`react-native-webassembly`](https://github.com/cawfree/react-native-webassembly) provides React Native applications with the capability to execute universal [__Wasm__](https://webassembly.org/) binaries with native speed.\n\n\u003e ✏️ This project is still in __active development__. The following tasks are still remaining to be completed:\n\u003e\n\u003e - Sanitize C++ memory management practices.\n\u003e - Normalize execution and result handling of userland `export` functions.\n\u003e - Test framework implementation.\n\u003e\n\u003e [__Pull Requests are welcome!__](https://github.com/cawfree/react-native-webassembly/pulls) 🙏\n\n### 📡 Installation\n\n1. First, ensure your React Native application supports the [__New Architecture__](https://reactnative.dev/docs/new-architecture-intro):\n   - [__iOS__](https://reactnative.dev/docs/new-architecture-library-ios)\n   - [__Android__](https://reactnative.dev/docs/new-architecture-library-android)\n2. Install `react-native-webassembly`:\n\n   ```shell\n   yarn add react-native-webassembly # React Native\n   npx expo install react-native-webassembly # Expo\n   ```\n3. If you're using [__Expo__](https://expo.dev/), don't forget to run `npx expo prebuild` after installing.\n\n### ✍️ Usage\n\nThe goal of [`react-native-webassembly`](https://github.com/cawfree/react-native-webassembly) is to export a [__browser-equivalent interface__](https://developer.mozilla.org/en-US/docs/WebAssembly) to the WebAssembly API.\n\nTo initialize a new WebAssembly module, we'll need to `instantiate` an module using a buffer populated with a `.wasm` binary:\n\n```typescript\nimport axios from 'axios';\nimport * as WebAssembly from 'react-native-webassembly';\n\nimport HelloWorld from './hello-world.wasm';\n\nconst module = await WebAssembly.instantiate\u003c{\n  add: (a: number, b: number) =\u003e number;\n}\u003e(HelloWorld);\n```\n\n\u003e **Note**\n\u003e\n\u003e To import `.wasm` files directly, you will need to [update your `metro.config.js`](https://github.com/cawfree/react-native-webassembly/blob/d9d950e47277e899371a85cd430336a84d96c369/example/metro.config.js#L32).\n\nAlternatively, in the snippet below, we show how to download and instantiate the reference [__Hello World__](https://github.com/torch2424/wasm-by-example) example stored at a remote location:\n\n```typescript\nimport axios from 'axios';\nimport * as WebAssembly from 'react-native-webassembly';\n\nconst {\n  data: bufferSource,\n} = await axios({\n  url: 'https://github.com/torch2424/wasm-by-example/raw/master/examples/hello-world/demo/assemblyscript/hello-world.wasm',\n  method: 'get',\n  responseType: 'arraybuffer',\n});\n\nconst module = await WebAssembly.instantiate\u003c{\n  add: (a: number, b: number) =\u003e number;\n}\u003e(bufferSource);\n```\n\nYou'll notice that in our call to `instantiate`, we can also pass typing information for the `Exports` of the module. In this case, the `hello-world.wasm` binary exports a function to add two numbers, `add`.\n\nOnce configured, we can execute the compiled `wasm` module from our JavaScript code, using the type-safe exported interface:\n\n```typescript\nmodule.instance.exports.add(1, 2); // 3.\n```\n\nIt's also possible to declare an `importObject` to receive callbacks from the compiled module, which declares a list of callback function implementations which can be invoked by the WebAssembly runtime.\n\n\u003e **Warning**\n\u003e\n\u003e Some native modules __require__ the presence of certain function implementations. Without specifying module-specific required dependencies, instantiation will fail.\n\nFor example, the [__Circom__](https://github.com/iden3/circom) library converts arithmetic circuits used for generating, evaluating and verifying [__SNARK__](https://consensys.net/blog/developers/introduction-to-zk-snarks/)s are expressed as WASM modules which require the runtime to define an `exceptionHandler` function belonging to the namespace `runtime`.\n\nIt's simple to define an `importObject`:\n\n```typescript\nconst module = await WebAssembly.instantiate\u003c{\n  getVersion: () =\u003e number;\n  getFieldNumLen32: () =\u003e number;\n  // ...\n}\u003e(bufferSource, {\n  // Declare custom memory implementation.\n  env: {\n    memory: new WebAssembly.Memory({ initial: 32767 }),\n  },\n  // Define the scope of the import functions.\n  runtime: {\n    exceptionHandler: (value: number) =\u003e console.error(value),\n  },\n});\n```\n\nHere, we declare an `exceptionHandler` as `runtime` imports to the compiled module. Without declaring this required dependency, the module would fail to compile.\n\nYou can find a working implementation of this process in the [__Example App__](example/src/App.tsx).\n\n### 🤔 Memory\n\nCurrently, `wasm3` [__only supports a single memory region__](https://github.com/wasm3/wasm3/blob/772f8f4648fcba75f77f894a6050db121e7651a2/source/wasm3.h#L214). This means that WebAssembly files which contain multiple `memory` allocations are not currently supported.\n\n[`react-native-webassembly`](https://github.com/cawfree/react-native-webassembly) exposes access to the runtime memory element for allocated instances, which is represented using an `ArrayBuffer` named `memory`. This shares the same backing array as the native runtime.\n\nIt can accessed as follows:\n\n```typescript\nconst module = WebAssembly.instantiate(...);\n\nconst memory: ArrayBuffer | undefined = module.instance.exports.memory;\n```\n\n### ✌️ License\n[__MIT__](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-webassembly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-webassembly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-webassembly/lists"}