react-native : expo 에서 svg 이미지 사용하기

https://github.com/kristerkari/react-native-svg-transformer#installation-and-configuration

 

kristerkari/react-native-svg-transformer

 

https://github.com/react-native-community/react-native-svg

react-native-community/react-native-svg

 

를 참고했습니다.

!주의

React Natvie v0.57 혹은 그보다 최신 버전 / Expo SDK v31.0.0 혹은 그보다 최신 버전에서만 정상작동합니다! 해보기전에 버전확인을 하세요.

 

1. 명령어를 친다

npm i react-native-svg

yarn add --dev react-native-svg-transformer

 

2.  명령어를 친다

react-native link react-native-svg

 

3. app.json 과 같은 폴더안에 metro.config.js 를 만들어줍니다

const { getDefaultConfig } = require("metro-config"); module.exports = (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve("react-native-svg-transformer") }, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } }; })();

위에 코드를 복붙합니다.

4. 아래 코드를 

 "packagerOpts": { "config": "metro.config.js", "sourceExts": ["js", "jsx", "svg"] } } 

이렇게 넣어줍니다.

4. svg 파일을 준비해줍니다.

    svg 파일을 불러오고 싶은 컴포넌트에 들어가서, 

     

 

해서 컴포넌트처럼 사용합니다.

 

 

저도 하다가 node module 들이 꼬여서 고치느라 꽤 애를 먹었는데요. 

에러가 났을시 댓글로 알려주시면 아는 한도내에서 도와드리겠습니다.

react-native svg, react native 에서 svg 쓰기 , react native svg , svg , svgx, expo svg