[RN] 🌻svg를 컴포넌트로 사용하기

⒈ react-native-svg 설치

# 설치
npm install react-native-svg
# Expo일 경우 ↓
# expo install react-native-svg

npm install -D react-native-svg-transformer

⒉ metro.config.ts

metro.config.ts 파일 생성

cli

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @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);

expo

/* metro.config.ts */
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext: string) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

global.d.ts

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

src/assets/~~~.svg

svg파일 넣어두고 import해서 컴포넌트처럼 사용하면 됨

➕ 이미지 가져오기

require('경로')로 이미지를 가져올 수도 있지만

<Image source={require('./src/assets/png-file/crayon-line.png')} />

아래처럼 사용하고 싶다면

import crayonPng from './src/assets/png-file/crayon-line.png';

<Image source={crayonPng} />

import-image.d.ts 파일을 생성하고,
이미지 파일 확장자인 .png 및 .jpg에 대한 모듈 타입을 선언하면 된다.

/* import-image.d.ts */
declare module '*.png';
declare module '*.jpg';