---
title: Using on the Web
---
## Pre-requisites
Make sure that you have followed the getting started guide and have `react-native-paper` installed and configured before following this guide.
We're going to use [react-native-web](https://github.com/necolas/react-native-web) and [webpack](https://webpack.js.org/) to use React Native Paper on the web, so let's install them as well.
To install `react-native-web`, run:
```sh
yarn add react-native-web react-dom react-art
```
To install `webpack`, run:
```sh
yarn add --dev webpack webpack-cli webpack-dev-server
```
If you don't have a webpack config in your project, copy the following to `webpack.config.js` get started:
```js
const path = require('path');
module.exports = {
mode: 'development',
// Path to the entry file, change it according to the path you have
entry: path.join(__dirname, 'App.js'),
// Path for the output files
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.bundle.js',
},
// Enable source map support
devtool: 'source-map',
// Loaders and resolver config
module: {
rules: [
],
},
resolve: {
},
// Development server config
devServer: {
contentBase: [path.join(__dirname, 'public')],
historyApiFallback: true,
},
};
```
Also create a folder named `public` and add the following file named `index.html`:
```html
App
```
Now we're ready to start configuring the project.
## Configure webpack
### 1. Alias `react-native` to `react-native-web`
First, we have to tell webpack to use `react-native-web` instead of `react-native`. Add the following alias in your webpack config under `resolve`:
```js
alias: {
'react-native$': require.resolve('react-native-web'),
}
```
### 2. Configure `babel-loader`
Next, we want to tell `babel-loader` to compile `react-native-paper` and `react-native-vector-icons`. We would also want to disable reading the babel configuration files to prevent any conflicts.
First install the required dependencies:
```sh
yarn add --dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
```
Now, add the following in the `module.rules` array in your webpack config:
```js
{
test: /\.js$/,
exclude: /node_modules[/\\](?!react-native-paper|react-native-vector-icons|react-native-safe-area-view)/,
use: {
loader: 'babel-loader',
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,
// The configration for compilation
presets: [
['@babel/preset-env', { useBuiltIns: 'usage' }],
'@babel/preset-react',
'@babel/preset-flow',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
],
},
},
},
```
### 3. Configure `file-loader`
To be able to import images and other assets using `require`, we need to configure `file-loader`. Let's install it:
```sh
yarn add --dev file-loader
```
To configure it, add the following in the `module.rules` array in your webpack config:
```js
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader',
}
```
## Load the Material icons
If you followed the getting started guide, you should have the following code in your root component:
```js
```
Now we need tweak this section to load the Material icons from the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library:
```js
{Platform.OS === 'web' ? (
) : null}
```
Remember to import `Platform` from `react-native` at the top:
```js
import { Platform } from 'react-native';
```
You can also load these fonts using [`css-loader`](https://github.com/webpack-contrib/css-loader) if you prefer.
## Load the Roboto fonts (optional)
The default theme in React Native Paper uses the Roboto font. You can add them to your project following [the instructions on its Google Fonts page](https://fonts.google.com/specimen/Roboto?selection.family=Roboto:100,300,400,500).
## We're done!
You can run `webpack-dev-server` to run the webpack server and open your project in the browser. You can add the following script in your `package.json` under the `"scripts"` section to make it easier:
```json
"web": "webpack-dev-server --open"
```
Now you can run `yarn web` to run the project on web.