Source: https://docs.expo.dev/versions/v52.0.0/sdk/webview

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 52

Archive Expo Snack Discord and Forums Newsletter

React Native WebView

GitHub npm

A library that provides a WebView component.

GitHub npm

Android

iOS

Bundled version:

13.12.5

Copy page

react-native-webview provides a WebView component that renders web content in a native view.

Installation

Terminal

Copy

- npx expo install react-native-webview

If you are installing this in an existing React Native app , make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

Usage

You should refer to the react-native-webview documentation for more information on the API and its usage. The following example (courtesy of that repository) is a quick way to get up and running!

Basic Webview usage

Copy

Open in Snack

import { WebView } from 'react-native-webview'; import Constants from 'expo-constants'; import { StyleSheet } from 'react-native'; export default function App() { return ( <WebView style={styles.container} source={{ uri: 'https://expo.dev' }} /> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: Constants.statusBarHeight, }, });

Minimal example with inline HTML:

Webview inline HTML

Copy

Open in Snack

import { WebView } from 'react-native-webview'; import Constants from 'expo-constants'; import { StyleSheet } from 'react-native'; export default function App() { return ( <WebView style={styles.container} originWhitelist={['*']} source={{ html: '<h1><center>Hello world</center></h1>' }} /> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: Constants.statusBarHeight, }, });