Build the WebView

npm install react-native-webview

import React from "react";
import { Linking } from "react-native";
import { WebView } from "react-native-webview";
import type { ShouldStartLoadRequest } from "react-native-webview/lib/WebViewTypes";

const EXPERIENCE_URL = "https://play.lindenhall.example/lindenhall-autumn-workshops?c=a315";

// The experience, then every host its sign-in passes through.
const IN_APP_HOSTS = ["play.lindenhall.example", "lindenhall.api.topage.co", "id.lindenhall.example"];

type OmniLabScreenProps = {
  language: string;
  memberId?: string;
};

function hostOf(url: string): string {
  const match = /^https?:\/\/([^/?#:]+)/i.exec(url);
  return match ? match[1].toLowerCase() : "";
}

export default function OmniLabScreen({ language, memberId }: OmniLabScreenProps) {
  const uri =
    EXPERIENCE_URL +
    `&l=${encodeURIComponent(language)}` +
    (memberId ? `&fci=${encodeURIComponent(memberId)}` : "");

  const keepInApp = (request: ShouldStartLoadRequest): boolean => {
    // iOS reports frames inside the page, such as a video: let them load.
    if (request.isTopFrame === false) return true;
    // Files the page creates itself, such as a calendar file.
    if (/^(blob|data|about):/i.test(request.url)) return true;
    if (IN_APP_HOSTS.includes(hostOf(request.url))) return true;
    // Anything else, such as a sponsor's site or the terms, opens in the browser.
    Linking.openURL(request.url).catch(() => {});
    return false;
  };

  return (
    <WebView
      source={{ uri }}
      style={{ flex: 1 }}
      geolocationEnabled
      allowsInlineMediaPlayback
      mediaPlaybackRequiresUserAction={false}
      mediaCapturePermissionGrantType="grantIfSameHostElsePrompt"
      onShouldStartLoadWithRequest={keepInApp}
    />
  );
}

(function () {
  if (window.__omnilabDownloadBridge) return;
  window.__omnilabDownloadBridge = true;

  function forward(message) {
    const json = JSON.stringify(message);
    if (window.ReactNativeWebView) {
      window.ReactNativeWebView.postMessage(json); // React Native
    } else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.omnilab) {
      window.webkit.messageHandlers.omnilab.postMessage(json); // iOS WKWebView
    } else if (window.OmnilabBridge) {
      window.OmnilabBridge.postMessage(json); // Android WebView
    }
  }

  // Keep each file the page creates until it releases the link, so a tap can still read it.
  const files = new Map();
  const createObjectURL = URL.createObjectURL.bind(URL);
  const revokeObjectURL = URL.revokeObjectURL.bind(URL);
  URL.createObjectURL = function (object) {
    const url = createObjectURL(object);
    if (object instanceof Blob) files.set(url, object);
    return url;
  };
  URL.revokeObjectURL = function (url) {
    files.delete(url);
    revokeObjectURL(url);
  };

  document.addEventListener("click", (event) => {
    const link = event.target instanceof Element ? event.target.closest("a[download]") : null;
    const file = link ? files.get(link.href) : null;
    if (!file) return;
    event.preventDefault();
    const reader = new FileReader();
    reader.onload = () =>
      forward({ type: "omnilab:download", filename: link.download, mimeType: file.type, dataUrl: reader.result });
    reader.readAsDataURL(file);
  }, true);
})();
true;