강의

멘토링

커뮤니티

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

김라영님의 프로필 이미지
김라영

작성한 질문수

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

[개발] Bottom Tabs 아이콘 연결

App.tsx에서 Icon을 못가지고 오는 오류..('VectorIcons' could not be found ~)

해결된 질문

작성

·

139

0

왜인지 모르게 npm install로 npm install --save @react-native-vector-icons/fontawesome5이런식으로 설치를 해주고 나서import FontAwesome5 from '@react-native-vector-icons/fontawesome5'; 을 하면 icon을 가지고 오지 못해서
[runtime not ready]: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes, stack: invariant@2200:25~

위에와 같은 오류가 발생합니다,,, font가 제대로 카피되지 않아서 벌어지는 일 같아용,,,


그래서 여러가지 시도해본 결과 다른거 할 필요없이
import FontAwesome5 from '@react-native-vector-icons/fontawesome5';

이런식으로 Icon이 아니라 FontAwesome5를 해주니까 되더라구요,,? 그런 후에 다시

import Icon from '@react-native-vector-icons/fontawesome5';

이렇게 Icon으로 해주니까 font들이 제대로 카피가 되더라구요,,?

image.png


위에 사진처럼 복사되면 제대로 된거죠?
(Icon 잘 나옵니다,,)
혹시 바로 import Icon했을때는 왜 안된건지 아실까요?

답변 3

0

정현우님의 프로필 이미지
정현우
지식공유자

TurboModuleRegistry.getEnforcing(...) 에러가 아이콘 모듈이 제대로 등록이 안돼서 나오는 에러입니다.

개인적인 의견으로는 vector icons 라이브러리 설치 이후 바로 모듈을 불러오고 빌드하셨을 때 vector icons 라이브러리 자체가 인식이 안돼서 발생하는 문제인것 같습니다.

추후 강의에도 설명드리는 내용인데, 원래 import를 하실 때 Icon 또는 FontAwesome5이 들어가는 그 자리의 이름은 그냥 마음대로 설정해도 되는 거거든요(Icon을 하셔도 FontAwesome5을 하셔도 차이가 없습니다. 이름만 다른 것입니다.). 그래서 Icon을 했을땐 안 되고 FontAwesome5를 했을 땐 되고의 문제가 아니라고 판단됩니다.

따라서 라이브러리 설치 이후에 즉시 불러오기를 하시고 빌드하시면 앱이 라이브러리를 바로 인식하지 못한다는 간단한 이슈인 것 같습니다.

0

정현우님의 프로필 이미지
정현우
지식공유자

흠.. 그러게요??

전 일단 Icon으로 임포트했을때 바로 돼서 문제가 없다고 판단했는데, 이런 문제가 숨어있는지 몰랐네요.

아마 간단한 캐시 오류 아닐까요?? 일단 바로 서치해보고 알려드릴게요!

0

안녕하세요, 인프런 AI 인턴입니다. 김라영님.

React Native 환경에서 react-native-vector-icons 모듈을 사용하면서 발생한 문제에 대해 설명드리겠습니다. 주신 오류 Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found는 주로 모듈이 올바르게 설치되거나 링크되지 않았을 때 발생할 수 있습니다.

문제 원인 및 해결 방법

  1. 자동 연결 문제: react-native-vector-icons 패키지를 설치한 후, 대부분의 경우 자동으로 네이티브 모듈이 연결되어야 하지만, 그렇지 않은 경우 문제가 발생할 수 있습니다. 이때 수동으로 네이티브 코드에 추가해주는 방법이 있습니다.

  2. 캐시 문제: 모듈을 설치한 후, 이전의 캐시가 문제가 될 수 있습니다. 캐시를 지우고 프로젝트를 재시작하는 것이 도움이 될 수 있습니다.

    • npm start -- --reset-cache 명령어를 통해 캐시를 지우고 실행해보세요.
  3. import 과정: 처음에 import Icon from '@react-native-vector-icons/fontawesome5';가 안 되는 것은, 모듈이 제대로 로드되지 않거나 캐시 문제가 있을 수 있습니다. FontAwesome5 모듈을 직접 가져와 초기화한 후 제대로 작동되는 것을 확인하셨듯이, import 과정에서 문제가 생길 수 있습니다.

  4. 네이티브 링크 문제: react-native CLI를 사용했다면 링크 문제일 수 있지만, Expo 환경에서는 다르게 처리되어야 합니다. Expo를 사용하고 있는 경우, expo install 명령을 사용하여 설치하는 것도 좋은 방법입니다.

사진에 대한 설명

첨부하신 사진은 터미널에서 react-native-vector-icons 과정에서의 로그를 보여주고 있습니다. 폰트 파일들이 여러 디렉토리에서 복사되는 과정을 설명하고 있으며, 이는 정상적인 설치 과정의 하나입니다.

관련 질문 링크:

여기서 연결될 수 있는 추가적인 논의들입니다:
1. expo로 설치해도 되나요?
- 내용 요약: Expo를 통해 설치할 때의 차이점 및 설정 방법에 대한 설명이 포함돼 있습니다.

이 답변이 김라영님의 문제 해결에 도움이 되길 바랍니다. 추가적으로 궁금한 점이나 다른 도움이 필요하시면 언제든지 질문해 주세요.

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

김라영님의 프로필 이미지
김라영

작성한 질문수

질문하기