> ## Documentation Index
> Fetch the complete documentation index at: https://docs.portalhq.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a WebView

> Our ready-to-use WebView component helps you quickly integrate Portal into your app.

<Note>
  Before using the Portal mobile components, be sure you have run `portal.mpc.generate() to generate a wallet.`
</Note>

For more information on generating MPC signing shares, see: [Generating a wallet](./create-a-wallet).

## Installation

<Tabs>
  <Tab title="yarn">
    ```bash theme={null}
    yarn add @portal-hq/webview
    ```
  </Tab>

  <Tab title="npm">
    ```bash theme={null}
    npm install --save @portal-hq/webview
    ```
  </Tab>
</Tabs>

### Dependency linking

Because these packages have native module dependencies there is some additional linking required to make it work with your React Native project.

Explicitly install the native module packages in your project.

<Tabs>
  <Tab title="yarn">
    ```bash theme={null}
    yarn add react-native-webview
    ```
  </Tab>

  <Tab title="npm">
    ```bash theme={null}
    npm install --save react-native-webview
    ```
  </Tab>
</Tabs>

## Basic Usage

```typescript theme={null}
import React, { FC } from 'react'

// Portal imports
import { usePortal } from '@portal-hq/core'
import Webview from '@portal-hq/webview'

const MyBrowser: FC = () => {
  // Store the Portal instance in the state
  const portal = usePortal()

  return (
    <View style={{ width: '100%', height: '100%' }}>
      {portal &&
        <Webview
          url="https://app.uniswap.org/#/swap" // Any URL for a dapp
          onNavigationStateChange?: (event: WebViewNavigation) => void
          onSigningRequested?: (approvalRequest: any) => void // only needed if auto-approve is set to false
           />}
    </View>
  )
}

export default MyBrowser
```

## Next Steps

You now have a working dApp Browser example!