RN 최신버전 react-native-vector-icons 사용

Question

현재 RN0.77 버전으로 프로젝트를 하고있는데, react-native-vector-icons가 강사님께서 강의를 찍으신 당시와 좀 바뀌어서 몇 개의 아이콘 종류들은 사라지고 다른 것들로 대체되거나 몇개는 기존 것이 있는 상황입니다. 근데 옛날과 다르게 github문서(https://github.com/oblador/react-native-vector-icons)의 과정과 강사님의 과정이 좀 차이가 있어서 다음과 같이 수행했습니다.

1. 라이브러리 설치
- ```npm install --save @react-native-vector-icons/common``` 에서 common을 제외하고 받았습니다.
2. node_modules 에서 ttf파일 추출 후 Fonts폴더 생성 후 그곳에 넣기
- 추후에 build phase에서 적용된 것 확인함(5-3 강의 16분23초 쯤인가 그 과정)
3. 라이브러리 호출 후 사용
- 이 때 계속 아이콘이 깨져서 나옵니다

RN버전이랑 안맞는 건지, 아니면 공식문서와 강의의 설정이 차이가 있는지 잘 모르겠네요.
import icon from '@react-native-vector-icons/ionicons 로 호출하게 되면 에러메시지는 안뜨지만 사진처럼 나오고, import icon from 'react-native-vector-icons/ionicons 로 하게되면 아래와 같은 에러 로그가 나옵니다.
```
Error: Unable to resolve module react-native-vector-icons/ionicons from /Users/juhkang/Documents/Github/ReactNative/matzip/Matzip_FE/src/navigations/drawer/MainDrawerNavigator.tsx: react-native-vector-icons/ionicons could not be found within the project or in these directories:
```

77버전에서 react-native-vector-icons를 자유롭게 사용하고 싶은데 해결책이 있을까요?

juhyunk0820 · Answer

해결했습니다! npm 버전이 안맞으면서 생긴 충돌이었네요.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. juhyunk0820님께서 겪고 계신 문제는 react-native-vector-icons 라이브러리가 React Native의 최신 버전과의 호환성 문제로 보입니다. 이 문제는 주로 라이브러리의 설치 및 설정 과정에서 발생할 수 있습니다. 다음은 문제 해결을 위한 몇 가지 방법입니다:

라이브러리 정확한 설치:
- react-native-vector-icons 전체 패키지를 설치할 때 npm install --save react-native-vector-icons 명령어를 사용하세요. @react-native-vector-icons/common 패키지는 본래의 라이브러리가 아니기 때문에 정상적으로 작동하지 않을 수 있습니다.
react-native link 사용:
- React Native 최신 버전에서는 자동으로 링크가 되지만, 때때로 수동으로 링크하는 것이 필요할 수 있습니다. 설치 후 react-native link react-native-vector-icons 명령어를 실행해 보세요.
Info.plist 설정 (iOS의 경우):
- iOS의 경우 Info.plist 파일에 Fonts provided by application 항목을 추가하고, 여기에 사용하려는 아이콘의 TTF 파일 이름을 추가해줘야 합니다.
캐시 초기화:
- 종종 프로젝트 내의 캐시 문제로 인해 아이콘이 정상적으로 표시되지 않습니다. npx react-native start --reset-cache 명령어로 캐시를 초기화해보세요.
특정 아이콘 이름 확인:
- React Native Vector Icons의 아이콘 이름이 시간이 지나면서 변경되었을 수 있습니다. 사용하려는 아이콘의 최신 이름을 공식 문서에서 확인해주세요.

관련 질문에서 유사한 문제가 설명된 답변을 찾을 수 있습니다:
- React Native에서 아이콘 이슈 해결 방법

위 과정들 중 하나라도 시도하셔서 문제 해결에 도움이 되길 바랍니다. 현재 베타 기능으로 제공되는 답변이므로, 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점 또는 문제가 지속된다면 추가로 질문해 주세요. 지식공유자께서 직접 답변을 제공해주실 것입니다.

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

RN 최신버전 react-native-vector-icons 사용