Im running into an issue i cant seem to fix … Im using Expo Router and in my layout file in checking if the user is authenticated, if they are, send them to the (app) which is a tabs layout. If they are not authenticated, then return the welcome page.
After I log in and it goes to show the first page of the tabs, it crashes. But if i load the app back up, as it already has a token it loads the tabs fine, there seems to be an issue with the redirect which i cant seem to figure out.
I did a expo prebuild and ran it in XCode to see if I could see any errors, and the following showed up;
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Application tried to present modally a view controller <RCTModalHostViewController: 0x11c4632f0> that is already being presented by <UIViewController: 0x107b0b7a0>.'
*** First throw call stack:
(
0 CoreFoundation 0x00007ff80049928d __exceptionPreprocess + 242
1 libobjc.A.dylib 0x00007ff800063894 objc_exception_throw + 48
2 UIKitCore 0x00007ff8051be215 -[UIViewController _presentViewController:withAnimationController:completion:] + 5813
3 UIKitCore 0x00007ff8051bed86 __63-[UIViewController _presentViewController:animated:completion:]_block_invoke_2 + 70
4 UIKitCore 0x00007ff80622eac4 +[UIView(Animation) performWithoutAnimation:] + 84
5 UIKitCore 0x00007ff8051becdb __63-[UIViewController _presentViewController:animated:completion:]_block_invoke + 211
6 UIKitCore 0x00007ff8051bf016 -[UIViewController _performCoordinatedPresentOrDismiss:animated:] + 637
7 UIKitCore 0x00007ff8051bebc8 -[UIViewController _presentViewController:animated:completion:] + 165
8 UIKitCore 0x00007ff8051bf0ca -[UIViewController presentViewController:animated:completion:] + 153
9 RentSafe 0x00000001031cf284 __76-[RCTModalHostViewManager presentModalHostView:withViewController:animated:]_block_invoke.42 + 212
10 libdispatch.dylib 0x0000000106f77747 _dispatch_call_block_and_release + 12
11 libdispatch.dylib 0x0000000106f789f7 _dispatch_client_callout + 8
12 libdispatch.dylib 0x0000000106f88856 _dispatch_main_queue_drain + 1362
13 libdispatch.dylib 0x0000000106f882f6 _dispatch_main_queue_callback_4CF + 31
14 CoreFoundation 0x00007ff8003f5850 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
15 CoreFoundation 0x00007ff8003f018b __CFRunLoopRun + 2463
16 CoreFoundation 0x00007ff8003ef409 CFRunLoopRunSpecific + 557
17 GraphicsServices 0x00007ff80fcdd187 GSEventRunModal + 137
18 UIKitCore 0x00007ff805b703a2 -[UIApplication _run] + 972
19 UIKitCore 0x00007ff805b74e10 UIApplicationMain + 123
20 RentSafe 0x0000000102d586d0 main + 96
21 dyld 0x00000001063023ee start_sim + 10
22 ??? 0x0000000111cb13a6 0x0 + 4593488806
)
libc++abi: terminating due to uncaught exception of type NSException
This seems to be the cause;
Application tried to present modally a view controller <RCTModalHostViewController: 0x11c4632f0> that is already being presented by <UIViewController: 0x107b0b7a0>.'
I ahve no idea what this means or how to even go about fixing it. Im hopinf someone could shed some light on it. The code in my _layout.tsx file where the redirect is happening is as follows;
import { useEffect } from 'react'
import { Stack, useRouter, useSegments } from 'expo-router'
import { AuthProvider, useAuth } from '../context/AuthContext'
import { useFonts } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
const queryClient = new QueryClient()
SplashScreen.preventAutoHideAsync()
const InitialLayout = () => {
const { authState, initialized } = useAuth()
const segments = useSegments()
const router = useRouter()
const [fontsLoaded, fontError] = useFonts({
'rob-thin': require('../assets/fonts/Roboto-Thin.ttf'),
'rob-light': require('../assets/fonts/Roboto-Light.ttf'),
})
useEffect(() => {
const loadFonts = async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync()
}
}
loadFonts()
if (! initialized || ! fontsLoaded) return
const inAuthGroup = segments[0] === '(app)'
if (authState?.authenticated && !inAuthGroup) {
router.replace('/(app)')
} else if (!authState?.authenticated) {
router.replace('/welcome')
}
}, [initialized, authState, fontsLoaded])
if (! fontsLoaded) {
return null
}
return (
<>
{authState?.authenticated ? (
<Stack>
<Stack.Screen name="(app)" options={{ headerShown: false }} />
</Stack>
) : (
<Stack>
<Stack.Screen name="welcome" options={{ headerShown: false }} />
<Stack.Screen name="login" options={{ headerShown: false }} />
<Stack.Screen name="register" options={{ headerShown: false }} />
</Stack>
)}
</>
)
}
const RootLayout = () => {
return (
<QueryClientProvider client={queryClient}>
<AuthProvider>
<InitialLayout />
</AuthProvider>
</QueryClientProvider>
)
}
export default RootLayout
If anyone has any insight or has seen this before it would be greatly appreciated. I’ve spent days trying to find a solution.




