Need help with react-native-skia?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

154 Stars 4 Forks MIT License 12 Commits 1 Opened issues


Cross platform React Native solution to draw graphics based on Skia

Services available


Need anything else?

Contributors list

# 122,255
React N...
8 commits
# 43,356
React N...
1 commit


React Native renderer based on Skia


Project State

The project is still in proof of concept and requires lots of work.

This board records TODO items for the project to production level

If you have interesting for this project, please JOIN US to make it come true!

Supported platforms

Only macOS and Linux (Ubuntu 18) is supported in the mean time, but the most implementation is cross platform. It should be easy to extend for other Skia supported platforms.

Setup instructions

Setup instruction is common for both macOS and Linux except at step 2, where different arguments will be used for gn configuration.


$ git clone
$ export PATH="$PATH:/path/to/depot_tools"

Build instructions

  1. Get the code by gclient
$ mkdir react-native-skia && cd react-native-skia
$ gclient config --name src --unmanaged[email protected]
$ gclient sync --with_branch_heads

We will use react-native-skia/src as working directory in the future steps.

$ cd /path/to/react-native-skia/src

  1. Generate build files
$ gn gen --args='mac_deployment_target="10.11.0" mac_min_system_version="10.11.0"' out/Debug

Or release build

$ gn gen --args='mac_deployment_target="10.11.0" mac_min_system_version="10.11.0" is_debug=false' out/Release

For Linux (Ubuntu 18)

$ gn gen --args='use_sysroot=false enable_vulkan=false' out/Debug

  1. Sync JavaScript packages
$ yarn
  1. Build the code
$ ninja -C out/Debug ReactSkiaApp

Build react-native JavaScript bundle

$ yarn workspace react-native-skia run react-native bundle
--platform ios
--dev false
--entry-file SimpleViewApp.js
--bundle-output ../../out/Debug/SimpleViewApp.bundle
--assets-dest ../../out/Debug

  1. Run the program
$ cd out/Debug && ./ReactSkia

Development flow

Sync & build latest code

$ git pull --rebase
$ gclient sync --with_branch_heads

Sync node modules

$ yarn

Incremental build C++ code

$ ninja -C out/Debug ReactSkiaApp

Third-party code sync

We use gclient and DEPS file to manage third party code, including react-native.

Once updating the git revision in DEPS,

gclient sync
could sync the local files accordingly. The change of DEPS could commit into git for others to have the update.

Third-party code patches

Here to list my patches for third-party code. The list should be as less as possible.

  1. react-native patch for cxx textlayoutmanager build break. (Will send a PR and hope to be fixed by upstream, then we don't have custom patch for react-native anymore)

  2. folly to support boringssl

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.