From aab5771a80842d26ad721719a268691847c56ba1 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Sun, 24 Nov 2024 21:37:34 +0100 Subject: [PATCH] =?UTF-8?q?fix(=F0=9F=90=9B):=20fix=20build=20regression?= =?UTF-8?q?=20on=20fabric=20(#2769)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/ci.yml | 2 +- apps/fabric/ios/Podfile.lock | 10 +- apps/fabric/package.json | 2 +- apps/fabric/src/App.tsx | 203 +++++++++--------- apps/paper/package.json | 2 +- .../src/specs/SkiaDomViewNativeComponent.ts | 1 - yarn.lock | 12 +- 7 files changed, 110 insertions(+), 122 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 00341cdb10..78bff39b54 100644 --- a/.github/workflows/ci.yml +++ b/.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 \ No newline at end of file diff --git a/apps/fabric/ios/Podfile.lock b/apps/fabric/ios/Podfile.lock index 06df6661cd..8134d85a41 100644 --- a/apps/fabric/ios/Podfile.lock +++ b/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 diff --git a/apps/fabric/package.json b/apps/fabric/package.json index 4875ff30ff..9bc081100c 100644 --- a/apps/fabric/package.json +++ b/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" }, diff --git a/apps/fabric/src/App.tsx b/apps/fabric/src/App.tsx index dc4490b41e..f64b03a73a 100644 --- a/apps/fabric/src/App.tsx +++ b/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; +} + +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 ( - - - {title} - - - {children} - - + ); -} +}; -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 ( - - - -
- -
- Edit App.tsx to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- - - - + + + + + + {new Array(6).fill(0).map((_, index) => { + return ; + })} + + + ); -} +}; + +// 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; diff --git a/apps/paper/package.json b/apps/paper/package.json index ef9ad52588..9c0f479a08 100644 --- a/apps/paper/package.json +++ b/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" diff --git a/packages/skia/src/specs/SkiaDomViewNativeComponent.ts b/packages/skia/src/specs/SkiaDomViewNativeComponent.ts index 25eededcea..ef72e6c260 100644 --- a/packages/skia/src/specs/SkiaDomViewNativeComponent.ts +++ b/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; } diff --git a/yarn.lock b/yarn.lock index 3b5a359481..9f5aa333ba 100644 --- a/yarn.lock +++ b/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