Feature/skia m99 (#165)

* Updated to Skia branch chrome/m99

* Updated API to Skia Chrome/M99

* Updated podspec to link against xcframeworks

* Updated build system to build for Apple Silicon M1 Simulator

- Added use of xcframeworks to be able to package archs and platforms correctly
- Fixed build in Skia iOS to correctly build for arc and platform
- Updated configuration with more flexible setup and typed structs.
- Removed android aar build script

* Moved building frameworks to the build-skia-ios step

* Updated to run build ios frameworks

* Removed arm64 from excluded archs in release build for simulator

* - Added clean step for Skia
- Added README update for upgrading Skia

* Changed build scripts to be manually triggered

- Releasing NPM packages are now manually triggered
- Building SKIA is now manually triggered.

* Fixed wrong path in clean

* Fixed lint issue in Skia.ts

* Commented out arm (32 bit) arc for iOS Skia build

Co-authored-by: William Candillon <william.candillon@shopify.com>

.github/workflows/build-npm.yml

@@ -1,8 +1,5 @@
 name: Build NPM Package
-on:
-  push:
-    branches:
-      - main
+on: workflow_dispatch
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/build-skia.yml

@@ -1,10 +1,5 @@
 name: Build SKIA
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - externals/**
+on: workflow_dispatch
 jobs:
   build:
     #runs-on: ubuntu-latest
@@ -52,9 +47,9 @@ jobs:
           ANDROID_NDK: ${{ steps.setup-ndk.outputs.ndk-path }}
         run: yarn build-skia
 
-      - name: Build Skia iOS Fat libs
+      - name: Build Skia iOS xcframeworks
         working-directory: ${{ env.WORKING_DIRECTORY }}/
-        run: yarn build-skia-ios-fatlibs
+        run: yarn build-skia-ios-frameworks
 
       - name: Upload artifacts - Android arm
         uses: actions/upload-artifact@v2
@@ -92,11 +87,11 @@ jobs:
             ${{ env.WORKING_DIRECTORY }}/externals/skia/out/android/x64/libskshaper.a
             ${{ env.WORKING_DIRECTORY }}/externals/skia/out/android/x64/libsvg.a
 
-      - name: Upload artifacts - iOS Fat Libs
+      - name: Upload artifacts - iOS xcframeworks
         uses: actions/upload-artifact@v2
         with:
-          name: skia-ios-fat-libs
+          name: skia-ios-xcframeworks
           path: |
-            ${{ env.WORKING_DIRECTORY }}/package/libs/ios/libskia.a
-            ${{ env.WORKING_DIRECTORY }}/package/libs/ios/libskshaper.a
-            ${{ env.WORKING_DIRECTORY }}/package/libs/ios/libsvg.a
+            ${{ env.WORKING_DIRECTORY }}/package/libs/ios/libskia.xcframework
+            ${{ env.WORKING_DIRECTORY }}/package/libs/ios/libskshaper.xcframework
+            ${{ env.WORKING_DIRECTORY }}/package/libs/ios/libsvg.xcframework

README.md

@@ -6,7 +6,7 @@ Checkout the full documentation [here](https://shopify.github.io/react-native-sk
 
 React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and Firefox OS, and many other products.
 
-*This is an alpha release. Use with caution.*
+_This is an alpha release. Use with caution._
 
 ## Installation
 
@@ -30,7 +30,9 @@ npm install https://github.com/Shopify/react-native-skia/releases/download/v0.1.
 
 Run `pod install` on the `ios/` directory.
 
-You will need to disable Bitcode in order to create a release build: `Build Settings > Build Options > Enable Bitcode -> Release -> No`. In Expo managed apps, set `ios.bitcode` to `false` in `app.json`.
+| NOTE: Device builds now includes Bitcode generation on iOS - so there is no longer necessary to build with bitcode disabled for release builds.
+
+| You can re-enable Bitcode if it was previously disabled: `Build Settings > Build Options > Enable Bitcode -> Release -> Yes`. In Expo managed apps, set `ios.bitcode` to `true` in `app.json`.
 
 ### Android
 
@@ -53,7 +55,6 @@ For error **_CMake 'X.X.X' was not found in SDK, PATH, or by cmake.dir property.
 open _Tools > SDK Manager_, switch to the _SDK Tools_ tab.
 Find `CMake` and click _Show Package Details_ and download compatiable version **'X.X.X'**, and apply to install.
 
-
 ### Playground
 
 We have an example project you can play with [here](https://github.com/Shopify/react-native-skia/tree/main/example).
@@ -68,7 +69,6 @@ To run the example project on iOS, you will need to run `pod install` and on And
 
 ## Hello World
 
-
 React Native Skia has two APIs: a declarative API available as a React Native Renderer and an imperative API backed by JSI.
 The recommended way to use this library is via the declarative API.
 Library developers may take advantage of the imperative API to provide custom features.
@@ -78,7 +78,7 @@ Library developers may take advantage of the imperative API to provide custom fe
 ### Example
 
 ```tsx twoslash
-import {Canvas, Circle, Group} from "@shopify/react-native-skia";
+import { Canvas, Circle, Group } from "@shopify/react-native-skia";
 
 export const HelloWorld = () => {
   const width = 256;
@@ -89,12 +89,7 @@ export const HelloWorld = () => {
       <Group blendMode="multiply">
         <Circle cx={r} cy={r} r={r} color="cyan" />
         <Circle cx={width - r} cy={r} r={r} color="magenta" />
-        <Circle
-          cx={width/2}
-          cy={height - r}
-          r={r}
-          color="yellow"
-        />
+        <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
       </Group>
     </Canvas>
   );
@@ -106,7 +101,12 @@ export const HelloWorld = () => {
 ### Example
 
 ```tsx twoslash
-import {Skia, BlendMode, SkiaView, useDrawCallback} from "@shopify/react-native-skia";
+import {
+  Skia,
+  BlendMode,
+  SkiaView,
+  useDrawCallback,
+} from "@shopify/react-native-skia";
 
 const paint = Skia.Paint();
 paint.setAntiAlias(true);
@@ -128,11 +128,9 @@ export const HelloWorld = () => {
     // Yellow Circle
     const yellow = paint.copy();
     yellow.setColor(Skia.Color("yellow"));
-    canvas.drawCircle(width/2, height - r, r, yellow);
+    canvas.drawCircle(width / 2, height - r, r, yellow);
   });
-  return (
-    <SkiaView style={{ flex: 1 }} onDraw={onDraw} />
-  );
+  return <SkiaView style={{ flex: 1 }} onDraw={onDraw} />;
 };
 ```
 
@@ -170,6 +168,16 @@ And then the _SDK Location_ section. It will show you the NDK path, or the optio
 - Copy Skia headers `yarn copy-skia-headers`
 - Run pod install in the example project
 
+### Upgrading
+
+If a new version of Skia is included in an upgrade of this library, you need to perform a few extra steps before continuing:
+
+1. Update submodules: `git submodule update --recursive`
+2. Copy Skia Headers: `yarn copy-skia-headers`
+3. Clean Skia: `yarn clean-skia`
+4. Build Skia: `yarn build-skia`
+5. Run pod install in the example project
+
 ### Publishing
 
 - Run the commands in the `Building` section

example/ios/RNSkia.xcodeproj/project.pbxproj

@@ -564,7 +564,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -630,7 +630,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

package.json

@@ -15,21 +15,14 @@
     "typescript": "^4.4.4"
   },
   "scripts": {
-    "build-skia-ios-arm": "ts-node ./scripts/build-skia.ts ios arm",
-    "build-skia-ios-arm64": "ts-node ./scripts/build-skia.ts ios arm64",
-    "build-skia-ios-x64": "ts-node ./scripts/build-skia.ts ios x64",
-    "build-skia-android-arm": "ts-node ./scripts/build-skia.ts android arm",
-    "build-skia-android-arm64": "ts-node ./scripts/build-skia.ts android arm64",
-    "build-skia-android-x86": "ts-node ./scripts/build-skia.ts android x86",
-    "build-skia-android-x64": "ts-node ./scripts/build-skia.ts android x64",
-    "build-skia-ios-fatlibs": "ts-node ./scripts/build-skia-ios-fatlibs.ts",
-    "build-skia-ios": "yarn build-skia-ios-x64 && yarn build-skia-ios-arm64 && yarn build-skia-ios-arm && yarn build-skia-ios-fatlibs",
-    "build-skia-android": "yarn build-skia-android-x64 && yarn build-skia-android-arm64 && yarn build-skia-android-arm && yarn build-skia-android-x86",
+    "build-skia-ios-framework": "ts-node ./scripts/build-skia-ios-framework.ts",
+    "build-skia-ios": "ts-node ./scripts/build-skia-ios.ts && yarn build-skia-ios-framework",
+    "build-skia-android": "ts-node ./scripts/build-skia-android.ts",
     "build-skia": "yarn build-skia-ios && yarn build-skia-android",
+    "clean-skia": "yarn rimraf ./package/libs && yarn rimraf ./externals/skia/out",
     "copy-skia-include-headers": "yarn rimraf ./package/cpp/skia/include/ && cp -a ./externals/skia/include/. ./package/cpp/skia/include",
     "copy-skia-module-headers": "yarn rimraf ./package/cpp/skia/modules/ && mkdir -p ./package/cpp/skia/modules/svg/include && mkdir -p ./package/cpp/skia/modules/skresources/include && cp -a ./externals/skia/modules/svg/include/. ./package/cpp/skia/modules/svg/include && cp -a ./externals/skia/modules/skresources/include/. ./package/cpp/skia/modules/skresources/include",
     "copy-skia-headers": "yarn copy-skia-module-headers && yarn copy-skia-include-headers",
-    "build-android-aar": "yarn ts-node ./scripts/build-android.ts",
     "build-npm": "yarn ts-node ./scripts/build-npm-package.ts",
     "get-filename-npm": "yarn ts-node ./scripts/get-npm-filename.ts",
     "get-version-npm": "yarn ts-node ./scripts/get-npm-version.ts",

package/cpp/api/JsiSkCanvas.h

@@ -281,7 +281,7 @@ class JsiSkCanvas : public JsiSkHostObject {
       _canvas->drawPatch(cubics.data(), colors.data(), texs.data(), blendMode,
                          *paint);
     } else {
-      _canvas->drawPatch(cubics.data(), colors.data(), texs.data(), *paint);
+      _canvas->drawPatch(cubics.data(), colors.data(), texs.data(), SkBlendMode::kClear, *paint);
     }
     return jsi::Value::undefined();
   }

package/cpp/api/JsiSkDataFactory.h

@@ -57,12 +57,20 @@ namespace RNSkia {
 
             // Calculate length
             size_t len;
-            SkBase64::Decode(&base64.utf8(runtime).c_str()[0], size, nullptr, &len);
+            auto err = SkBase64::Decode(&base64.utf8(runtime).c_str()[0], size, nullptr, &len);
+            if(err != SkBase64::Error::kNoError) {
+              jsi::detail::throwJSError(runtime, "Error decoding base64 string");
+              return jsi::Value::undefined();
+            }
 
             // Create data object and decode
             auto data = SkData::MakeUninitialized(len);
-            SkBase64::Decode(&base64.utf8(runtime).c_str()[0], size, data->writable_data(), &len);
-
+            err = SkBase64::Decode(&base64.utf8(runtime).c_str()[0], size, data->writable_data(), &len);
+            if(err != SkBase64::Error::kNoError) {
+              jsi::detail::throwJSError(runtime, "Error decoding base64 string");
+              return jsi::Value::undefined();
+            }
+
             return jsi::Object::createFromHostObject(runtime,
                                                      std::make_shared<JsiSkData>(
                                                              getContext(), data));

package/cpp/api/JsiSkRuntimeEffect.h

@@ -72,7 +72,7 @@ namespace RNSkia
 
     JSI_HOST_FUNCTION(getUniformCount)
     {
-      return static_cast<int>(getObject()->uniforms().count());
+      return static_cast<int>(getObject()->uniforms().size());
     }
 
     JSI_HOST_FUNCTION(getUniformFloatCount)
@@ -82,14 +82,14 @@ namespace RNSkia
 
     JSI_HOST_FUNCTION(getUniformName)
     {
-      auto i = arguments[0].asNumber();
+      auto i = static_cast<int>(arguments[0].asNumber());
       auto it = getObject()->uniforms().begin() + i;
       return jsi::String::createFromAscii(runtime, it->name.c_str());
     }
 
     JSI_HOST_FUNCTION(getUniform)
     {
-      auto i = arguments[0].asNumber();
+      auto i = static_cast<int>(arguments[0].asNumber());
       auto it = getObject()->uniforms().begin() + i;
       auto result = jsi::Object(runtime);
       RuntimeEffectUniform su = fromUniform(*it);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.37",
+  "version": "0.1.100",
   "description": "Skia View for React Native",
   "main": "index.ts",
   "files": [
@@ -19,9 +19,9 @@
     "index.js",
     "cpp/**/*.{h,cpp}",
     "ios",
-    "libs/ios/libskia.a",
-    "libs/ios/libskshaper.a",
-    "libs/ios/libsvg.a",
+    "libs/ios/libskia.xcframework",
+    "libs/ios/libskshaper.xcframework",
+    "libs/ios/libsvg.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js"
   ],
@@ -72,4 +72,4 @@
   "dependencies": {
     "react-reconciler": "^0.26.2"
   }
-}
+}

package/react-native-skia.podspec

@@ -27,10 +27,10 @@ Pod::Spec.new do |s|
 
   s.frameworks = 'GLKit', 'MetalKit'
 
-  s.ios.vendored_libraries = [
-    'libs/ios/libskia.a', 
-    'libs/ios/libsvg.a', 
-    'libs/ios/libskshaper.a'
+  s.ios.vendored_frameworks = [
+    'libs/ios/libskia.xcframework', 
+    'libs/ios/libsvg.xcframework', 
+    'libs/ios/libskshaper.xcframework'
   ]
 
   # All iOS cpp/h files

package/src/skia/Skia.ts

@@ -21,7 +21,6 @@ import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
 import type { SurfaceFactory } from "./Surface";
 import "./NativeSetup";
 
-
 /**
  * Declares the interface for the native Skia API
  */