react-native-webview

A library that provides a WebView component.

Android

iOS

Included in Expo Go

GitHub

npm

Recommended version:

13.16.0

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

Installation

Terminal

- npx expo install react-native-webview

- yarn expo install react-native-webview

- pnpm expo install react-native-webview

- bun 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

Basic Webview usage

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,
  },
});

With inline HTML

Webview inline HTML

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,
  },
});

Learn more

Visit official documentation

Get full information on API and its usage.