[ReactNative] Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider 에러 해결

#서론

 리액트 네이티브 프로젝트를 설치한 후 UI를 만들때 라이브러리의 도움을 받기 위해서 react-native-elements를 활용하던 와중 Docs에 써있는 Header부분을 참고해 넣으려고 할 때 저 오류가 발생했고 그 것을 해결하기 위해 깃허브 커뮤니티를 활용했고 그에 따른 방법론을 서술해 놓으려 한다.

#본론

• 원인
  • npm install react-native-safe-area-context
  • 해당 부분을 설치한 후 어플리케이션을 새로고침하자 저 오류가 떴다.
  • 아래의 출처를 참고하니 RNCSafeAreaProvider 라는 디펜던시가 2개 설치되어 있기에
    해당 오류가 발생했다고 결론지었다.
  • 나는 리액트네이티브 앱을 Expo를 활용해서 프로젝트를 만들었고
    react-native-safe-area-context는이미 존재하고 있었다.
  • 기존에 존재하던 디펜던시와 새로 설치한 디펜던시의 경로의 차이로 어떤것을 쓸지 컴퓨터가 이해를 못했기 때문에 해당 오류가 났다.
• 해결
  • 디펜던시 설치를 담당하는 packages.json에 obejct.dependencies.react-native-safe-area-context처럼
    react-native-safe-area-context 가 존재하고 있었고

    {
      "name": "workoutdiary",
      "version": "1.0.0",
      "main": "index.js",
      "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "web": "expo start --web",
        "start": "react-native start",
        "test": "jest"
      },
      "dependencies": {
        "expo": "~41.0.1",
        "expo-splash-screen": "~0.10.2",
        "expo-updates": "~0.5.4",
        "opencollective-postinstall": "^2.0.3",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-native": "~0.63.4",
        "react-native-elements": "^3.4.2",
        "react-native-gesture-handler": "~1.10.2",
        "react-native-reanimated": "~2.1.0",
        "react-native-screens": "~3.0.0",
        "react-native-unimodules": "~0.13.3",
        "react-native-web": "~0.13.12",
        "react-native-safe-area-context": "3.2.0"
      },
      "devDependencies": {
        "@babel/core": "^7.9.0",
        "@types/react": "~16.9.35",
        "@types/react-native": "~0.63.2",
        "babel-preset-expo": "~8.3.0",
        "jest-expo": "~41.0.0",
        "typescript": "~4.0.0"
      },
      "jest": {
        "preset": "react-native"
      },
      "private": true
    }​

    
    해당부분을 지우고 저장한 후 node_module과 packeage-lock.json
    부분을 삭제했다.

  • npm install
    # 다음 커맨드로 node_module을 다시 설치해주었다.

  • expo install react-native-elements
    expo install react-native-safe-area-context
    #다음과 같은 커맨드로 설치했다.​

  • 문제를 해결했다.

 

 

 

# 출처

https://github.com/th3rdwave/react-native-safe-area-context/issues/110

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider · Issue #110 · th3rdwave/react-native-