diff --git a/README.md b/README.md index 42f9be5..5bc2df3 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,15 @@ ## Getting started -`$ npm install react-native-web-webview --save` +Installing +``` +npm install react-native-web-webview --save +``` -Alias the package in your webpack config: +The package provides the same functionality as react-native-webview, however, it works when exported as a web project. +To continue using the same imports that you do with non-web exports, you you configure an alias in your webpack config so that it resolves to the correct package. -``` +```js resolve: { alias: { 'react-native': 'react-native-web', @@ -32,6 +36,60 @@ const rule = { }; ``` +## With Expo +When using Expo, you will need to add a webpack file that will be used for web builds in order to add the above code. +The following command will create the file in the way expected by Expo and will also install the **@expo/webpack-config** dependency which is necessary. +```$ +npx expo customize webpack.config.js +``` + +If you haven't set up Expo to export web projects at all, you will need to install the following dependencies. +``` +npx expo install react-native-web react-dom +``` + +Below is an example implementation of **webpack.config.js** in an expo project. +```js +const createExpoWebpackConfigAsync = require('@expo/webpack-config'); + + +/////// +// NOTE: Webpack is only used for bundling web +/////// + + +module.exports = async function (env, argv) { + const config = await createExpoWebpackConfigAsync(env, argv); + + config.resolve.alias = { + ...config.resolve.alias, + + // Set up aliases so the web versions are used (Rather than changing imports in each file) + 'react-native': 'react-native-web', + 'react-native-webview': 'react-native-web-webview', + + }; + + // Prevents an error the react-native-web-webview recieves when building + const rule = { + test: /postMock.html$/, + use: { + loader: 'file-loader', + options: { + name: '[name].[ext]', + }, + }, + }; + config.module.rules.push(rule); + + + // Return the config for use by webpack + return config; +}; + +``` + + ## Usage ```js