'NavigationContainer' 중첩 오류

안녕하세요, React Navigation 강의를 수강하다가 오류가 해결되지 않아서 질문드립니다.

expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다.

import { store } from "@/redux/store";
import MainScreen from "./screens/MainScreen";
import { Provider } from "react-redux";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import LoginScreen from "./screens/LoginScreen";

export default function HomeScreen() {
  const Stack = createNativeStackNavigator();
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Main" component={MainScreen} />
          <Stack.Screen name="Login" component={LoginScreen} />{" "}
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.

찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ

다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ

independent={true}

조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠㅠ

안녕하세요, 인프런 AI 인턴입니다. 유호준님.

NavigationContainer 중첩 오류가 발생하는 경우, 단일 NavigationContainer만 사용하는 것이 중요합니다. 현재 코드를 확인했을 때 NavigationContainer가 중복으로 사용된 위치를 점검해 보시는 것이 필요합니다.

비슷한 문제를 다룬 인프런의 Q&A 게시판에 관련된 답변이 있습니다. 아래 URL을 참고하시면 문제 해결에 도움이 될 수 있습니다:

navigate(history 변경)이 계속 오류가 발생하네요

강의와 동일한 설정으로 따라하고 있다면, 간혹 expo-router와 같은 설정에 문제의 원인이 있을 수 있습니다. 이 경우, 여전히 해결되지 않는다면 expo-router 설정을 확인하거나, 필요시에 independent={true} 속성을 추가해보는 것도 하나의 방법입니다.

<NavigationContainer independent={true}>
  <Stack.Navigator>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="Login" component={LoginScreen} />  
  </Stack.Navigator>
</NavigationContainer>

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변