Add fabric build to CI

.github/workflows/ci.yml

@@ -331,4 +331,4 @@ jobs:
 
       - name: Build example for iOS
         run: |
-          yarn turbo run build:ios --concurrency 1 --force
+          yarn turbo run build:ios --concurrency 1 --force

apps/fabric/ios/Podfile.lock

@@ -1715,7 +1715,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.34.0):
+  - RNScreens (4.3.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1736,9 +1736,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 3.34.0)
+    - RNScreens/common (= 4.3.0)
     - Yoga
-  - RNScreens/common (3.34.0):
+  - RNScreens/common (4.3.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2061,7 +2061,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 1c08607305558666fd16678b85ef135e455d5c96
   React-microtasksnativemodule: f13f03163b6a5ec66665dfe80a0df4468bb766a6
   react-native-safe-area-context: 38fdd9b3c5561de7cabae64bd0cd2ce05d2768a1
-  react-native-skia: 211bb48a0bebd1369aebd456d8559c11573387ba
+  react-native-skia: 543cf306ad978cba6bee5c2c2427fa0de7876fad
   react-native-slider: e1f4b4538f7de7417b626174874f4f58d4cf6c28
   React-nativeconfig: 57781b79e11d5af7573e6f77cbf1143b71802a6d
   React-NativeModulesApple: 7ff2e2cfb2e5fa5bdedcecf28ce37e696c6ef1e1
@@ -2091,7 +2091,7 @@ SPEC CHECKSUMS:
   ReactCommon: 6ef348087d250257c44c0204461c03f036650e9b
   RNGestureHandler: f769e1b9057085db07546aa3e259daa85c898dc7
   RNReanimated: f6152a40249b6bb48fff2b963850d336269f22a4
-  RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2
+  RNScreens: 44a3e358d5ccd7815c5ae9148988c562826992b2
   RNSVG: 1079f96b39a35753d481a20e30603fd6fc4f6fa9
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae

apps/fabric/package.json

@@ -30,7 +30,7 @@
     "react-native-gesture-handler": "^2.18.1",
     "react-native-reanimated": "^3.15.1",
     "react-native-safe-area-context": "^4.10.9",
-    "react-native-screens": "^3.34.0",
+    "react-native-screens": "^4.3.0",
     "react-native-svg": "^15.6.0",
     "typescript": "^5.2.2"
   },

apps/fabric/src/App.tsx

@@ -1,122 +1,111 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import React from "react";
-import type { PropsWithChildren } from "react";
+import React, { useEffect, useMemo } from "react";
+import { StyleSheet, useWindowDimensions, View } from "react-native";
 import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from "react-native";
+  BlurMask,
+  vec,
+  Canvas,
+  Circle,
+  Fill,
+  Group,
+  polar2Canvas,
+  mix,
+} from "@shopify/react-native-skia";
+import type { SharedValue } from "react-native-reanimated";
 import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from "react-native/Libraries/NewAppScreen";
+  cancelAnimation,
+  Easing,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+const useLoop = ({ duration }: { duration: number }) => {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(1, { duration, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+    return () => {
+      cancelAnimation(progress);
+    };
+  }, [duration, progress]);
+  return progress;
+};
+
+const c1 = "#61bea2";
+const c2 = "#529ca0";
 
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
+interface RingProps {
+  index: number;
+  progress: SharedValue<number>;
+}
+
+const Ring = ({ index, progress }: RingProps) => {
+  const { width, height } = useWindowDimensions();
+  const R = width / 4;
+  const center = useMemo(
+    () => vec(width / 2, height / 2 - 64),
+    [height, width]
+  );
+
+  const theta = (index * (2 * Math.PI)) / 6;
+  const transform = useDerivedValue(() => {
+    const { x, y } = polar2Canvas(
+      { theta, radius: progress.value * R },
+      { x: 0, y: 0 }
+    );
+    const scale = mix(progress.value, 0.3, 1);
+    return [{ translateX: x }, { translateY: y }, { scale }];
+  }, [progress, R]);
 
-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>
+    <Circle
+      c={center}
+      r={R}
+      color={index % 2 ? c1 : c2}
+      origin={center}
+      transform={transform}
+    />
   );
-}
+};
 
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === "dark";
+export const Breathe = () => {
+  const { width, height } = useWindowDimensions();
+  const center = useMemo(
+    () => vec(width / 2, height / 2 - 64),
+    [height, width]
+  );
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+  const progress = useLoop({ duration: 3000 });
+
+  const transform = useDerivedValue(
+    () => [{ rotate: mix(progress.value, -Math.PI, 0) }],
+    [progress]
+  );
 
   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>
+    <View style={{ flex: 1 }}>
+      <Canvas style={styles.container}>
+        <Fill color="rgb(36,43,56)" />
+        <Group origin={center} transform={transform} blendMode="screen">
+          <BlurMask style="solid" blur={40} />
+          {new Array(6).fill(0).map((_, index) => {
+            return <Ring key={index} index={index} progress={progress} />;
+          })}
+        </Group>
+      </Canvas>
+    </View>
   );
-}
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Breathe;
 
 const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: "600",
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: "400",
-  },
-  highlight: {
-    fontWeight: "700",
+  container: {
+    flex: 1,
   },
 });
-
-// eslint-disable-next-line import/no-default-export
-export default App;

apps/paper/package.json

@@ -30,7 +30,7 @@
     "react-native-gesture-handler": "^2.18.1",
     "react-native-reanimated": "^3.15.1",
     "react-native-safe-area-context": "^4.10.9",
-    "react-native-screens": "^3.34.0",
+    "react-native-screens": "^4.3.0",
     "react-native-svg": "^15.6.0",
     "react-native-wgpu": "0.1.19",
     "typescript": "^5.2.2"

packages/skia/src/specs/SkiaDomViewNativeComponent.ts

@@ -2,7 +2,6 @@ import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNati
 import type { ViewProps } from "react-native";
 
 export interface NativeProps extends ViewProps {
-  mode: string;
   debug?: boolean;
 }
 

yarn.lock

@@ -9758,7 +9758,7 @@ __metadata:
     react-native-gesture-handler: ^2.18.1
     react-native-reanimated: ^3.15.1
     react-native-safe-area-context: ^4.10.9
-    react-native-screens: ^3.34.0
+    react-native-screens: ^4.3.0
     react-native-svg: ^15.6.0
     react-test-renderer: 18.3.1
     typescript: ^5.2.2
@@ -15397,7 +15397,7 @@ __metadata:
     react-native-gesture-handler: ^2.18.1
     react-native-reanimated: ^3.15.1
     react-native-safe-area-context: ^4.10.9
-    react-native-screens: ^3.34.0
+    react-native-screens: ^4.3.0
     react-native-svg: ^15.6.0
     react-native-wgpu: 0.1.19
     react-test-renderer: 18.3.1
@@ -16885,16 +16885,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-screens@npm:^3.34.0":
-  version: 3.34.0
-  resolution: "react-native-screens@npm:3.34.0"
+"react-native-screens@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "react-native-screens@npm:4.3.0"
   dependencies:
     react-freeze: ^1.0.0
     warn-once: ^0.1.0
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 28c1f6e556c318ffcbd79d153b9612cc8a0b8d8b70f909d3cde2fd6d0586a7c151a449e57400d8996f4ee6c3b5140c5c4f643a427e974f6dc573b2bcd8eb7356
+  checksum: b43ae4145e264582732ec53c78ba88de678c8ce7f9687b0526bf647c7d1ea8311ee821945848a55fb04f145bf8cae189d2d4e0f49e52571cb23acf083f2df858
   languageName: node
   linkType: hard