[React Native]react-native-svg 적용

Figma 디자인상 아이콘들을 png로 적용하다 보니, 앱 내에서 선명하게 나오지 않는 디자인적인 이슈를 발견하게 되어

모든 아이콘을 SVG로 다시 적용하게 되었다.

React-Native에서 SVG 파일을 활용하기 위해선 두 가지의 라이브러리를 필요로 한다.

react-native-svg

yarn add react-native-svg

react-native-svg-transformer

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

두 라이브러리를 받고 잊지말고 ios 에도 적용해준다.

cd ios && pod install

react-native-svg-transformer 설정

react-native-svg-transformer 를 위한 설정이 필요하기 때문에 metro.config.js에 아래 코드를 추가 해 준다.

// metro.cofing.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"]
    }
  };
})();

TypeScript 를 사용하고 있다면 declarations.d.ts 파일에 아래 코드를 추가 혹은 (없다면) 생성해준다.

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

 

SVG 파일을 사용하기 위한 모든 준비는 끝났고 , 
import 후 컴포넌트 사용하듯 사용하면 된다.

ex )

// 예시코드
<MainTabNav.Screen
   name={CM_SC_Home}
   component={HomeMainScreen}
   options={{
     tabBarLabel: '홈',
     tabBarIcon: ({focused}) =>
        focused ? <NavHomeLight /> : <NavHomeDark />, // SVG
     }}
 />

적용된 화면

수고하셨습니다.

 

etc) 만약 expo로 앱을 빌드 하셨다면, 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