TypeError: expected dynamic type 'boolean', but had type 'string' crash with 4.17.x+ on Expo SDK 54 #3470
Description
Description
When using react-native-screens version 4.17.0, 4.17.1, 4.18.0, or 4.19.0-nightly with Expo SDK 54, the app crashes immediately on render
with:
Error: Exception in HostFunction: TypeError: expected dynamic type 'boolean', but had type 'string'
On Android the error is: java.lang.String cannot be cast to java.lang.Boolean
This happens with the most minimal setup - just a <Stack> with a single <Stack.Screen>:
import { Stack } from "expo-router";
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="index" />
</Stack>
);
}Version 4.16.0 works fine. The issue was introduced in 4.17.0.
Steps to reproduce
- Create a new Expo SDK 54 project: npx create-expo-app@latest
- Upgrade react-native-screens to 4.17.x: npm install react-native-screens@4.17.1 --save-exact
- Run the app
- App crashes immediately
Expected behavior
App should render without crashing.
Actual behavior
App crashes immediately with TypeError about boolean/string type mismatch.
Package versions
- react-native-screens: 4.17.0 / 4.17.1 / 4.18.0 / 4.19.0-nightly (all crash)
- react-native-screens: 4.16.0 (works fine)
- expo: ~54.0.27
- expo-router: ~6.0.17
- react-native: 0.81.x
- @react-navigation/native: ^7.1.25
- @react-navigation/native-stack: ^7.8.6
Platforms
- iOS
- Android
Additional context
This is a regression from 4.16.0. The 4.17.0 release notes mention "remove native code/deps related to props deprecated by edge-to-edge
enforcement" for Android Stack v4 which might be related.
We need 4.17.x for the iOS 26 back button navigation fixes (issues #3270 and react-navigation#12778), but cannot use it due to this crash.
Reproduction:
Just setup brand new expo app and install newer version of react-native-screen as 04.16.x and it will break.
package.json:
"dependencies": {
"@expo/vector-icons": "^15.0.3",
"@react-navigation/bottom-tabs": "^7.4.0",
"@react-navigation/elements": "^2.6.3",
"@react-navigation/native": "^7.1.8",
"expo": "~54.0.27",
"expo-constants": "~18.0.11",
"expo-font": "~14.0.10",
"expo-haptics": "~15.0.8",
"expo-image": "~3.0.11",
"expo-linking": "~8.0.10",
"expo-router": "~6.0.17",
"expo-splash-screen": "~31.0.12",
"expo-status-bar": "~3.0.9",
"expo-symbols": "~1.0.8",
"expo-system-ui": "~6.0.9",
"expo-web-browser": "~15.0.10",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-native": "0.81.5",
"react-native-gesture-handler": "~2.28.0",
"react-native-reanimated": "~4.1.1",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "4.17.0",
"react-native-web": "~0.21.0",
"react-native-worklets": "0.5.1"
},
"devDependencies": {
"@types/react": "~19.1.0",
"eslint": "^9.25.0",
"eslint-config-expo": "~10.0.0",
"typescript": "~5.9.2"
},
import { Tabs } from 'expo-router';
import React from 'react';
import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
export default function TabLayout() {
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
tabBarButton: HapticTab,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
}}
/>
<Tabs.Screen
name="explore"
options={{
title: 'Explore',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
}}
/>
</Tabs>
);
}