@qlik/react-native-helium
Advanced tools
Skia-based JSI renderer for Picasso and Nebula — built on the React Native New Architecture (Fabric + TurboModules).
@qlik/react-native-helium provides a high-performance 2D canvas rendering pipeline that bridges JavaScript to native GPU-accelerated graphics via Skia. It is the rendering backbone for Picasso.js and Nebula chart visualizations in Qlik's mobile applications.
RCTViewComponentView on iOS, codegen ViewManagerDelegate on Android)CanvasView componentQuadTree for efficient tap/lasso selection| Minimum | |
|---|---|
| React Native | 0.78.x |
| React | 19.x |
| iOS | 13.4 |
| Android SDK | 33 |
| C++ (iOS) | C++20 |
| C++ (Android) | C++17 |
| NDK | 27.1.12297006 |
@qlik/carbon-core (^2.0.0)react (19.x)react-nativenpm install @qlik/react-native-helium
# or
yarn add @qlik/react-native-helium
cd ios && pod install
The podspec uses install_modules_dependencies(s) to configure Fabric and TurboModule CocoaPods dependencies automatically.
No additional steps — the com.facebook.react Gradle plugin handles autolinking and codegen.
// 1. Initialize (once, at app startup)
import { installHelium, Canvas } from "@qlik/react-native-helium";
installHelium();
// 2. Use the Canvas component
<Canvas
lasso={false}
onCanvas={(canvasApi) => {
canvasApi.addShapes([/* shape descriptors */]);
canvasApi.draw();
}}
onResized={() => { /* handle resize */ }}
/>
installHelium() calls the C++ TurboModule via TurboModuleRegistry.getEnforcing(), which installs the HeliumCanvasApi global on the JSI runtime. The Canvas component uses the codegen Fabric native component (codegenNativeComponent('CanvasView')).
To build, develop and run, please see https://github.com/qlik-oss/react-native-carbon
The Helium4/ directory contains an example app that renders a scrollable grid of Picasso.js charts.
This document provides instructions for building Harfbuzz, ICU and Skia for Android and iOS platforms.
Before building, ensure you have the following tools installed and correctly set up.
| Tool | Required For | How to Check |
|---|---|---|
| Git | Clone repositories | git --version |
| Python 3 | Meson build system | python3 --version |
| Ninja | Build system backend | ninja --version |
| CMake (≥3.18) | Android build | cmake --version |
| Meson (≥0.60) | iOS build | meson --version |
| pkg-config | Dependency discovery | pkg-config --version |
| Tool | Required For | How to Check |
|---|---|---|
| Android Studio / SDK | SDK + NDK setup | Open Android Studio > Preferences > SDK |
| Android NDK (≥23.1) | CMake builds | ls $ANDROID_HOME/ndk/ |
| Java (JDK ≥11) | Gradle + build tools | java -version |
👉 Set environment variables in your shell config (~/.zshrc or ~/.bashrc):
export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_NDK=$ANDROID_HOME/ndk/23.1.7779620
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$PATH
| Tool | Required For | How to Check |
|---|---|---|
| Xcode (≥14) | iOS SDKs + compilers | xcodebuild -version |
| Xcode Command Line Tools | clang, ar, strip | xcode-select -p |
| CocoaPods (optional) | Dependency mgmt | pod --version |
👉 Make sure SDK paths exist:
ls /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/
ls /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/
If these return valid .sdk folders (e.g., iPhoneOS18.2.sdk), you’re good.
Checkout the branch:
git clone https://github.com/harfbuzz/harfbuzz.git
cd harfbuzz
git checkout <branch>
Create a bash script (e.g., build_android.sh):
#!/bin/bash
set -o errexit -o nounset
cd build/android
cmake ../.. -DCMAKE_TOOLCHAIN_FILE=$ANDROID_NDK/build/cmake/android.toolchain.cmake -DANDROID_ABI=arm64-v8a -DANDROID_PLATFORM=android-31 -DCMAKE_BUILD_TYPE=Release -DHB_HAVE_FREETYPE=OFF -DHB_BUILD_SHARED=OFF -GNinja
ninja install
Run the script:
bash build_android.sh
⚠️ Note: Building Harfbuzz for Android using Meson currently has known issues. Prefer CMake.
Checkout the branch:
git clone https://github.com/harfbuzz/harfbuzz.git
cd harfbuzz
git checkout <branch>
Create cross files for Simulator and Device builds.
Simulator Example (ios_cross_sim.txt)
(see earlier section for full contents)
Device Example (ios_cross_dev.txt)
(same structure, but with iPhoneOS.platform SDK)
Run Meson setup:
meson setup --cross-file ios_cross_dev.txt ios_dev_arm64 -Ddefault_library=static -Dtests="disabled"
Build with Ninja:
ninja -C ios_dev_arm64
release-70-rcClone the repo & checkout branch:
git clone https://github.com/unicode-org/icu.git
cd icu
git checkout release-70-rc
Create directories:
icu/icu4c/android
icu/icu4c/macOS
Copy build script (build_icu_android.sh) into icu/icu4c/android.
Run the script:
cd icu/icu4c/android
bash build_icu_android.sh
git clone https://github.com/dbquarrel/icu4c-xcframework.git
cd icu4c-xcframework
git checkout <branch>
✅ With this, you’ll be able to build Harfbuzz and ICU for Android and iOS successfully.
Repositories:
Branch: Yet to find (update once finalized)
Clone the repository and checkout branch:
git clone https://github.com/google/skia.git
cd skia
git checkout <branch>
Sync dependencies:
python tools/git-sync-deps
Copy android_lib.sh script to the root directory of the repository.
Run the script:
bash android_lib.sh
Repositories:
Branch: Yet to find (update once finalized)
Clone the repository and checkout branch:
git clone https://github.com/google/skia.git
cd skia
git checkout <branch>
Sync dependencies:
python tools/git-sync-deps
Copy create-framework.sh script to the root directory of the repository.
Run the script:
bash create-framework.sh
android_lib.sh and create-framework.sh are updated correctly before execution.git-sync-deps.Note: where ios/headers has a copy of the skia/include folder
✅ With this guide, you can build Skia for Android and iOS.
MIT
FAQs
Skia base JSI renderer for Picasso and Nebula
We found that @qlik/react-native-helium demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.