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