Guides
Plan-enterprise-icon
Expo Application Services
API Reference

WebView

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

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-failed-icon

Installation

Terminal
→ npx expo install react-native-webview

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

You should refer to the react-native-webview docs for more information on the API and its usage. But the following example (courtesy of that repo) is a quick way to get up and running!
Basic Webview usage
import * as React from 'react';
import { WebView } from 'react-native-webview';
%%placeholder-start%%%%placeholder-end%%import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});
Minimal example with inline HTML:
Webview inline HTML
import * as React from 'react';
import { WebView } from 'react-native-webview';
%%placeholder-start%%%%placeholder-end%%import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <WebView
      style={styles.container}
      originWhitelist={['*']}
      source={{ html: '<h1><center>Hello world</center></h1>' }}
    />
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});
  • Message-iconAsk a question on the forums about WebView
  • Github-iconView open bug reports for WebView
  • Code-iconView source code for WebView
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?