Merge pull request #1961 from WoLewicki/@wolewicki/new-arch-support

feat: support new arch
Shopify · Nov 10, 2023 · 3f4f81d · 3f4f81d
2 parents 095fd25 + fba5d9e
commit 3f4f81d
Show file tree

Hide file tree

Showing 375 changed files with 36,233 additions and 3,990 deletions.
diff --git a/.github/workflows/android.yml b/.github/workflows/android.yml
@@ -5,9 +5,12 @@ on: [push]
 jobs:
   build:
     runs-on: macos-12
+    strategy:
+      matrix:
+        working-directory: [example, fabricexample]
     timeout-minutes: 55
     concurrency:
-      group: android-example-${{ github.ref }}
+      group: android-example-${{ matrix.working-directory }}-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: checkout
@@ -58,41 +61,44 @@ jobs:
         run: yarn install
 
       - name: Install example app node dependencies
-        working-directory: example
+        working-directory: ${{ matrix.working-directory }}
         run: yarn
 
       - name: Cache hermes build
         uses: actions/cache@v3
         env:
           cache-name: cache-rn-hermes-engine
         with:
-          path: example/node_modules/react-native
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-example-${{ hashFiles('**/react-native/package.json') }}
+          path: ${{ matrix.working-directory }}/node_modules/react-native
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.working-directory }}-${{ hashFiles('**/react-native/package.json') }}
 
       - name: Cache android libraries
         uses: actions/cache@v3
         env:
           cache-name: cache-rn
         with:
-          path: example/android/app/build
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-example-${{ hashFiles('**/react-native/package.json') }}
+          path: ${{ matrix.working-directory }}/android/app/build
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.working-directory }}-${{ hashFiles('**/react-native/package.json') }}
 
       - name: Build Android app
-        working-directory: example/android
+        working-directory: ${{ matrix.working-directory }}/android
         run: ./gradlew assembleDebug
 
       - name: Cache apk
         uses: actions/cache/save@v3
         env:
           cache-name: cache-apk
         with:
-          path: example/android/app/build/outputs/apk/debug/app-debug.apk
+          path: ${{ matrix.working-directory }}/android/app/build/outputs/apk/debug/app-debug.apk
           key: apk-${{ github.sha }}
   test:
     needs: build
     runs-on: macos-12
+    strategy:
+      matrix:
+        working-directory: [example, fabricexample]
     concurrency:
-      group: android-example-${{ github.ref }}
+      group: android-example-${{ matrix.working-directory }}-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: checkout
@@ -112,7 +118,7 @@ jobs:
         id: cache-apk
         uses: actions/cache/restore@v3
         with:
-          path: example/android/app/build/outputs/apk/debug/app-debug.apk
+          path: ${{ matrix.working-directory }}/android/app/build/outputs/apk/debug/app-debug.apk
           key: apk-${{ github.sha }}
 
       - name: SKDs - download required images
@@ -129,24 +135,28 @@ jobs:
         timeout-minutes: 10
 
       - name: Reverse TCP
-        working-directory: example
+        working-directory: ${{ matrix.working-directory }}
         run: yarn android-reverse-tcp
 
       - name: Start Package Manager
-        working-directory: example
+        working-directory: ${{ matrix.working-directory }}
         run: E2E=true yarn start &
 
       - name: Check APK existence
         uses: andstor/file-existence-action@v2
         with:
-          files: example/android/app/build/outputs/apk/debug/app-debug.apk
+          files: ${{ matrix.working-directory }}/android/app/build/outputs/apk/debug/app-debug.apk
           fail: true
 
       - name: Install APK
-        run: adb install -r example/android/app/build/outputs/apk/debug/app-debug.apk
+        run: adb install -r ${{ matrix.working-directory }}/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
-        run: adb shell monkey -p com.rnskia 1    
+        env:
+          PACKAGE_NAME: ${{ matrix.working-directory == 'fabricexample' && 'com.fabricexample' || 'com.rnskia' }}  
+        run: adb shell monkey -p ${{ env.PACKAGE_NAME }} 1  
 
       - name: Run e2e Tests
         working-directory: package

diff --git a/.github/workflows/ios-build.yml b/.github/workflows/ios-build.yml
@@ -13,8 +13,11 @@ on:
 jobs:
   build:
     runs-on: macos-12
+    strategy:
+      matrix:
+        working-directory: [example, fabricexample]
     concurrency:
-      group: ios-example-${{ github.ref }}
+      group: ios-example-${{ matrix.working-directory }}-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: checkout
@@ -48,24 +51,24 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Install app node_modules
-        working-directory: example
+        working-directory: ${{ matrix.working-directory }}
         run: yarn install --frozen-lockfile
 
       - name: Restore Pods from cache
         uses: actions/cache@v3
         with:
           path: |
-            example/ios/Pods
+            ${{ matrix.working-directory }}/ios/Pods
             ~/Library/Caches/CocoaPods
             ~/.cocoapods
-          key: ${{ runner.os }}-pods-example-${{ hashFiles('example/ios/Podfile.lock') }}
+          key: ${{ runner.os }}-pods-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/ios/Podfile.lock', matrix.working-directory)) }}
 
       - name: Install Pods
-        working-directory: example/ios
+        working-directory: ${{ matrix.working-directory }}/ios
         run: pod install
 
       - name: Check if Podfile.lock has changed
-        working-directory: example/ios
+        working-directory: ${{ matrix.working-directory }}/ios
         run: |
           if git diff --quiet --ignore-all-space -I 'COCOAPODS:' HEAD -- Podfile.lock; then
             echo "Podfile.lock is up to date."
@@ -79,10 +82,10 @@ jobs:
         uses: actions/cache@v3
         with:
           path: ~/Library/Developer/Xcode/DerivedData
-          key: ${{ runner.os }}-ios-derived-data-example-${{ hashFiles('example/ios/Podfile.lock') }}
-
+          key: ${{ runner.os }}-ios-derived-data-${{ hashFiles(format('{0}/ios/Podfile.lock', matrix.working-directory)) }}
+  
       - name: Build app
-        working-directory: example
+        working-directory: ${{ matrix.working-directory }}
         run: CI=true yarn ios --simulator 'iPhone 14 Pro'
 
       # - name: Run e2e tests

diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ And then the _SDK Location_ section. It will show you the NDK path, or the optio
 - Install dependencies `yarn bootstrap`
 - Build the Skia libraries with `yarn build-skia` (this can take a while)
 - Copy Skia headers `yarn copy-skia-headers`
-- Run `pod install` in the example project
+- run `pod install` in `example/ios` and `fabricexample/ios`
 
 ### Upgrading
 

diff --git a/docs/docs/getting-started/installation.md b/docs/docs/getting-started/installation.md
@@ -11,6 +11,7 @@ Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flu
 > **Version compatibility:**  
 > `react-native@>=0.66` and `react@>=18` are required.
 > In addition you should make sure you're on at least `iOS 13` and `Android API level 16` or above.
+> To use React Native Skia with the new architecture, `react-native@>=0.72` is required.
 
 **Install the library using yarn:**
 

diff --git a/docs/package.json b/docs/package.json
@@ -16,8 +16,8 @@
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.1.0",
-    "@docusaurus/preset-classic": "^2.1.0",
+    "@docusaurus/core": "2.4.3",
+    "@docusaurus/preset-classic": "2.4.3",
     "@mdx-js/react": "^1.6.21",
     "@shopify/react-native-skia": "link:../package/",
     "@svgr/webpack": "^5.5.0",
@@ -26,20 +26,24 @@
     "file-loader": "^6.2.0",
     "its-fine": "^1.0.8",
     "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-native-gesture-handler": "^2.9.0",
-    "react-native-reanimated": "^2.4.1",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "^0.72.6",
+    "react-native-gesture-handler": "2.13.4",
+    "react-native-reanimated": "3.5.4",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.1.0",
+    "@docusaurus/module-type-aliases": "2.4.3",
     "@tsconfig/docusaurus": "^1.0.4",
-    "@types/react-native": "0.66.2",
-    "eslint": "^7.32.0",
-    "eslint-config-react-native-wcandillon": "^3.7.2",
-    "twoslash-cli": "^1.3.17",
-    "typescript": "4.8.3"
+    "eslint": "8.21.0",
+    "eslint-config-react-native-wcandillon": "3.10.2",
+    "twoslash-cli": "1.3.24",
+    "typescript": "5.1.6"
+  },
+  "resolutions": {
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0"
   },
   "browserslist": {
     "production": [