Navigate in expo-router v4.0.17 leave screen in blank

[raszagar]

Hi!

When I created app with expo:

npx create-expo-app@latest ./
npm run reset-project

When navigate 4 or 5 times with "router.navigate('/path')" lost header and screen goes blank.

Dependencies

"expo": "~52.0.37", "expo-router": "~4.0.17", "react": "18.3.1", "react-native": "0.76.7",

Step to reproduce issue

npx expo start

Navigate through the routes with the first button 4 or 5 times

* Happens on Android (tested on a physical device v14), does not happen on the web

Code

https://github.com/raszagar/rn-bug-expo-router

/app/_layout.tsx

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack screenOptions={{
      headerShown: true,
    }} />
  );
}

/app/root.tsx

import { router } from "expo-router";
import { Button, Text, View } from "react-native";


export default function RootScreen() {

    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text>Root Screen</Text>
            <Button title="Go to Home" onPress={() => { router.navigate('/home')}} />
            <Text></Text>
            <Button title="Go to Profile" onPress={() => { router.navigate('/profile')}} />
        </View>
    );
}

/app/index.tsx

import { Redirect, router } from "expo-router";
import { Button, Text, View } from "react-native";

export default function Index() {
  return <Redirect href="/root" />;
}

/app/(tabs)/_layout.tsx

import { Stack } from "expo-router";

export default function TabsLayout() {
  return (
    <Stack screenOptions={{
      headerShown: true,
    }} />
  );
}

/app/(tabs)/home.tsx

import { router } from "expo-router";
import { Button, Text, View } from "react-native";


export default function HomeScreen() {

    return(
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text>Home Screen</Text>
            <Button title="Go to Profile" onPress={() => { router.navigate('/profile')}} />
            <Text> </Text>
            <Button title="Go to Root" onPress={() => { router.navigate('/root')}} />
        </View>
    );
}

/app/(tabs)/profile.tsx

import { router } from "expo-router";
import { Button, Text, View } from "react-native";


export default function ProfileScreen() {

    return(
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text>Profile Screen</Text>
            <Button title="Go to Home" onPress={() => { router.navigate('/home')}} />
            <Text> </Text>
            <Button title="Go to Root" onPress={() => { router.navigate('/root')}} />
        </View>
    );
}

Version 3.5.23 works fine

Downgrading the version of expo-router to v3.5.23 works fine.

[du5rte]

@raszagar started experiencing the same today when I actually run it on a device, works fine on the simulator. After some digging seems related to #793 I'm working around it by using useEffect

Instead of

if (!isSignedIn) {
  return <Redirect href="/signup" />;
}

I'm doing

useEffect(() => {
  if (!isSignedIn) {
    router.replace('/signup');
  }
}, [isSignedIn]);

Seems like historically it has had problems, but I hope it get's sorted soon, I really like the simplicity of <Redirect />