This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 52).
A library that provides a WebView component.
react-native-webview provides a WebView component that renders web content in a native view.
- npx expo install react-native-webviewIf you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions provided by the library's README or documentation.
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!
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:
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,
},
});