Expo 54 + React Native Screens forces liquid glass header buttons #3226
Description
Description
After upgrading to Expo 54, the buttons in all headers are liquid glass buttons on iOS, and there's no way to turn this off. I use headerLeft and headerRight for things other than clickable buttons, but now there is no way to not have static content wrapped in a liquid glass bubble. Additionally, it seems that React Suspense inside headers with Expo 54 will not re-render once the suspense completes. You have to navigate away and back to get it to render (and by re-render I mean the bubble itself, not the content inside it that should push the bubble to expand).
On first render:
On navigate away and back:
In Expo 53:
Steps to reproduce
const Stack = createNativeStackNavigator<RootStackParamList>();
export const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
component={SomeRoute}
options={{
headerLeft: ComponentWithSuspense,
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
function ComponentWithSuspense() {
return (
<React.Suspense fallback={null}>
{<ComponentThatSuspends />}
</React.Suspense>
);
}
function ComponentThatSuspends() {
const [resolved, setResolved] = React.useState(false);
const [promise] = React.useState(
new Promise((resolve) => {
setTimeout(() => resolve(true), 1000);
}).then(() => {
setResolved(true);
}),
);
if (!resolved) {
throw promise;
}
return <Text>Resolved</Text>;
}Snack or a link to a repository
Screens version
4.16.0
React Native version
0.81.4
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
Fabric (New Architecture)
Build type
Debug mode
Device
Real device
Device model
iPhone 16 Pro
Acknowledgements
Yes