react-native-svgを利用する際の注意点

react-native-svg はReact NativeでSVGを描画するためのライブラリです。利用する際の注意点を軽くまとめています。SVG全般というより主にReactNative固有の問題についてです。

React Nativeのバージョンによりサポートするバージョンが異なる

React Nativeの各バージョンに対し動作するバージョンが異なります。
https://github.com/react-native-community/react-native-svg#notice

React Nativeをアップグレードする際は、現在のreact-native-svgバージョンが該当のRNバージョンでの動作をサポートしているかを確認し、もしも必要ならアップグレードする必要があります。

サポートしていないSVG要素がある

現時点の最新(5.4.0)で、Marker要素やPattern要素はサポートされていません。
https://github.com/react-native-community/react-native-svg#todo

たとえば折れ線グラフを描画したい時に、

<Marker id="xxxx" ... />
<Path d="M 0,0 10,10 20,15" marker="xxxx" />

のようにSVGでは各点をMarker要素を使って描画することができますが、react-native-svgではサポートしていません。その場合、現時点ではMarker要素を使わずに別途、点を描画する必要があります。

onPress属性

各SVG要素にはonPress属性を付けることができます。
図形が重なっている場合、onPressイベントは基本的に一番上にある図形にしか効きません(当たり前と言えば当たり前かもしれませんが..)。

また、SVGでは以下のように<Defs>配下で要素を定義しておき、

<Defs>
  <G id="point">
    <Circle r={10} />
  </G>
</Defs>

<Use />要素でその定義した要素を参照することができます。

<Use href="#point" x={x} y={y} />

ただ、<Use /> にonPress属性をつけてもタップしたイベントを拾ってくれません。Defs以下に定義した方にonPress属性をつけても同様に効きません。(5.4.0時点)
タップのイベントを拾いたい場合は、残念ながら<Use />を使わずに個別に描画する必要があります。

AndroidでSvg要素のwidthを0に指定するとエラーになる

Svg要素のwidthまたはheight属性に0が入るとAndroidでの実行時に以下のエラーになります。
※iOSの場合は同様のエラーは特に発生しません

SurfaceView should have explicit width and height set.

measure
SvgViewManager.java:39

measure
YogaNode.java:722

jni_YGNodeCalculateLayout
YogaNode.java

通常は0を指定することはないかもしれませんが、動的にwidth、heightを指定する場合に一時的に値が入るケースがあるかもしれないので注意です。

テスト実行時のmocking

SVGを含むViewのテストを実行する時、React Native以外の実行環境だとエラーになってしまうので、その際はmockする必要があります。

react-native-mock風の react-native-svg-mock が存在するため、こちらを利用するとよいです。