[RN] SVG 이미지 넣는 방법

📱테스트 환경

"react": "18.2.0"
"react-native": "0.74.2"

React Native 는 로컬에 있는 svg 파일을 바로 불러올 수 없다고 한다 .. ( 특이하네 .. )아무튼 로컬에 있는 이미지를 사용하려면 모듈을 설치해서 사용해야 한다고 하는데방법은 다음과 같다.

yarn add react-native-svg

모듈 설치 후 (IOS) pod install 도 해주고 ~

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

추가적으로 transformer 모듈도 설치해주면 import 할 수 있게 된다.

마지막으로 추가적은 프로젝트 설정이 필요한데

metro.config.js 파일 생성 ( 있다면 수정 )

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);

나는 ts (Typescript) 를 사용중이라서 추가적으로 declarations.d.ts 파일 생성 ( 있다면 수정 )

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

여기까지 설정해주고 나면 사용준비는 끝났다.

나는 네비게이션 탭에 사용할 이미지를 만드려고 헀던 거였어서

하단의 코드는 내가 앱 개발하면서 실제로 사용한 코드이다.

ㅇㅣ렇게 해놓으면 담에 내가 또 어플 만들때 이대로 가져다쓰기위함이다.

// icon.tsx
import React from 'react';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Loan from '../assets/img/loan.svg';
import LoanActive from '../assets/img/loan_active.svg';
import Score from '../assets/img/score.svg';
import ScoreActive from '../assets/img/score_active.svg';

export const CalcIcon = ({
  focused,
  color,
}: {
  focused: boolean;
  color: string;
}) => {
  const iconName = focused
    ? 'calculator-variant'
    : 'calculator-variant-outline';
  return <MaterialCommunityIcons name={iconName} color={color} size={26} />;
};

export const LoanIcon = ({
  focused,
  color,
}: {
  focused: boolean;
  color: string;
}) => {
  return focused ? <LoanActive width={'29'} height={'29'} /> : <Loan />;
};

export const ScoreIcon = ({
  focused,
  color,
}: {
  focused: boolean;
  color: string;
}) => {
  return focused ? <ScoreActive /> : <Score />;
};

export const HomeTab = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {backgroundColor: 'black'},
        tabBarActiveTintColor: 'white',
        tabBarInactiveTintColor: 'white',
        headerShown: false,
      }}>
      <Tab.Screen
        name={RouteNames.JOB}
        component={JobCalcScreen}
        options={{tabBarLabel: '알바비', tabBarIcon: CalcIcon}}
      />
      <Tab.Screen
        name={RouteNames.LOAN}
        component={LoanCalcScreen}
        options={{tabBarLabel: '대출이자', tabBarIcon: LoanIcon}}
      />
      <Tab.Screen
        name={RouteNames.SCORE}
        component={ScoreCalcScreen}
        options={{tabBarLabel: '학접이자', tabBarIcon: ScoreIcon}}
      />
    </Tab.Navigator>
  );
};