A library that provides a WebView component.
GitHub
npm
react-native-webview
provides a WebView
component that renders web content in a native view.
-
npx expo install react-native-webview
If 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,
},
});