리액트 네이티브 04 - svg 사용하기

리액트 네이티브는 일반적으로 svg를 지원하지 않기에 사용할 수 있게 추가 설정을 해야합니다.

 

svg 요소나 속성들을 사용할 수 있게 해주며

npm install react-native-svg --save

 

svg 파일을 import할 수 있게 해줍니다.

npm install -D react-native-svg-transformer

https://github.com/kristerkari/react-native-svg-transformer

GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in

 

문서 페이지에 들어가보면 다음과 같이 metro.config.js를 만들고 다음 내용을 넣어줘야합니다.

https://www.svgrepo.com/

SVG Repo - Free SVG Vectors and Icons

 

svg 파일을 받아주고 ~ 아래와 같이 assets 폴더에 있는 svg를 임포트 했당.

 

 

근데 또 에러가 떴다... 라이브러리 호환성 문제 같은데 쉽게 해결되지 않았다.. 

혹시 몰라 node_modules와 package-lock.json을 지우고 다시 설치하니

 

다음 에러가 떴다. svg 버전이 예상보다 높다구 한다. 버전을 낮추고 다시 하니 똑같은 에러가 또 시작되었다... 하..

리액트, 리액트 네이티브, 엑스포 svg 버전 계속 낮추고 높이고 왔다갔다 했는데 똑같은 에러가 계속 떠서 ... ㅠ

해결 뒤에 내용 추가하겠씁니다..

 

--->

 

정확한 해결 방법은 아닐 수 있지만 프로젝트를 다 삭제하고 몇 번을 다시 시작했으며

노드 버전을 너무 낮게 잡아서 생겼던 에러 같습니다.

 

가장 직전의 LTS 버전으로 바꾸고 해결할 수 있었습니다.

 

 

이제 SVG 파일이 잘 보입니다 !!! 하하...