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