Skip to content

Commit aab5771

Browse files
wcandillonwcandillon
authored
fix(🐛): fix build regression on fabric (#2769)
1 parent 412d3a3 commit aab5771

File tree

7 files changed

+110
-122
lines changed

7 files changed

+110
-122
lines changed

Diff for: ‎.github/workflows/ci.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -331,4 +331,4 @@ jobs:
331331
332332
- name: Build example for iOS
333333
run: |
334-
yarn turbo run build:ios --concurrency 1 --force
334+
yarn turbo run build:ios --concurrency 1 --force

Diff for: ‎apps/fabric/ios/Podfile.lock

+5-5
Original file line numberDiff line numberDiff line change
@@ -1715,7 +1715,7 @@ PODS:
17151715
- ReactCommon/turbomodule/bridging
17161716
- ReactCommon/turbomodule/core
17171717
- Yoga
1718-
- RNScreens (3.34.0):
1718+
- RNScreens (4.3.0):
17191719
- DoubleConversion
17201720
- glog
17211721
- hermes-engine
@@ -1736,9 +1736,9 @@ PODS:
17361736
- ReactCodegen
17371737
- ReactCommon/turbomodule/bridging
17381738
- ReactCommon/turbomodule/core
1739-
- RNScreens/common (= 3.34.0)
1739+
- RNScreens/common (= 4.3.0)
17401740
- Yoga
1741-
- RNScreens/common (3.34.0):
1741+
- RNScreens/common (4.3.0):
17421742
- DoubleConversion
17431743
- glog
17441744
- hermes-engine
@@ -2061,7 +2061,7 @@ SPEC CHECKSUMS:
20612061
React-Mapbuffer: 1c08607305558666fd16678b85ef135e455d5c96
20622062
React-microtasksnativemodule: f13f03163b6a5ec66665dfe80a0df4468bb766a6
20632063
react-native-safe-area-context: 38fdd9b3c5561de7cabae64bd0cd2ce05d2768a1
2064-
react-native-skia: 211bb48a0bebd1369aebd456d8559c11573387ba
2064+
react-native-skia: 543cf306ad978cba6bee5c2c2427fa0de7876fad
20652065
react-native-slider: e1f4b4538f7de7417b626174874f4f58d4cf6c28
20662066
React-nativeconfig: 57781b79e11d5af7573e6f77cbf1143b71802a6d
20672067
React-NativeModulesApple: 7ff2e2cfb2e5fa5bdedcecf28ce37e696c6ef1e1
@@ -2091,7 +2091,7 @@ SPEC CHECKSUMS:
20912091
ReactCommon: 6ef348087d250257c44c0204461c03f036650e9b
20922092
RNGestureHandler: f769e1b9057085db07546aa3e259daa85c898dc7
20932093
RNReanimated: f6152a40249b6bb48fff2b963850d336269f22a4
2094-
RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2
2094+
RNScreens: 44a3e358d5ccd7815c5ae9148988c562826992b2
20952095
RNSVG: 1079f96b39a35753d481a20e30603fd6fc4f6fa9
20962096
SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
20972097
Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae

Diff for: ‎apps/fabric/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"react-native-gesture-handler": "^2.18.1",
3131
"react-native-reanimated": "^3.15.1",
3232
"react-native-safe-area-context": "^4.10.9",
33-
"react-native-screens": "^3.34.0",
33+
"react-native-screens": "^4.3.0",
3434
"react-native-svg": "^15.6.0",
3535
"typescript": "^5.2.2"
3636
},

Diff for: ‎apps/fabric/src/App.tsx

+96-107
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,111 @@
1-
/**
2-
* Sample React Native App
3-
* https://github.com/facebook/react-native
4-
*
5-
* @format
6-
*/
7-
8-
import React from "react";
9-
import type { PropsWithChildren } from "react";
1+
import React, { useEffect, useMemo } from "react";
2+
import { StyleSheet, useWindowDimensions, View } from "react-native";
103
import {
11-
SafeAreaView,
12-
ScrollView,
13-
StatusBar,
14-
StyleSheet,
15-
Text,
16-
useColorScheme,
17-
View,
18-
} from "react-native";
4+
BlurMask,
5+
vec,
6+
Canvas,
7+
Circle,
8+
Fill,
9+
Group,
10+
polar2Canvas,
11+
mix,
12+
} from "@shopify/react-native-skia";
13+
import type { SharedValue } from "react-native-reanimated";
1914
import {
20-
Colors,
21-
DebugInstructions,
22-
Header,
23-
LearnMoreLinks,
24-
ReloadInstructions,
25-
} from "react-native/Libraries/NewAppScreen";
15+
cancelAnimation,
16+
Easing,
17+
useDerivedValue,
18+
useSharedValue,
19+
withRepeat,
20+
withTiming,
21+
} from "react-native-reanimated";
22+
23+
const useLoop = ({ duration }: { duration: number }) => {
24+
const progress = useSharedValue(0);
25+
useEffect(() => {
26+
progress.value = withRepeat(
27+
withTiming(1, { duration, easing: Easing.inOut(Easing.ease) }),
28+
-1,
29+
true
30+
);
31+
return () => {
32+
cancelAnimation(progress);
33+
};
34+
}, [duration, progress]);
35+
return progress;
36+
};
37+
38+
const c1 = "#61bea2";
39+
const c2 = "#529ca0";
2640

27-
type SectionProps = PropsWithChildren<{
28-
title: string;
29-
}>;
41+
interface RingProps {
42+
index: number;
43+
progress: SharedValue<number>;
44+
}
45+
46+
const Ring = ({ index, progress }: RingProps) => {
47+
const { width, height } = useWindowDimensions();
48+
const R = width / 4;
49+
const center = useMemo(
50+
() => vec(width / 2, height / 2 - 64),
51+
[height, width]
52+
);
53+
54+
const theta = (index * (2 * Math.PI)) / 6;
55+
const transform = useDerivedValue(() => {
56+
const { x, y } = polar2Canvas(
57+
{ theta, radius: progress.value * R },
58+
{ x: 0, y: 0 }
59+
);
60+
const scale = mix(progress.value, 0.3, 1);
61+
return [{ translateX: x }, { translateY: y }, { scale }];
62+
}, [progress, R]);
3063

31-
function Section({ children, title }: SectionProps): React.JSX.Element {
32-
const isDarkMode = useColorScheme() === "dark";
3364
return (
34-
<View style={styles.sectionContainer}>
35-
<Text
36-
style={[
37-
styles.sectionTitle,
38-
{
39-
color: isDarkMode ? Colors.white : Colors.black,
40-
},
41-
]}
42-
>
43-
{title}
44-
</Text>
45-
<Text
46-
style={[
47-
styles.sectionDescription,
48-
{
49-
color: isDarkMode ? Colors.light : Colors.dark,
50-
},
51-
]}
52-
>
53-
{children}
54-
</Text>
55-
</View>
65+
<Circle
66+
c={center}
67+
r={R}
68+
color={index % 2 ? c1 : c2}
69+
origin={center}
70+
transform={transform}
71+
/>
5672
);
57-
}
73+
};
5874

59-
function App(): React.JSX.Element {
60-
const isDarkMode = useColorScheme() === "dark";
75+
export const Breathe = () => {
76+
const { width, height } = useWindowDimensions();
77+
const center = useMemo(
78+
() => vec(width / 2, height / 2 - 64),
79+
[height, width]
80+
);
6181

62-
const backgroundStyle = {
63-
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
64-
};
82+
const progress = useLoop({ duration: 3000 });
83+
84+
const transform = useDerivedValue(
85+
() => [{ rotate: mix(progress.value, -Math.PI, 0) }],
86+
[progress]
87+
);
6588

6689
return (
67-
<SafeAreaView style={backgroundStyle}>
68-
<StatusBar
69-
barStyle={isDarkMode ? "light-content" : "dark-content"}
70-
backgroundColor={backgroundStyle.backgroundColor}
71-
/>
72-
<ScrollView
73-
contentInsetAdjustmentBehavior="automatic"
74-
style={backgroundStyle}
75-
>
76-
<Header />
77-
<View
78-
style={{
79-
backgroundColor: isDarkMode ? Colors.black : Colors.white,
80-
}}
81-
>
82-
<Section title="Step One">
83-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
84-
screen and then come back to see your edits.
85-
</Section>
86-
<Section title="See Your Changes">
87-
<ReloadInstructions />
88-
</Section>
89-
<Section title="Debug">
90-
<DebugInstructions />
91-
</Section>
92-
<Section title="Learn More">
93-
Read the docs to discover what to do next:
94-
</Section>
95-
<LearnMoreLinks />
96-
</View>
97-
</ScrollView>
98-
</SafeAreaView>
90+
<View style={{ flex: 1 }}>
91+
<Canvas style={styles.container}>
92+
<Fill color="rgb(36,43,56)" />
93+
<Group origin={center} transform={transform} blendMode="screen">
94+
<BlurMask style="solid" blur={40} />
95+
{new Array(6).fill(0).map((_, index) => {
96+
return <Ring key={index} index={index} progress={progress} />;
97+
})}
98+
</Group>
99+
</Canvas>
100+
</View>
99101
);
100-
}
102+
};
103+
104+
// eslint-disable-next-line import/no-default-export
105+
export default Breathe;
101106

102107
const styles = StyleSheet.create({
103-
sectionContainer: {
104-
marginTop: 32,
105-
paddingHorizontal: 24,
106-
},
107-
sectionTitle: {
108-
fontSize: 24,
109-
fontWeight: "600",
110-
},
111-
sectionDescription: {
112-
marginTop: 8,
113-
fontSize: 18,
114-
fontWeight: "400",
115-
},
116-
highlight: {
117-
fontWeight: "700",
108+
container: {
109+
flex: 1,
118110
},
119111
});
120-
121-
// eslint-disable-next-line import/no-default-export
122-
export default App;

Diff for: ‎apps/paper/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"react-native-gesture-handler": "^2.18.1",
3131
"react-native-reanimated": "^3.15.1",
3232
"react-native-safe-area-context": "^4.10.9",
33-
"react-native-screens": "^3.34.0",
33+
"react-native-screens": "^4.3.0",
3434
"react-native-svg": "^15.6.0",
3535
"react-native-wgpu": "0.1.19",
3636
"typescript": "^5.2.2"

Diff for: ‎packages/skia/src/specs/SkiaDomViewNativeComponent.ts

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNati
22
import type { ViewProps } from "react-native";
33

44
export interface NativeProps extends ViewProps {
5-
mode: string;
65
debug?: boolean;
76
}
87

Diff for: ‎yarn.lock

+6-6
Original file line numberDiff line numberDiff line change
@@ -9758,7 +9758,7 @@ __metadata:
97589758
react-native-gesture-handler: ^2.18.1
97599759
react-native-reanimated: ^3.15.1
97609760
react-native-safe-area-context: ^4.10.9
9761-
react-native-screens: ^3.34.0
9761+
react-native-screens: ^4.3.0
97629762
react-native-svg: ^15.6.0
97639763
react-test-renderer: 18.3.1
97649764
typescript: ^5.2.2
@@ -15397,7 +15397,7 @@ __metadata:
1539715397
react-native-gesture-handler: ^2.18.1
1539815398
react-native-reanimated: ^3.15.1
1539915399
react-native-safe-area-context: ^4.10.9
15400-
react-native-screens: ^3.34.0
15400+
react-native-screens: ^4.3.0
1540115401
react-native-svg: ^15.6.0
1540215402
react-native-wgpu: 0.1.19
1540315403
react-test-renderer: 18.3.1
@@ -16885,16 +16885,16 @@ __metadata:
1688516885
languageName: node
1688616886
linkType: hard
1688716887

16888-
"react-native-screens@npm:^3.34.0":
16889-
version: 3.34.0
16890-
resolution: "react-native-screens@npm:3.34.0"
16888+
"react-native-screens@npm:^4.3.0":
16889+
version: 4.3.0
16890+
resolution: "react-native-screens@npm:4.3.0"
1689116891
dependencies:
1689216892
react-freeze: ^1.0.0
1689316893
warn-once: ^0.1.0
1689416894
peerDependencies:
1689516895
react: "*"
1689616896
react-native: "*"
16897-
checksum: 28c1f6e556c318ffcbd79d153b9612cc8a0b8d8b70f909d3cde2fd6d0586a7c151a449e57400d8996f4ee6c3b5140c5c4f643a427e974f6dc573b2bcd8eb7356
16897+
checksum: b43ae4145e264582732ec53c78ba88de678c8ce7f9687b0526bf647c7d1ea8311ee821945848a55fb04f145bf8cae189d2d4e0f49e52571cb23acf083f2df858
1689816898
languageName: node
1689916899
linkType: hard
1690016900

0 commit comments

Comments
 (0)