React Nativeでsvgファイルを読み込んで表示する

react-nativeにおいてpngやjpgのファイルを表示させるにはこちらのFacebook Engineering Blogに書かれているようにImageコンポーネントをimportしてsource propertyでファイルを指定すれば可能なのですが、同じ方法でsvgファイルを表示させることはできません。

そこで利用するのが、react-native-svg-uriです。 これはexpoを利用している方も同じように使うことができます。

react-nativeのsvgに関するライブラリをググるとreact-native-svgもヒットすると思います。しかし、こちらはsvgのタグが利用できるようにはなるものの、svgファイルを読み込むことはできないようでした。

手順

まずライブラリをインストールします。 npm i react-native-svg-uri

そしてそれをimportし、SvgUriコンポーネントのsource propertyにファイルをrequireしたものを渡せばsvgが表示されます。 以下のようなイメージです。

import SvgUri from 'react-native-svg-uri';

const logoImage = require('../../assets/icons/logo-main.svg');

...<略>

// React component内のrenderメソッド
render() {
    return(
        <View>
            <SvgUri source={logoImage} />
        </View>
    )
}