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 が存在するため、こちらを利用するとよいです。