Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #76

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 61 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this rule is needed isn't clearly explained. I don't understand it well myself so I've been vague in my comment here, but someone should clarify if possible.

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
Expand Down