Screen is loaded twice

Problem Description

After the SplashScreen is loaded, navigating from the current screen to another screen causes the SplashScreen to be loaded again.

From the video you can see that SplashScreen Create is printed twice

Steps To Reproduce

1. create a new RNW app
2. install react-navigation
3. Copy the sample code to App.tsx

Expected Results

Each Screen is loaded only once

CLI version

15.0.1

Environment

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.26100
  CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
  Memory: 2.74 GB / 15.68 GB
Binaries:
  Node:
    version: 20.11.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.2.4
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-223.8836.35.2231.11005911
  Visual Studio:
    - 17.11.35327.3 (Visual Studio Community 2022)
Languages:
  Java:
    version: 17.0.6
    path: C:\Program Files\Android\Android Studio\jbr\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-windows:
    installed: 0.76.7
    wanted: 0.76.7
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

"dependencies": {
    "@react-navigation/drawer": "^7.1.1",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/stack": "^7.1.1",
    "react": "18.3.1",
    "react-native": "0.76.7",
    "react-native-safe-area-context": "^5.2.0",
    "react-native-windows": "^0.76.0"
  },

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

App.tsx

import {NavigationContainer, NavigationState, useNavigation} from "@react-navigation/native";
import {createStackNavigator, StackScreenProps} from "@react-navigation/stack";
import {useEffect, useRef} from "react";
import {Button, Text, View} from "react-native";

function SplashScreen({navigation}: StackScreenProps<any>) {

  useEffect(() => {
    console.log('SplashScreen Create');
    setTimeout(() => {
      navigation.navigate('Home');
    }, 2000);
  }, []);

  return(
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>SplashScreen</Text>
    </View>
  );
}

function HomeScreen() {
  const navigation = useNavigation<any>();

  useEffect(() => {
    console.log('HomeScreen Create');
  }, []);

  return(
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>HomeScreen</Text>
      <Button onPress={() => navigation.navigate('Modal')} title="Open Modal"/>
    </View>
  );
}

function MainModal() {
  const navigation = useNavigation<any>();

  useEffect(() => {
    console.log('Modal Create');
  }, []);

  return(
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor:'rgba(0,0,0,0.5)'}}>
      <View style={{width: 200, height: 200, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
        <Button onPress={navigation.goBack} title="Close"/>
      </View>
    </View>
  );
}

const Stack = createStackNavigator();

export const AppNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Group
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Splash" component={SplashScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Modal" component={MainModal} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

function App() {

  const prevScreen = useRef('unknown');

  const getActiveScreenName = (navigationState: NavigationState): string | null => {
    if (!navigationState.routes || navigationState.routes.length === 0) {
      return null;
    }
    const route = navigationState.routes[navigationState.index];
    if (route.state && 'routes' in route.state) {
      return getActiveScreenName(route.state as NavigationState);
    }
    return route.name;
  };

  const onNavigationStateChange = (navigationState: NavigationState | undefined): void => {
    if (!navigationState) {
      return;
    }
    const currentScreen = getActiveScreenName(navigationState);
    if (currentScreen && prevScreen.current !== currentScreen) {
      prevScreen.current = currentScreen;
      console.log('Screen: ', currentScreen);
    }
  };

  return (
      <NavigationContainer onStateChange={onNavigationStateChange}>
        <View style={{flex: 1}}>
          <AppNavigator />
        </View>  
      </NavigationContainer>
  );
}

export default App;

Reproduce the issue with the provided App.tsx using the listed React Native Windows and navigation versions. Start at AppNavigator, NavigationContainer, and SplashScreen, then compare the “SplashScreen Create” logs while navigating to Home and Modal. Done means each screen, especially SplashScreen, is loaded only once.