feat(🎨): version 2.0.0 (#3133)

BREAKING CHANGE:
* React 19 and React Native 0.78 minimum are required
* The `debug` and `mode` properties are now deprecated 
* `SKSGRoot` api is now async, as a result functions such as `drawAsImage` are now async as well.

---------

Co-authored-by: Saad Najmi <[email protected]>
Co-authored-by: kewde <[email protected]>

Author: 3 people

.github/workflows/ci.yml

@@ -129,22 +129,22 @@ jobs:
 
       - name: Install Android SDK
         run: |
-          echo "sdk.dir=$ANDROID_HOME" > $GITHUB_WORKSPACE/apps/paper/android/local.properties
+          echo "sdk.dir=$ANDROID_HOME" > $GITHUB_WORKSPACE/apps/example/android/local.properties
 
       - name: Cache Gradle
         uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
         with:
           path: |
             ~/.gradle/wrapper
             ~/.gradle/caches
-          key: ${{ runner.os }}-gradle-${{ hashFiles('./apps/paper/android/gradle/wrapper/gradle-wrapper.properties') }}
+          key: ${{ runner.os }}-gradle-${{ hashFiles('./apps/example/android/gradle/wrapper/gradle-wrapper.properties') }}
             ${{ runner.os }}-gradle-
 
       - name: Build example for Android
         env:
           JAVA_OPTS: "-XX:MaxHeapSize=6g"
         run: |
-          yarn turbo run build:android --concurrency 1 --filter=paper --force
+          yarn turbo run build:android --concurrency 1 --filter=example --force
 
   build-android:
     runs-on: macos-latest-large
@@ -191,16 +191,15 @@ jobs:
 
       - name: Install Android SDK
         run: |
-          echo "sdk.dir=$ANDROID_HOME" > $GITHUB_WORKSPACE/apps/paper/android/local.properties
-          echo "sdk.dir=$ANDROID_HOME" > $GITHUB_WORKSPACE/apps/fabric/android/local.properties
+          echo "sdk.dir=$ANDROID_HOME" > $GITHUB_WORKSPACE/apps/example/android/local.properties
 
       - name: Cache Gradle
         uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
         with:
           path: |
             ~/.gradle/wrapper
             ~/.gradle/caches
-          key: ${{ runner.os }}-gradle-${{ hashFiles('./apps/paper/android/gradle/wrapper/gradle-wrapper.properties') }}-${{ hashFiles('./apps/fabric/android/gradle/wrapper/gradle-wrapper.properties') }}
+          key: ${{ runner.os }}-gradle-${{ hashFiles('./apps/example/android/gradle/wrapper/gradle-wrapper.properties') }}
           restore-keys: |
             ${{ runner.os }}-gradle-
 
@@ -215,17 +214,14 @@ jobs:
         env:
           cache-name: cache-apk
         with:
-          path: apps/paper/android/app/build/outputs/apk/debug/app-debug.apk
+          path: apps/example/android/app/build/outputs/apk/debug/app-debug.apk
           key: apk-${{ github.sha }}
 
   test-android:
     needs: build-android
     runs-on: macos-latest-large
     env:
       TURBO_CACHE_DIR: .turbo/android
-    strategy:
-      matrix:
-        working-directory: [apps/paper]
     steps:
       - name: checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
@@ -241,7 +237,7 @@ jobs:
         id: cache-apk
         uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
         with:
-          path: ${{ matrix.working-directory }}/android/app/build/outputs/apk/debug/app-debug.apk
+          path: apps/example/android/app/build/outputs/apk/debug/app-debug.apk
           key: apk-${{ github.sha }}
 
       - name: SKDs - download required images
@@ -258,35 +254,31 @@ jobs:
         timeout-minutes: 10
 
       - name: Start Package Manager
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/example/
         run: E2E=true yarn start &
 
       - name: Check APK existence
         uses: andstor/file-existence-action@076e0072799f4942c8bc574a82233e1e4d13e9d6 # v3.0.0
         with:
-          files: ${{ matrix.working-directory }}/android/app/build/outputs/apk/debug/app-debug.apk
+          files: apps/example/android/app/build/outputs/apk/debug/app-debug.apk
           fail: true
 
       - name: Install APK
-        run: adb install -r ${{ matrix.working-directory }}/android/app/build/outputs/apk/debug/app-debug.apk
+        run: adb install -r apps/example/android/app/build/outputs/apk/debug/app-debug.apk
 
       # - name: Set up environment
       #   run: echo "PACKAGE_NAME=${{ env.PACKAGE_NAME }}" >> $GITHUB_ENV
       - name: Launch APK
         env:
-          PACKAGE_NAME: ${{ matrix.working-directory == 'fabricexample' && 'com.fabricexample' || 'com.paper' }}  
+          PACKAGE_NAME: 'com.microsoft.reacttestapp'
         run: adb shell monkey -p ${{ env.PACKAGE_NAME }} 1  
 
       # On fabric, the system fonts are slightly different
       # so wont run the paragraph tests there for now
       - name: Run e2e Tests
         working-directory: packages/skia
         run: |
-          if [ "${{ matrix.working-directory }}" = "apps/paper" ]; then
-            CI=true yarn e2e
-          elif [ "${{ matrix.working-directory }}" = "apps/none" ]; then
-            CI=true yarn e2e --testPathIgnorePatterns Paragraphs
-          fi
+          CI=true yarn e2e --testPathIgnorePatterns Paragraphs
 
       - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         if: failure()
@@ -332,15 +324,15 @@ jobs:
           fi
 
       - name: Install CocoaPods
-        working-directory: apps/paper/ios
+        working-directory: apps/example/ios
         run: pod install
 
       - name: Start Package Manager
-        working-directory: apps/paper
+        working-directory: apps/example
         run: E2E=true yarn start &
 
       - name: Build example for iOS
-        working-directory: apps/paper
+        working-directory: apps/example
         run: yarn ios --simulator 'iPhone 16 Pro'
 
       - name: Run e2e tests

apps/docs/docs/getting-started/installation.md

@@ -9,18 +9,14 @@ React Native Skia brings the [Skia Graphics Library](https://skia.org/) to React
 Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox, Firefox OS, and many other products.
 
 **Version compatibility:**
-`react-native@>=0.71` and `react@>=18` are required. <br />
+`react-native@>=0.79` and `react@>=19` are required. <br />
 In addition you should make sure you're on at least `iOS 13` and `Android API level 21` or above. <br />
-To use React Native Skia with the new architecture, `react-native@>=0.72` is required. <br />
 To use React Native Skia with video support, `Android API level 26` or above is required.
 
-For `react-native@>=0.78` and `react@>=19`, you need to use `@shopify/react-native-skia@next`.
+For `react-native@<=0.78` and `react@<=18`, you need to use `@shopify/react-native-skia` version `1.12.4` or below.
 
 `tvOS >= 13` is also supported.
 
-Skia has a new experimental backend named Graphite which runs on Vulkan and Metal.
-We currently are working on a new version of React Native Skia that uses this new backend.
-For Graphite to run, you will need to use `Android API level 26` and `iOS 15.1` or above.
 
 **Install the library using yarn:**
 

apps/docs/docs/shapes/atlas.md

@@ -47,7 +47,7 @@ rsxForm = Skia.RSXformFromRadians(1, r, 100, 0, 125, 25);
 In the example below, we draw in simple rectangle as an image.
 Then we display that rectangle 150 times with a simple transformation applied to each rectangle.
 
-```tsx twoslash
+```tsx
 import {Skia, drawAsImage, Group, Rect, Canvas, Atlas, rect} from "@shopify/react-native-skia";
 
 const size = { width: 25, height: 11.25 };
@@ -56,7 +56,7 @@ const imageSize = {
     width: size.width + strokeWidth,
     height: size.height + strokeWidth,
 };
-const image = drawAsImage(
+const image = await drawAsImage(
     <Group>
     <Rect
         rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}

apps/docs/docs/snapshot-views.md

@@ -18,7 +18,7 @@ If the view is optimized away, `makeImageFromView` will crash or return the wron
 
 
 
-```tsx twoslash
+```tsx
 import { useState, useRef } from "react";
 import { View, Text, PixelRatio, StyleSheet, Pressable } from "react-native";
 import type { SkImage } from "@shopify/react-native-skia";

apps/docs/package.json

@@ -27,11 +27,11 @@
     "file-loader": "^6.2.0",
     "its-fine": "^1.0.8",
     "prism-react-renderer": "^2.4.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.75.2",
-    "react-native-gesture-handler": "^2.18.1",
-    "react-native-reanimated": "^3.15.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.78.0",
+    "react-native-gesture-handler": "^2.24.0",
+    "react-native-reanimated": "^3.0",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
@@ -45,7 +45,7 @@
     "ts-morph": "^25.0.1",
     "ts-node": "^10.9.2",
     "twoslash-cli": "1.3.24",
-    "typescript": "5.1.6"
+    "typescript": "^5.2.2"
   },
   "resolutions": {
     "@typescript-eslint/eslint-plugin": "6.10.0",

apps/fabric/.eslintrc renamed to apps/example/.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": "react-native-wcandillon",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig.json"
   },

apps/example/.gitignore

@@ -0,0 +1,16 @@
+*.binlog
+*.hprof
+*.xcworkspace/
+*.zip
+.DS_Store
+.gradle/
+.idea/
+.vs/
+.xcode.env
+Pods/
+build/
+dist/*
+!dist/.gitignore
+local.properties
+msbuild.binlog
+node_modules/

apps/fabric/.watchmanconfig renamed to apps/example/.watchmanconfig

@@ -0,0 +1,43 @@
+buildscript {
+    apply(from: {
+        def searchDir = rootDir.toPath()
+        do {
+            def p = searchDir.resolve("node_modules/react-native-test-app/android/dependencies.gradle")
+            if (p.toFile().exists()) {
+                return p.toRealPath().toString()
+            }
+        } while (searchDir = searchDir.getParent())
+        throw new GradleException("Could not find `react-native-test-app`");
+    }())
+
+    repositories {
+        mavenCentral()
+        google()
+    }
+
+    dependencies {
+        getReactNativeDependencies().each { dependency ->
+            classpath(dependency)
+        }
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url({
+                def searchDir = rootDir.toPath()
+                do {
+                    def p = searchDir.resolve("node_modules/react-native/android")
+                    if (p.toFile().exists()) {
+                        return p.toRealPath().toString()
+                    }
+                } while (searchDir = searchDir.getParent())
+                throw new GradleException("Could not find `react-native`");
+            }())
+        }
+        mavenCentral()
+        google()
+    }
+}

apps/example/android/build.gradle

@@ -0,0 +1,57 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the Gradle Daemon. The setting is
+# particularly useful for configuring JVM memory settings for build performance.
+# This does not affect the JVM settings for the Gradle client VM.
+# The default is `-Xmx512m -XX:MaxMetaspaceSize=256m`.
+org.gradle.jvmargs=-Xmx2g -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will fork up to org.gradle.workers.max JVMs to execute
+# projects in parallel. To learn more about parallel task execution, see the
+# section on Gradle build performance:
+# https://docs.gradle.org/current/userguide/performance.html#parallel_execution.
+# Default is `false`.
+#org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+# Jetifier randomly fails on these libraries
+android.jetifier.ignorelist=hermes-android,react-android
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+# Note that this is incompatible with web debugging.
+newArchEnabled=true
+bridgelessEnabled=true
+hermesEnabled=true
+
+# Uncomment the line below to build React Native from source.
+#react.buildFromSource=true
+
+# Version of Android NDK to build against.
+#ANDROID_NDK_VERSION=26.1.10909125
+
+# Version of Kotlin to build against.
+#KOTLIN_VERSION=1.8.22
+
+hermesEnabled=true
+react.minSdkVersion=26