WebView

• The WebView component is a customizable React Native element that adapts the `react-native-webview` library for displaying web content directly within a mobile application. It is particularly useful for embedding third-party web pages, handling tasks directly in-app, or displaying rich HTML content. The component enhances security and customization by allowing the specification of an `originAllowlist` to manage which domains the embedded browser can access.

  With a thorough integration of this component, applications can seamlessly blend native functionality with web features, providing a harmonious user experience that leverages the full capabilities of both web and native platforms.

  Here is an introduction to implementing the WebView component within your React Native project:

• 
  

  <WebView
    source={{ uri: 'https://example.com' }}
    originAllowlist={['https://*.example.com']}
  />

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Integration

Step 1: Importing the Component

Import the WebView component from @shopify/shop-minis-platform-sdk:

import { WebView } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the WebView

Incorporate the WebView in parts of your application that require displaying web content. Configure it by providing the source prop for the URL and an originAllowlist for security:

<WebView
  source={{ uri: 'https://example.com' }}
  originAllowlist={['https://*.example.com']}
/>

Examples

Basic Implementation:

<WebView
  source={{ uri: 'https://news.example.com' }}
  originAllowlist={['https://*.example.com']}
/>

Complex Setup with JavaScript and Scales:

<WebView
  source={{ uri: 'https://shop.example.com' }}
  javaScriptEnabled={true}
  scalesPageToFit={true}
  originAllowlist={['https://shop.example.com']}
/>

Props

• source (Object): The URI source of the web content.
• originAllowlist (string[]): List of allowed domain patterns that the WebView can navigate to.
• Inherits all other properties from RNWebViewProps except for originWhitelist, which is replaced by originAllowlist to provide stricter validation.

For more details on the props, please refer to the WebView Props.