feat(events): Add isTopFrame to shouldStartLoadForRequest (#1537)

* Add isTopFrame to shouldStartLoadForRequest on iOS

onLoadingStart is not raised for inner frames, but onShouldStartLoadWithRequest still is. This keeps that behavior but adds isTopFrame to onShouldStartLoadWithRequest so that apps can perform their own filtering if desired.

* Update docs

Co-authored-by: Jamon Holmgren <jamonholmgren@gmail.com>

android/src/main/java/com/reactnativecommunity/webview/events/TopShouldStartLoadWithRequestEvent.kt

 
   init {
     mData.putString("navigationType", "other")
+    // Android does not raise shouldOverrideUrlLoading for inner frames
+    mData.putBoolean("isTopFrame", true)
   }
 
   override fun getEventName(): String = EVENT_NAME

apple/RNCWebView.m

 
   WKNavigationType navigationType = navigationAction.navigationType;
   NSURLRequest *request = navigationAction.request;
+  BOOL isTopFrame = [request.URL isEqual:request.mainDocumentURL];
 
   if (_onShouldStartLoadWithRequest) {
     NSMutableDictionary<NSString *, id> *event = [self baseEvent];
     [event addEntriesFromDictionary: @{
       @"url": (request.URL).absoluteString,
       @"mainDocumentURL": (request.mainDocumentURL).absoluteString,
-      @"navigationType": navigationTypes[@(navigationType)]
+      @"navigationType": navigationTypes[@(navigationType)],
+      @"isTopFrame": @(isTopFrame)
     }];
     if (![self.delegate webView:self
       shouldStartLoadForRequest:event
 
   if (_onLoadingStart) {
     // We have this check to filter out iframe requests and whatnot
-    BOOL isTopFrame = [request.URL isEqual:request.mainDocumentURL];
     if (isTopFrame) {
       NSMutableDictionary<NSString *, id> *event = [self baseEvent];
       [event addEntriesFromDictionary: @{

docs/Reference.md

 lockIdentifier
 mainDocumentURL (iOS only)
 navigationType
+isTopFrame
 ```
 
 ---

src/WebViewShared.tsx

 import React from 'react';
 import { Linking, View, ActivityIndicator, Text } from 'react-native';
 import {
-  WebViewNavigationEvent,
   OnShouldStartLoadWithRequest,
+  ShouldStartLoadRequestEvent,
 } from './WebViewTypes';
 import styles from './WebView.styles';
 
   originWhitelist: readonly string[],
   onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest,
 ) => {
-  return ({ nativeEvent }: WebViewNavigationEvent) => {
+  return ({ nativeEvent }: ShouldStartLoadRequestEvent) => {
     let shouldStart = true;
     const { url, lockIdentifier } = nativeEvent;
 

src/WebViewTypes.ts

   mainDocumentURL?: string;
 }
 
+export interface ShouldStartLoadRequest extends WebViewNavigation {
+  isTopFrame: boolean;
+}
+
 export interface FileDownload {
   downloadUrl: string;
 }
 
 export type WebViewNavigationEvent = NativeSyntheticEvent<WebViewNavigation>;
 
+export type ShouldStartLoadRequestEvent = NativeSyntheticEvent<ShouldStartLoadRequest>;
+
 export type FileDownloadEvent = NativeSyntheticEvent<FileDownload>;
 
 export type WebViewMessageEvent = NativeSyntheticEvent<WebViewMessage>;
 }
 
 export type OnShouldStartLoadWithRequest = (
-  event: WebViewNavigation,
+  event: ShouldStartLoadRequest,
 ) => boolean;
 
 export interface CommonNativeWebViewProps extends ViewProps {
   onLoadingStart: (event: WebViewNavigationEvent) => void;
   onHttpError: (event: WebViewHttpErrorEvent) => void;
   onMessage: (event: WebViewMessageEvent) => void;
-  onShouldStartLoadWithRequest: (event: WebViewNavigationEvent) => void;
+  onShouldStartLoadWithRequest: (event: ShouldStartLoadRequestEvent) => void;
   showsHorizontalScrollIndicator?: boolean;
   showsVerticalScrollIndicator?: boolean;
   // TODO: find a better way to type this.
   source: any;
   userAgent?: string;
   /**
-   * Append to the existing user-agent. Overriden if `userAgent` is set.
+   * Append to the existing user-agent. Overridden if `userAgent` is set.
    */
   applicationNameForUserAgent?: string;
 }