Use Webview with Expo-web

Expo is a wrapper or a development tool to ease development with react-native.
You can use react-native-web to develop web apps at the same time.
You can create iOS/Android apps and web apps at the same time.
The UX is not excellent but it works as it should.

Expo-web does not support WebView

My Expo application uses WebView. As you can see below, Expo-web does not support WebView as of now (SDK41).

So I looked for a way to use WebView without changing my app architecture and found react-native-web-webview.

react-native-web-community/react-native-web-webview

I write about how to use react-native-web-webview with Expo.

Configuration for react-native-web-webview

I found this package by randomly googling it, but even after reading the document, I didn’t understand it.

I left it for a while but finally understood.

Generate webpack.config.js

The first thing you need to do is to generate a webpack.config.js file to put your own settings for the web app.

$expo customize:web

Configure webpack.config.js

Add react-native-web-webview configuration to the generated webpack.config.js.

const createExpoWebpackConfigAsync = require(“@expo/webpack-config”);
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
config.module.rules.push({
test: /postMock.html$/,
use: {
loader: “file-loader”,
options: {
name: “[name].[ext]”,
},
},
});
config.resolve.alias = {
“react-native”: “react-native-web”,
“react-native-webview”: “react-native-web-webview”,
};
return config;
};

Now, when you launch your web app with yarn web, the Webview part works as an iFrame.

Fix the postMessage

In react-native-webview, you can use postMessage to send data from the Webview. However, the web app does not have window.ReactNativeWebView.

window.ReactNativeWebView.postMessage(postObject);

If loaded as an iFrame in Expo-web, the message should be sent to window.parent.
If you use the Webview on the same domain, you can use window.parent.origin as the second parameter. In my case, I load Webview from a different domain, so I specified a different one.

window.parent.postMessage(postObject, ‘https://yourdomain.com');

In my implementation, I switch these two by the web application loaded in the Webview.

With the above approach, you can use WebView with Expo-web.

$expo customize:web