react-native-wasm

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.

And also check the current progress of wasm support in React Native:

• react-native-community/jsc-android-buildscripts#113
• facebook/hermes#429

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

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