JSI-based implementation of a bridge to mobile React Native platform including static libraries for iOS and Android.

Installation

yarn add @eversurf/dengine-rn-jsi

iOS

Requirements: Xcode 12.5

cd ios && pod install && cd ..

On iOS, the library is installed automatically. However, currently it is not possible to autoinstall more than one JSI library. In order to use lib-react-native-jsi and react-native-reanimated simultaneously, you need to enable DONT_AUTOINSTALL_* flags in Podfile and register JSI bindings in jsExecutorFactoryForBridge method:

Podfile

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['OTHER_CPLUSPLUSFLAGS'] = '-DDONT_AUTOINSTALL_REANIMATED -DDONT_AUTOINSTALL_TONCLIENTJSI'
    end
  end
end

Note: Don't forget to run pod install after doing that.

Then, rename AppDelegate.m to AppDelegate.mm in order to compile this file as Objective-C++.

Note: It's important to do it with Xcode, so that the project references are updated accordingly.

AppDelegate.mm

Android

Requirements: Android NDK 26.0.10792818

android/build.gradle

Setup

Blob support

In React Native app, you can load any resource as JS Blob (binary large object) using fetch function and blob method:

const url = '...'; // path to a local file or a remote resource
const response = await fetch(url);
const blob = await response.blob();

Then you can create an object URL for the provided blob:

const objectURL = URL.createObjectURL(blob);

Note: On Android, it is necessary to register BlobProvider as a ContentProvider in order to create object URLs for blobs (see details). On iOS, there is no additional configuration required.

Finally, you can pass the object URL directly as source prop of React Native <Image /> component:

<Image source={{ uri: objectURL }} />

Note: There is a problem with accessing blobs greater than 64 KB on Android (see this issue) on React Native 0.64.2 and earlier. Please use React Native 0.65.0+ or alternatively build older version of React Native from sources with the fix from this pull request.

It is also possible to pass blob object URL directly as source prop of <Pdf /> component from react-native-pdf:

<Pdf source={{ uri: objectURL }} />

Note: The above requires this pull request which has not been merged yet.

Note: It is advisable to keep the reference to the Blob object as long as its object URL is used with other components. Otherwise, the JavaScript garbage collector may collect the JS Blob object and consequently deallocate the memory associated with this blob (both on Android and iOS). This will lead to a crash due to bad memory access when the component tries to access blob data again, for example during UI interaction or re-render.

After you're done with the object URL, don't forget to revoke it:

URL.revokeObjectURL(objectURL);

Note: Currently, the React Native implementation does nothing, but this function is still a part of URL API.

This library provides two ways of transferring large binary payloads between React Native and TON SDK:

• as base64-encoded JS strings
• as raw binary JS Blobs

You can pass each request param individually either as a string or a blob to lib.sendRequestParams method and consequently to any of TON Client JS bindings. All JS Blobs in the request params will be resolved and converted to base64-encoded strings and then JSON-serialized on a worker thread to avoid UI freezes before calling tc_request_ptr function from TON SDK.

By default, if there is any JS Blob in the request params, then all strings in the response params will also be converted to JS Blobs. Otherwise, all strings will be returned as regular JS strings.

You can override this behaviour by passing additional parameter response_binary_type in the request params with either of following values:

• base64 – all string response params will be returned as original strings returned from TON SDK

• blob – all string response params will decoded from base64 and returned as raw binary JS Blobs

Development

First, install the dependencies in lib-react-native-jsi directory:

cd packages/lib-react-native-jsi
yarn install

The library comes with example apps for different versions of React Native. Before running each example app, it is necessary to install its dependencies using yarn install as well as its CocoaPods dependencies using pod install in ios directory.

cd example63
yarn install
cd ios
pod install
cd ..

Then you can build and run the example app on Android or iOS with the following commands:

yarn react-native start
yarn react-native run-android
yarn react-native run-ios

Please remember to set appropriate version of React Native in lib-react-native-jsi when developing example63, example64 and example65 apps using the following commands:

cd lib-react-native-jsi
yarn add [email protected]
yarn add [email protected]
yarn add [email protected]

Testing

For testing purposes, use tests-lib-react-native-jsi tests runner.

First pack the dependent libraries into *.tgz archives:

cd packages/core
npm i
npx tsc
npm pack

cd ../tests
npm i
npx tsc
npm pack

cd ../lib-react-native-jsi
yarn install
npm pack

Then, install the dependencies from *.tgz archives:

cd ../tests-react-native-jsi
npm add file:../core/dengine-js-1.30.1.tgz
npm add file:../tests/dengine-tests-1.30.1.tgz
npm add file:../lib-react-native-jsi/dengine-rn-jsi-1.30.1.tgz
npm i
cd ios
pod install
cd ..

Note: Please update the version in the filenames appropriately.

Finally, you can launch the tests runner with the following commands:

node run ios
node run android