React Navigation: "Nested NavigationContainer" error and app stuck on loading screen

System: OS: macOS 15.7.2 CPU: (24) arm64 Apple M2 Ultra Memory: 133.40 GB / 192.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.20.8 path: /Users/u/.nvm/versions/node/v18.20.8/bin/node Yarn: Not Found npm: version: 10.8.2 path: /Users/u/.nvm/versions/node/v18.20.8/bin/npm Watchman: version: 2025.11.10.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.16.2 path: /Users/u/.rbenv/shims/pod SDKs: iOS SDK: Platforms: - DriverKit 25.1 - iOS 26.1 - macOS 26.1 - tvOS 26.1 - visionOS 26.1 - watchOS 26.1 Android SDK: Not Found IDEs: Android Studio: 2025.2 AI-252.25557.131.2521.14432022 Xcode: version: 26.1.1/17B100 path: /usr/bin/xcodebuild Languages: Java: version: 11.0.29 path: /opt/homebrew/opt/openjdk@11/bin/javac Ruby: version: 3.3.0 path: /Users/u/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": installed: 11.3.8 wanted: latest react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.6 wanted: 0.72.6 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: false newArchEnabled: Not found

Problem

My app gets stuck on the loading screen. I'm getting errors about nested NavigationContainer. The only NavigationContainer I found was in the MainScreen.tsx.

Error Messages

1. Nested NavigationContainer error:

Error: Looks like you have nested a 'NavigationContainer' inside another. 
Normally you need only one container at the root of the app.

My Code Structure

App.tsx:

import React from 'react';
import { NavigationContainer, useLinking } from '@react-navigation/native';
import MainScreen from './screens/MainScreen';

export default function App() {
  const ref = React.useRef(null);
  const [isReady, setIsReady] = React.useState(false);
  const [initialState, setInitialState] = React.useState();

  const { getInitialState } = useLinking(ref, {
    prefixes: ['myapp://'],
    config: {
      screens: {
        Home: 'home',
      },
    },
  });

  React.useEffect(() => {
    getInitialState()
      .then(state => {
        if (state !== undefined) {
          setInitialState(state);
        }
      })
      .finally(() => {
        setIsReady(true);
      });
  }, [getInitialState]);

  if (!isReady) {
    return <Text>Loading...</Text>;
  }

  return (
    <NavigationContainer ref={ref} initialState={initialState}>
      <MainScreen />
    </NavigationContainer>
  );
}

MainScreen.tsx:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function MainScreen() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.tsx:

import React from 'react';
import { View, Text } from 'react-native';

export default function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

What I've Tried

1. Removing NavigationContainer from MainScreen - got "Couldn't register the navigator" error

2. Using linking prop instead of useLinking - still stuck on loading

3. Upgrading the react-navigation packages from v5 to v6

Questions

1. How should I structure my navigation with React Navigation v6?

2. Should I use useLinking or the linking prop?

Additional Context

• The app was working on an older version of React Native (0.62)

• Recently upgraded to RN 0.72