DataURLとデータの違いを意識すべし【react nativeハマりメモ】

先日、生成したQRコードをexpoのFileSystemを使って保存しようとしたら、なぜか保存できなかったのですが、DataURLと本体のデータを混同していたことが原因だったので、そのメモです。

DataURLはMDNによるとdata:[<mimetype>][;base64],<data>の形式で表さられるデータです。

例えば、https://ja.wikipedia.org/のQRコードのDataURLは下のようになるのですが、てっきりこれ全体がbase64でエンコードされたデータだと思っていました。

data:image/gif;base64,R0lGODdh5wDnAIAAAAAAAP///ywAA (略)

しかし、実際のデータの部分はbase64,の後からです。

で、ここでハマりポイントなのですが、
react nativeのImageではsourceにDataURLを指定することで画像を表示することができます。
その一方で、FileSystemのwriteAsStringAsyncでは保存する内容はDataURLではなく、あくまでデータを与える必要があります。（optionでデータのエンコード方式をbase64に指定できます）

なので、writeAsStringAsyncで必要なのは

data:image/gif;base64,

の後の箇所です。なので、次のようにして文字列からこれを切り離す必要があります。
(他のMIMEタイプやエンコードに対応するには正規表現を使いましょう)

'data:image/gif;base64,abcdefghijklmn'.replace('data:image/gif;base64,', '')
// abcdefghijklmn