react-native svg 사용하기

1. 

yarn add react-native-svg

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

 

2. root에 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', 'jsx', 'js', 'ts', 'tsx'],
    },
  };
})();

 

3. typescript를 사용하고 있다면 root에 declarations.d.ts 파일에 다음과 같이 작성

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

 

 

참조: FlatList 등 어떤 svg아이콘을 반복문으로 돌렸는데 아래와 같은 에러를 마주쳤다면,

서버에 해당하는 svg파일이 있는지 확인해주세요

 

Error: Expected closing tag </body> to match opening tag <hr> (6:3). If this is valid SVG, it's probably a bug. Please raise an issue


</body

       ^