Dengine for React Native JSI
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 react-native@0.63.4
yarn add react-native@0.64.0
yarn add react-native@0.65.1
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