ARTICLE AD BOX
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
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
Removing NavigationContainer from MainScreen - got "Couldn't register the navigator" error
Using linking prop instead of useLinking - still stuck on loading
Upgrading the react-navigation packages from v5 to v6
Questions
How should I structure my navigation with React Navigation v6?
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
