react-native-wasm

0.1.3 • Public • Published

react-native-wasm

npm

A polyfill to use WebAssembly in React Native.

This package instantiate WebAssembly in native WebView environment and make communication with React Native to simulate original behavior. Native module of React Native has limited argument types (iOS/Android) so we need to serialize/deserialize the exchanging data, which may have some overhead but will work as in web app.

NOTE: I recommend to use react-native-react-bridge rather than this, to run WebAssembly. Although it's aim is a bit different, it's built on WebView like this and it's working much more stably.

Install

npm install react-native-wasm

# <=0.59 you have to link manually.
react-native link react-native-wasm

# In iOS
cd ios && pod install

And currently you have to create bridging header manually in iOS.

https://reactnative.dev/docs/native-modules-ios#exporting-swift

Important when making third party modules: Static libraries with Swift are only supported in Xcode 9 and later. In order for the Xcode project to build when you use Swift in the iOS static library you include in the module, your main app project must contain Swift code and a bridging header itself. If your app project does not contain any Swift code, a workaround can be a single empty .swift file and an empty bridging header.

Requirements

  • react-native 0.59+ (because of Proxy support in React Native)

Usage

// index.js
import { AppRegistry } from "react-native";
import "react-native-wasm";
...

AppRegistry.registerComponent(appName, () => App);

// Foo.js
const buffer = Uint8Array.from([
	 0x00,0x61,0x73,0x6D,0x01,0x00,0x00,0x00
	,0x01,0x87,0x80,0x80,0x80,0x00,0x01,0x60
	,0x02,0x7F,0x7F,0x01,0x7F,0x03,0x82,0x80
	,0x80,0x80,0x00,0x01,0x00,0x07,0x87,0x80
	,0x80,0x80,0x00,0x01,0x03,0x61,0x64,0x64
	,0x00,0x00,0x0A,0x8D,0x80,0x80,0x80,0x00
	,0x01,0x87,0x80,0x80,0x80,0x00,0x00,0x20
	,0x00,0x20,0x01,0x6A,0x0B]);

WebAssembly.instantiate(buffer).then((res) => {
  console.log(res.instance.exports.add(3, 5)); // 8
});

TODOs

  • [x] instantiate
    • [x] Support iOS
    • [x] Support Android
    • [ ] Support importObject
  • [ ] compile
  • [ ] validate
  • [ ] WebAssembly.Instance
  • [ ] WebAssembly.Module
  • [ ] WebAssembly.Memory
  • [ ] WebAssembly.Table
  • [ ] Support bundling .wasm file

Package Sidebar

Install

npm i react-native-wasm

Weekly Downloads

6

Version

0.1.3

License

MIT

Unpacked Size

30.6 kB

Total Files

18

Last publish

Collaborators

  • inokawa