[🐛] Interstitial ad was ignoring Safe Area and the top right X was covered by Wifi and Battery icons

What happened?

Well, I'm not entirely sure how I got this, but I usually get the Bingo Blast test ad in my app, and can click the skip in the top right.

However, today I was using my app and it showed a new ad. It was something with a guy talking in the video, but the add was pushed to a height that was way past the safe view area. I couldn't close the ad at all since the close button was coverdd by the Wifi and Battery icons.

I've been trying my darndest to reproduce it, but I can only seemingly get Bingo Blast now...

Here is my AdMob.js

import React, { useEffect, useState, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Purchases from 'react-native-purchases';
import { setLastAdShown } from 'src/redux/reducers/ads';
import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';

const AD_INTERVAL = 24 * 60 * 60 * 1000 // 24 hours
const AD_INTERVAL_FIRST_LOGIN = 48*60*60*1000 // 48 hours

const AdMobService = () => {
    const dispatch = useDispatch();
    const lastAdShown = useSelector(state => state.ads.lastAdShown);
    const firstLogin = useSelector(state => state.ads.firstLogin)
    const { isLoaded, load, show } = useInterstitialAd(TestIds.INTERSTITIAL_VIDEO);
    const [customerInfo, setCustomerInfo] = useState({});

    const fetchCustomerInfo = useCallback(async () => {
        const info = await Purchases.getCustomerInfo();
        setCustomerInfo(info);
    }, []);

    useEffect(() => {
        let isMounted = true;
        let listener = null;

        const initListener = async () => {
            listener = Purchases.addCustomerInfoUpdateListener(info => {
                if (isMounted) setCustomerInfo(info);
            });

            fetchCustomerInfo();
        };

        initListener();

        return () => {
            isMounted = false;
            if (listener && typeof listener?.remove === 'function') {
                listener?.remove();
            }
        };
    }, [fetchCustomerInfo]);

    useEffect(() => {
        if (customerInfo && !customerInfo?.entitlements?.active?.['basic']) {
            const now = Date.now();
            const timeSinceLastAd = now - lastAdShown;
            const timeUntilNextAd = AD_INTERVAL - timeSinceLastAd;
            if (timeUntilNextAd <= 0) {
                load();
            } else {
                const timer = setTimeout(() => {
                    load();
                }, timeUntilNextAd);
                return () => clearTimeout(timer);
            }
        }
    }, [lastAdShown, customerInfo, load]);

    useEffect(() => {
        const firstAd = firstLogin ? (firstLogin + AD_INTERVAL_FIRST_LOGIN) <= Date.now() : false
        if (isLoaded && firstAd && customerInfo && !customerInfo?.entitlements?.active?.['basic']) {
            show();
            dispatch(setLastAdShown(Date.now()));
        }
    }, [isLoaded, show, dispatch, firstLogin]);

    return null;
};

export default AdMobService;

Then in my App.js, I have

. . .
import AdMobService from './services/AdMob';
const AppContent = () => {
  return (
    <PaperProvider>
    { stateAuthSession ?
      <>
        <Navigation />
        <StoreSettings />
        <StoreContacts />
        <CountTagged />
        <PushNotifications />
        <NavigationService /> 
        <OfflineManager />
        <ColorScheme />
        <SetupRevenuecat />
        <AdMobService />
      </>
      : <>
          <Auth />
          <ColorScheme />
        </>
    }
    </PaperProvider>
  )
}
const App = () => {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor} loading={null}>
        <NavigationProvider>
          <AppContent/>
          <GlobalModal />
        </NavigationProvider>
      </PersistGate>
    </Provider>
  );
};

export default App;

Is it possible that certain test ads can break free from the safe area somehow?

Platforms

iOS, but have not tested behavior on Android

React Native Info

❯ npx react-native info                  
info Fetching system and libraries information...
System:
  OS: macOS 14.3.1
  CPU: (8) arm64 Apple M2
  Memory: 80.80 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: ~/.nvm/versions/node/v20.11.1/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.1/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/opt/ruby/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "27"
      - "28"
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 33.0.1
      - 34.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-29 | Google Play ARM 64 v8a
      - android-30 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-UpsideDownCakePrivacySandbox | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10227.8.2321.11479570
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Are your using Typescript?

[ ] My project is using Typescript

package.json

"react-native-google-mobile-ads": "^13.0.2",

app.json

N/A

ios/Podfile

N/A

android/build.gradle

N/A

android/app/build.gradle

N/A

android/settings.gradle

N/A

AndroidManifest.xml

N/A

invertase / react-native-google-mobile-ads