[Draft] feat: add macOS support

apps/docs/package.json

@@ -31,7 +31,7 @@
     "react-dom": "18.3.1",
     "react-native": "0.75.2",
     "react-native-gesture-handler": "^2.18.1",
-    "react-native-reanimated": "^3.15.1",
+    "react-native-reanimated": "^3.16.5",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

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/example/App.tsx

@@ -0,0 +1,118 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+import React from 'react';
+import type {PropsWithChildren} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  LearnMoreLinks,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+type SectionProps = PropsWithChildren<{
+  title: string;
+}>;
+
+function Section({children, title}: SectionProps): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+  return (
+    <View style={styles.sectionContainer}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: isDarkMode ? Colors.white : Colors.black,
+          },
+        ]}>
+        {title}
+      </Text>
+      <Text
+        style={[
+          styles.sectionDescription,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+function App(): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode ? Colors.black : Colors.white,
+          }}>
+          <Section title="Step One">
+            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
+            screen and then come back to see your edits.
+          </Section>
+          <Section title="See Your Changes">
+            <ReloadInstructions />
+          </Section>
+          <Section title="Debug">
+            <DebugInstructions />
+          </Section>
+          <Section title="Learn More">
+            Read the docs to discover what to do next:
+          </Section>
+          <LearnMoreLinks />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+  },
+  highlight: {
+    fontWeight: '700',
+  },
+});
+
+export default App;

apps/example/android/build.gradle

@@ -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/gradle.properties

@@ -0,0 +1,53 @@
+# 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
+
+# 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

apps/fabric/android/gradle/wrapper/gradle-wrapper.properties → apps/example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

apps/example/android/settings.gradle

@@ -0,0 +1,21 @@
+pluginManagement {
+    repositories {
+        gradlePluginPortal()
+        mavenCentral()
+        google()
+    }
+}
+
+rootProject.name = "skia-example"
+
+apply(from: {
+    def searchDir = rootDir.toPath()
+    do {
+        def p = searchDir.resolve("node_modules/react-native-test-app/test-app.gradle")
+        if (p.toFile().exists()) {
+            return p.toRealPath().toString()
+        }
+    } while (searchDir = searchDir.getParent())
+    throw new GradleException("Could not find `react-native-test-app`");
+}())
+applyTestAppSettings(settings)

apps/example/app.json

@@ -0,0 +1,119 @@
+{
+  "name": "skia-example",
+  "displayName": "skia-example",
+  "components": [
+    {
+      "appKey": "Aurora",
+      "displayName": "Aurora"
+    },
+    {
+      "appKey": "Boxes",
+      "displayName": "Boxes"
+    },
+    {
+      "appKey": "Breathe",
+      "displayName": "Breathe"
+    },
+    {
+      "appKey": "Filters",
+      "displayName": "Filters"
+    },
+    {
+      "appKey": "FrostedCard",
+      "displayName": "FrostedCard"
+    },
+    {
+      "appKey": "GlassMorphism",
+      "displayName": "GlassMorphism"
+    },
+    {
+      "appKey": "Gooey",
+      "displayName": "Gooey"
+    },
+    {
+      "appKey": "Graphs",
+      "displayName": "Graphs"
+    },
+    {
+      "appKey": "Hue",
+      "displayName": "Hue"
+    },
+    {
+      "appKey": "Matrix",
+      "displayName": "Matrix"
+    },
+    {
+      "appKey": "Neomorphism",
+      "displayName": "Neomorphism"
+    },
+    {
+      "appKey": "Performance",
+      "displayName": "Performance"
+    },
+    {
+      "appKey": "Reanimated",
+      "displayName": "Reanimated"
+    },
+    {
+      "appKey": "Severance",
+      "displayName": "Severance"
+    },
+    {
+      "appKey": "SppedTest",
+      "displayName": "SpeedTest"
+    },
+    {
+      "appKey": "Stickers",
+      "displayName": "Stickers"
+    },
+    {
+      "appKey": "Transitions",
+      "displayName": "Transitions"
+    },
+    {
+      "appKey": "Vertices",
+      "displayName": "Vertices"
+    },
+    {
+      "appKey": "Video",
+      "displayName": "Video"
+    },
+    {
+      "appKey": "Wallet",
+      "displayName": "Wallet"
+    },
+    {
+      "appKey": "Wallpaper",
+      "displayName": "Wallpaper"
+    },
+    {
+      "appKey": "WebGPU",
+      "displayName": "WebGPU"
+    }
+  ],
+  "plugins": [
+    "react-native-test-app/plugins/reanimated.js"
+  ],
+  "resources": {
+    "android": [
+      "dist/res",
+      "dist/main.android.jsbundle"
+    ],
+    "ios": [
+      "dist/assets",
+      "dist/main.ios.jsbundle"
+    ],
+    "macos": [
+      "dist/assets",
+      "dist/main.macos.jsbundle"
+    ],
+    "visionos": [
+      "dist/assets",
+      "dist/main.visionos.jsbundle"
+    ],
+    "windows": [
+      "dist/assets",
+      "dist/main.windows.bundle"
+    ]
+  }
+}