react-native-webview
provides a WebView
component that renders web content in a native view.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install react-native-webview
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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, }, });
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, }, });