[React-Native] Svg 설정 in Typescript

참조 :

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

• 특이사항 & 고려할 사항
  • RN 버전 , TypeScript 사용 유무

react-native-svg-transformer 를 devDependencies에 설치

yarn add react-native-svg
yarn add -D react-native-svg-transformer

metro.config.js 설정

• 특이사항 :
  - 해당 부분은 RN의 버전에 따라 설정하는것이 다르기때문에 공식문서를 보고 메뉴얼에 맞게 설정해야한다.
  - 필자는 0.72버전 이상의 RN 을 사용하여서 다음과같이 설정했다.
  

        const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
        
        const defaultConfig = getDefaultConfig(__dirname);
        const {assetExts, sourceExts} = defaultConfig.resolver;
        
        /**
         * Metro configuration
         * <https://facebook.github.io/metro/docs/configuration>
         *
         * @type {import('metro-config').MetroConfig}
         */
        const config = {
          transformer: {
            babelTransformerPath: require.resolve('react-native-svg-transformer'),
          },
          resolver: {
            assetExts: assetExts.filter(ext => ext !== 'svg'),
            sourceExts: [...sourceExts, 'svg'],
          },
        };
        
        module.exports = mergeConfig(defaultConfig, config);

• typescript decalare.d.ts 생성
  • TypeScript 사용시 임의로 svg type을 선언해주어야 한다.
  • CustomType의 위치와 이름은 자유롭게 설정해도 된다.
  • tsconfig.json 에 customType 명시

예시)

    // 위치 : ~/src/@types/declarations.d.ts
    
    declare module '*.svg' {
      import React from 'react';
      import {SvgProps} from 'react-native-svg';
      const content: React.FC<SvgProps>;
      export default content;
    }

// location : ~/.tsconfig.json
    {
      "extends": "@tsconfig/react-native/tsconfig.json",
      "compilerOptions": {
    		...
        "typeRoots": ["./node_modules/@types", "./src/@types"]
    		// ㄴ node_modules/@types는 필수적으로 명시해주고
    		// 그 다음에 svg 타입 선언을 위한 declar 파일위치를 명시해준다.
    		...
      }
    }

metro재시작!!

• 모든 설정을 마치고 metro 서버를 재시작 해주어야 정상적으로 읽어올 수 있다.