hunk.code_window: />
   ## Usage
   You should refer to the [react-native-webview docs](https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.mdx#react-native-webview-guide) 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!
   <SnackInline label="Basic Webview usage" dependencies={["react-native-webview", "expo-constants"]}>
   {/* prettier-ignore */}
   ```jsx
  
hunk.labels: keep keep keep keep replace keep keep keep keep keep
hunk.after_edit: You should refer to the [react-native-webview docs](https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#react-native-webview-guide) 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!
  
hunk.file_path: docs/pages/versions/v43.0.0/sdk/webview.mdx
hunk.type: replace
file: ---
  title: WebView
  sourceCodeUrl: 'https://github.com/react-native-community/react-native-webview'
  ---
  
  import InstallSection from '~/components/plugins/InstallSection';
  import PlatformsSection from '~/components/plugins/PlatformsSection';
  import { SnackInline} from '~/ui/components/Snippet';
  
  **`react-native-webview`** provides a `WebView` component that renders web content in a native view.
  
  <PlatformsSection android emulator ios simulator />
  
  ## Installation
  
  <InstallSection
    packageName="react-native-webview"
    href="https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.mdx#react-native-webview-getting-started-guide"
  />
  
  ## Usage
  
  You should refer to the [react-native-webview docs](https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.mdx#react-native-webview-guide) 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!
  
  <SnackInline label="Basic Webview usage" dependencies={["react-native-webview", "expo-constants"]}>
  
  {/* prettier-ignore */}
  ```jsx
  import * as React from 'react';
  import { WebView } from 'react-native-webview';
  /* @hide */
  import { StyleSheet } from 'react-native';
  import Constants from 'expo-constants';
  /* @end */
  
  export default function App() {
    return (
      <WebView
        style={styles.container}
        source={{ uri: 'https://expo.dev' }}
      />
    );
  }
  
  /* @hide const styles = StyleSheet.create({ ... }); */
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Constants.statusBarHeight,
    },
  });
  /* @end */
  ```
  
  </SnackInline>
  
  Minimal example with inline HTML:
  
  <SnackInline label="Webview inline HTML" dependencies={["react-native-webview", "expo-constants"]}>
  
  ```jsx
  import * as React from 'react';
  import { WebView } from 'react-native-webview';
  /* @hide */
  import { StyleSheet } from 'react-native';
  import Constants from 'expo-constants';
  /* @end */
  
  export default function App() {
    return (
      <WebView
        style={styles.container}
        originWhitelist={['*']}
        source={{ html: '<h1><center>Hello world</center></h1>' }}
      />
    );
  }
  
  /* @hide const styles = StyleSheet.create({ ... }); */
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Constants.statusBarHeight,
    },
  });
  /* @end */
  ```
  
  </SnackInline>
  