【React Native】AndroidアプリでSVG画像が表示されない

以前、「react-native-svg」や「react-native-svg-uri」を使って、SVG 画像を表示する方法について紹介しましたが、iOS では問題なくても Android だと画像が表示されない不具合がある事が判明しました。
しかも、実機を PC に接続して直接アプリをインストール・実行した時は問題なく、DeployGate 経由でアプリをインストールして実行すると画像が表示されないという状況でした。

で、どうにかならないかと色々試行錯誤しましたが、SVG 画像を react-native-svg ライブラリを使ってコンポーネント化することで解決できました。

作成したコンポーネントは下記のとおりです。
下記のコードでは、よくある家のアイコンを表示しています。

import React from 'react';
import PropTypes from 'prop-types';
import Svg, { G, Path } from 'react-native-svg';

const HomeIcon = props => {
  return (
    <Svg width={props.width} height={props.width} viewBox="0 0 256 256" fill={props.fill}>
      <G transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" stroke="none">
        <Path d="M1237 2488 c-39 -14 -1198 -1069 -1219 -1110 -24 -45 -22 -88 5 -129 34 -50 59 -59 179 -59 l107 0 3 -541 3 -541 28 -24 28 -24 333 0 c322 0 334 1 360 21 l26 20 2 337 3 337 182 3 182 2 3 -336 3 -336 28 -24 28 -24 334 0 334 0 28 24 28 24 3 541 3 541 107 0 c120 0 145 9 179 59 27 41 29 84 5 129 -24 45 -1181 1096 -1222 1111 -38 13 -46 13 -83 -1z" />
      </G>
    </Svg>
  );
}
HomeIcon.propTypes = {
  width: PropTypes.oneOfType([
    PropTypes.string.isRequired,
    PropTypes.number.isRequired,
  ]),
  height: PropTypes.oneOfType([
    PropTypes.string.isRequired,
    PropTypes.number.isRequired,
  ]),
  fill: PropTypes.string.isRequired,
};
export default HomeIcon;

prop-types を使って、アイコンの色と縦幅、横幅を呼び出し元から指定できるようにしています。

こちらを追加して実行したところ、問題なくアイコンが表示されました！
DeployGate のアプリを更新して、そちらからインストール・実行もしてみましたがこちらも問題なかったです！

SVG 画像をタブナビゲーションのアイコンとして使っていたため、表示しているタブによってアイコンの色を変える必要があったため、PNG 画像等を使うわけにもいかない状態で…。
ですが、何とか解決できてよかったです！
コンポーネントを作るのも、元になる SVG 画像があればほぼコピー＆ペーストで OK だったので、数枚分作る程度であれば特に手間ではなかったです。

なお、作成の時に使用できる要素については「react-native-svg」ライブラリの GitHub ページをご参照ください。

以上、React Native の Android アプリで SVG 画像が表示されない時の対処法についてでした。
ご参考になれば幸いです。