Screen is loaded twice

[1280103995]

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;

[1280103995]

Downgrading to v6 still encounters the same problem.

"@react-navigation/drawer": "^6.6.7",
"@react-navigation/native": "^6.1.10",
"@react-navigation/stack": "^6.3.21",

[chiaramooney]

We have seen issues before with duplicate screen renders / screens continuing to be rendered after navigating to another page. This is due to limitations with our implementation of the importantForAccessibility prop and the current Windows implementation of react-native-screens.

Can I confirm that you are building an old architecture app? If so, note that we will probably not have cycles to resolve this issue on Paper, as our team is now focused on bringing new architecture support to Windows.

@Yajur-Grover Can you confirm if this repros in Gallery?

[1280103995]

Correct, it is to use the old architecture.