【ReactNative】SVG画像を表示する方法

はじめに

ReactNative プロジェクトで SVG 画像を表示しようとした際、必要なパッケージの追加や設定に少し時間がかかってしまいました。

そこで今回は、自分自身の備忘録も兼ねて、ReactNative で SVG 画像を表示するための実装手順をまとめました。

この記事が、同じ課題に直面している方の参考になれば幸いです。

目次

1. パッケージのインストール
2. 画像の表示
3. 画面サイズに合わせて画像サイズを変更
4. おわりに

パッケージのインストール

SVG 画像を表示するために必要なパッケージをインストールします。

react-native-svgのインストール

react-native-svg は SVG コードを表示できるようにするためのパッケージです。

以下のコマンドでパッケージをインストールします。

npm install react-native-svg

※ Expo フレームワークを使用している場合は、コマンドが異なるためこちらを確認してください。

次に、パッケージをリンクさせるため、以下のコマンドで pod パッケージをインストールします。

npx pod-install            // pod install を実行し、pod パッケージをインストール

// 失敗する場合は、iosディレクトリで bundle exec pod install を実行
cd ios                     // iosディレクトリへ移動
bundle exec pod install    // bundlerのcocoapodsでpodパッケージをインストール

参考：react-native-svg（README.md）

react-native-svg-transformerのインストール

react-native-svg-transformer は ローカルの SVG 画像をコンポーネントとして使用できるようにするパッケージです。

以下のコマンドでパッケージをインストールします。

npm install --save-dev react-native-svg-transformer

次に、metro.config.js を以下のように修正します。

/* ./metro.config.js */

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/react-native'
    ),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
}

module.exports = mergeConfig(defaultConfig, config)

※ Expo フレームワークを使用している場合は、設定が異なるためこちらを確認してください。

次に、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
}

参考：react-native-svg-transformer（README.md）

画像の表示

SVG ファイルを import します。

import Sushi from './assets/images/sushi-tako.svg'

その後、画像をコンポーネントとして使用します。
※ width と height を指定しない場合、SVG のデフォルトサイズが適用されます。

<Sushi width={120} height={40}/>

参考：react-native-svg-transformer（README.md #usage）

画面サイズに合わせて画像サイズを変更

画像サイズを指定する際、 className='h-[30vh] w-[50vw]' のように tailwind を適用してみたのですが、サイズを変更することはできませんでした。
そのため、useWindowDimensions で画面サイズを取得し、props の height と width でサイズを変更しました。

const { height, width } = useWindowDimensions()

<Sushi height={height * 0.3} width={width * 0.5}/>

おわりに

今回は、ReactNative における SVG 画像の表示方法についてまとめました。

ReactNative では、SVG 画像を表示するために専用のパッケージを導入し、設定を行う必要があります。
少し手間はかかりますが、適切に設定すれば、SVG を表示することができます。

この記事が、ReactNative で SVG 画像を表示したいと考えている方にとって、少しでも参考になれば幸いです。

最後までお読みいただき、ありがとうございました！