Bundle image as base64

Author: inokawa

fixtures/app-export-default-with-images.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { webViewRender } from "react-native-react-bridge/lib/web";
+import bmp from "./twitter.bmp";
+import gif from "./twitter.gif";
+import png from "./twitter.png";
+import jpg from "./twitter.jpg";
+import jpeg from "./twitter.jpeg";
+import webp from "./twitter.webp";
+import svg from "./twitter.svg";
+
+const App = () => {
+  return (
+    <div>
+      <img src={bmp} />
+      <img src={gif} />
+      <img src={png} />
+      <img src={jpg} />
+      <img src={jpeg} />
+      <img src={webp} />
+      <img src={svg} />
+    </div>
+  );
+};
+
+export default webViewRender(App);

fixtures/twitter.bmp

@@ -1,11 +1,17 @@
 import Metro from "metro";
 
 const babelTransformerPath = require.resolve("./transformer");
+const sourceExts = ["js", "ts", "jsx", "tsx"];
+const imageExts = ["bmp", "gif", "png", "jpg", "jpeg", "webp", "svg"];
 
 export const bundle = async (filename) => {
   const config = await Metro.loadConfig();
-  config.resolver.sourceExts = ["js", "ts", "jsx", "tsx", "css"];
+  config.resolver.sourceExts = [...sourceExts, ...imageExts, "css"];
+  config.resolver.assetExts = config.resolver.assetExts.filter(
+    (ext) => !imageExts.includes(ext)
+  );
   config.transformer.babelTransformerPath = babelTransformerPath;
+
   const { code, map } = await Metro.runBuild(config, {
     entry: filename,
     platform: "web",