react-native-svg-uriで静的SVGを使った時にハマった

こんにちは、バイトでreact-nativeでsvgを描画する必要があったので、描画しようとしたら色んな所でハマったので、同じことやる人に伝われば嬉しいです。鈴木です。

まず動かねえ

ちなみにreact-native-svg-uriっていうのはコレで、RNでuriからsvgを描画できるライブラリです。名前の通りですね。
依存先のreact-native-svgのNOTICEにあるように、バージョンをよくみてインストールしないと動きません。自分の場合はreact-native 0.50.3だったので、yarn add react-native-svg-uri react-native-svg@^5.5.1したらいけました。

静的ファイルが描画できねえ

Sketchで作られたsvgファイルを描画しようとして、READMEのUsageにあるようにrequire('../assets/hoge.svg')とやったら「生のテキストを<Text>タグの外で使うな」という旨のエラーで怒られ、んなことしとらんがなと思いつつもエラーメッセージを読んでいくと、なにやら「Sketch」の文字があり、Sketchでsvgを吐くと一行コメントが入ってしまうみたいですね。このライブラリはコメントアウトをスルーしてくれないみたいなのでsvgファイルからそのコメントを削除してもう一度やりました。
そうしたら今度は空文字列と改行文字でひっかかりました。そうこのライブラリ、空白と改行もスルーしてくれないので、改行と空白のあるsvgだと描画できません。辛い。
ので、svgをminifyするライブラリやらツールやらを使ってminifyし、テキストエディタの文字置換で改行を削除したら普通に描画されるようになりました。

Androidで描画できん

最初iosシュミレータでやっていて、やったぜうごいたぜと喜んでandroidでビルドしてみたら真っ赤な画面が出、ぐぐってみたら同じエラーのIssueがありました。コレです。このコメントの中で解決策があって、依存パッケージがRNSvgPackageからSvgPackageに変更されたことで、MainApplication.javaを書き換える必要があるらしいです。

MainApplication.java

import com.horcrux.svg.SvgPackage;
...
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
        ... other packages ...
        new SvgPackage()
    );
}

直って（直そうかな

react-native-svg-uriに上がっているプルリクを見ていないので、既出だったらしませんが、時間があるときに直すプルリクを投げたいですね。面倒すぎるので、、、