Skip to content

chore: bump to react-native 0.88 and expo 58 #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blazejkustra merged 1 commit into from
Oct 20, 2026
Merged

chore: bump to react-native 0.88 and expo 58 #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions .yarn/patches/metro-npm-0.84.4.patch → .yarn/patches/metro-npm-0.87.1.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@
diff --git a/src/node-haste/DependencyGraph.js b/src/node-haste/DependencyGraph.js
index 8222d8c..33a74dd 100644
index 3a76e63bee2e290aaec4dfc4ed160e0244441542..162a8a9f93ce30abee7182c8144643778edbdc92 100644
--- a/src/node-haste/DependencyGraph.js
+++ b/src/node-haste/DependencyGraph.js
@@ -197,6 +197,14 @@ class DependencyGraph extends _events.default {
@@ -33,6 +33,12 @@ function getOrCreateMap(map, field) {
}
return subMap;
}
+
+const workletsDirPath = _nodePath.default.join(
+ "react-native-worklets",
+ ".worklets",
+);
+
class DependencyGraph extends _nodeEvents.default {
#packageCache;
#dependencyPlugin;
@@ -137,6 +143,14 @@ class DependencyGraph extends _nodeEvents.default {
return (0, _nullthrows.default)(this._fileSystem).getAllFiles();
}
async getOrComputeSha1(mixedPath) {
+ if (mixedPath.includes("react-native-worklets/.worklets/")) {
+ if (mixedPath.includes(workletsDirPath)) {
+ const createHash = require("crypto").createHash;
+ return {
+ sha1: createHash("sha1")
Expand Down
36 changes: 0 additions & 36 deletions .yarn/patches/metro-runtime-npm-0.84.4.patch
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions .yarn/patches/metro-runtime-npm-0.87.1.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
diff --git a/src/modules/HMRClient.js b/src/modules/HMRClient.js
index 534ac872bdd4f081c21a63aeb88adf689a3af5c5..5773985c80b89907cad741fdb05b551a97320492 100644
--- a/src/modules/HMRClient.js
+++ b/src/modules/HMRClient.js
@@ -3,6 +3,9 @@
const EventEmitter = require("./vendor/eventemitter3");
const HEARTBEAT_INTERVAL_MS = 20_000;
const inject = ({ module: [id, code], sourceURL }) => {
+ if (global.__workletsModuleProxy?.propagateModuleUpdate) {
+ global.__workletsModuleProxy.propagateModuleUpdate(code, sourceURL);
+ }
if (global.globalEvalWithSourceUrl) {
global.globalEvalWithSourceUrl(code, sourceURL);
} else {
38 changes: 16 additions & 22 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,29 @@
"dependencies": {
"@react-navigation/native": "7.2.5",
"@react-navigation/native-stack": "7.16.0",
"expo": "~56.0.9",
"expo-build-properties": "~56.0.17",
"expo-sensors": "~56.0.5",
"react": "19.2.3",
"react-native": "0.85.3",
"react-native-audio-api": "^0.12.2",
"expo": "~58.0.16",
"expo-build-properties": "~58.0.11",
"expo-sensors": "~58.0.4",
"react": "19.3.0",
"react-native": "0.88.0",
"react-native-audio-api": "^0.13.6",
"react-native-effects": "workspace:*",
"react-native-gesture-handler": "~2.31.1",
"react-native-reanimated": "4.3.1",
"react-native-safe-area-context": "~5.7.0",
"react-native-screens": "4.25.2",
"react-native-view-shot": "5.1.0",
"react-native-webgpu": "0.5.15",
"react-native-worklets": "0.8.3"
"react-native-gesture-handler": "~3.3.0",
"react-native-reanimated": "4.7.1",
"react-native-safe-area-context": "~5.10.1",
"react-native-screens": "~4.30.0",
"react-native-view-shot": "6.1.1",
"react-native-webgpu": "0.17.0",
"react-native-worklets": "0.13.0"
},
"devDependencies": {
"@babel/core": "^7.29.7",
"@babel/preset-env": "^7.29.7",
"@babel/runtime": "^7.29.7",
"@react-native/metro-config": "^0.85.3",
"@types/react": "19.2.17",
"@react-native/metro-config": "^0.88.0",
"@types/react": "~19.3.0",
"@webgpu/types": "0.1.70",
"babel-preset-expo": "^56.0.14",
"babel-preset-expo": "~58.0.0",
"typescript": "6.0.3"
},
"worklets": {
"staticFeatureFlags": {
"BUNDLE_MODE_ENABLED": true,
"FETCH_PREVIEW_ENABLED": true
}
}
}
7 changes: 4 additions & 3 deletions example/src/hooks/useAudioReactive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export function useAudioReactive(options: AudioReactiveOptions = {}): {
try {
ctxRef.current?.suspend();
} catch {}
AudioManager.setAudioSessionActivity(false);
AudioManager.setAudioSessionActivity(false).catch(() => {});
smooth.current = { level: 0, bass: 0, treble: 0 };
setParamsSynchronizable(0, 0, 0, 0);
setListening(false);
Expand All @@ -92,8 +92,9 @@ export function useAudioReactive(options: AudioReactiveOptions = {}): {
setError('Microphone permission denied');
return;
}
const active = await AudioManager.setAudioSessionActivity(true);
if (!active) {
try {
await AudioManager.setAudioSessionActivity(true);
} catch {
setError('Could not activate the audio session');
return;
}
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/AiOrbScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function AiOrbScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#06070a" />
<StatusBar barStyle="light-content" />

<View style={styles.center}>
<View style={styles.orbWrap}>
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/AiShimmerScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function AiShimmerScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#0b0b10" />
<StatusBar barStyle="light-content" />

<View style={[styles.header, { paddingTop: insets.top + 6 }]}>
<BackButton />
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/AiVoiceScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function AiVoiceScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#06070a" />
<StatusBar barStyle="light-content" />

<View style={[styles.header, { paddingTop: insets.top + 60 }]}>
<Text style={styles.kicker}>Voice</Text>
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/AuroraScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function AuroraScreen() {
<View style={styles.container}>
<Aurora style={StyleSheet.absoluteFill} />

<StatusBar barStyle="light-content" backgroundColor="transparent" />
<StatusBar barStyle="light-content" />

<Header title="Aurora" subtitle="Northern lights curtains" transparent />

Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/BannersScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function BannersScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" translucent />
<StatusBar barStyle="light-content" />

{/* A scrollable stack of notification banners. */}
<ScrollView
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/BeerScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function BeerScreen() {

return (
<Pressable style={styles.container} onPress={refill}>
<StatusBar barStyle="light-content" backgroundColor="#000" translucent />
<StatusBar barStyle="light-content" />
<BeerGlass
paramsSynchronizable={paramsSynchronizable}
onLayout={onLayout}
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/CalicoSwirlScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function CalicoSwirlScreen() {
<View style={styles.container}>
<CalicoSwirl style={styles.calicoSwirl} />

<StatusBar barStyle="light-content" backgroundColor="transparent" />
<StatusBar barStyle="light-content" />

<Header
title="Calico Swirl"
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/CampfireScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Header } from '../components/Header';
export default function CampfireScreen() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="transparent" />
<StatusBar barStyle="light-content" />

<Header
title="Campfire"
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/CircularGradientScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const GRADIENT_PRESETS: GradientConfig[] = [
export default function CircularGradientScreen() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" />
<StatusBar barStyle="light-content" />

<Header
title="Circular Gradients"
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/DandelionScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export default function DandelionScreen() {

return (
<View style={styles.root}>
<StatusBar barStyle="light-content" translucent backgroundColor="#0000" />
<StatusBar barStyle="light-content" />
<Dandelion
style={StyleSheet.absoluteFill}
paramsSynchronizable={paramsSynchronizable}
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/FoamLabScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function FoamLabScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" translucent />
<StatusBar barStyle="light-content" />
{VARIANTS.map((name, i) => (
<View key={name} style={{ height: tileH }}>
<ShaderView
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/HoloCardScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function CardEffect({
export default function HoloCardScreen() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" />
<StatusBar barStyle="light-content" />

<View style={styles.header}>
<BackButton />
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/HoloFoilScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function HoloFoilScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" translucent />
<StatusBar barStyle="light-content" />

<View style={styles.center}>
<GestureDetector gesture={pan}>
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/HomeScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ export default function HomeScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" />
<StatusBar barStyle="light-content" />

<View style={styles.header}>
<Text style={styles.title}>React Native Effects</Text>
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/HourglassScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default function HourglassScreen() {

return (
<View style={styles.root}>
<StatusBar barStyle="dark-content" translucent backgroundColor="#0000" />
<StatusBar barStyle="dark-content" />
<Hourglass
style={StyleSheet.absoluteFill}
paramsSynchronizable={paramsSynchronizable}
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/IMessageScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export default function IMessageScreen() {
style={styles.root}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<StatusBar barStyle="light-content" backgroundColor={IM_BG} translucent />
<StatusBar barStyle="light-content" />

<ScrollView
ref={scroll}
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/InkBloomScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export default function InkBloomScreen() {

return (
<View style={styles.container} onLayout={onLayout}>
<StatusBar barStyle="light-content" backgroundColor="#000" translucent />
<StatusBar barStyle="light-content" />

<InkBloom
style={StyleSheet.absoluteFill}
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/IridescenceScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function IridescenceScreen() {
<View style={styles.container}>
<Iridescence style={StyleSheet.absoluteFill} />

<StatusBar barStyle="light-content" backgroundColor="transparent" />
<StatusBar barStyle="light-content" />

<Header
title="Iridescence"
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/LinearGradient/LinearGradientAnimatedScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function LinearGradientAnimatedScreen() {
style={StyleSheet.absoluteFill}
/>

<StatusBar barStyle="light-content" backgroundColor="transparent" />
<StatusBar barStyle="light-content" />

<View style={styles.header}>
<BackButton />
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/LinearGradient/LinearGradientListScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function LinearGradientListScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" />
<StatusBar barStyle="light-content" />

<Header
title="Linear Gradients"
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/LinearGradient/LinearGradientStaticScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const GRADIENT_PRESETS: GradientConfig[] = [
export default function LinearGradientStaticScreen() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" />
<StatusBar barStyle="light-content" />

<Header
title="Static Linear Gradients"
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/LiquidChromeScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function LiquidChromeScreen() {
<View style={styles.container}>
<LiquidChrome style={StyleSheet.absoluteFill} />

<StatusBar barStyle="light-content" backgroundColor="transparent" />
<StatusBar barStyle="light-content" />

<Header
title="Liquid Chrome"
Expand Down
6 changes: 3 additions & 3 deletions example/src/screens/MaterialsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export default function MaterialsScreen() {
height: interpolate(p, [0, 1], [rect.height, winH]),
borderRadius: interpolate(p, [0, 1], [CARD_RADIUS, 0]),
};
}, [rect, winW, winH]);
});

// Counter-translate the full-screen shader so it stays screen-aligned while
// the clipping window grows over it.
Expand All @@ -197,7 +197,7 @@ export default function MaterialsScreen() {
top: -interpolate(p, [0, 1], [rect.y, 0]),
left: -interpolate(p, [0, 1], [rect.x, 0]),
};
}, [rect]);
});

const closeFade = useAnimatedStyle(() => ({
opacity: interpolate(progress.value, [0.65, 1], [0, 1]),
Expand All @@ -210,7 +210,7 @@ export default function MaterialsScreen() {

return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#000" translucent />
<StatusBar barStyle="light-content" />

<ScrollView
contentContainerStyle={[
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/ParticleDispersionScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export default function ParticleDispersionScreen() {

return (
<View style={styles.root}>
<StatusBar barStyle="light-content" translucent backgroundColor="#0000" />
<StatusBar barStyle="light-content" />
<ParticleDispersion
style={StyleSheet.absoluteFill}
paramsSynchronizable={paramsSynchronizable}
Expand Down
Loading
Loading