@proulr/sdui-components 0.1.80 → 0.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.80",
+  "version": "0.1.81",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

package/src/renderer/blocks/SduiNativeAdBlock.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { AppState, type AppStateStatus, StyleSheet, Text, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import {
   DEFAULT_NATIVE_AD_ASPECT_RATIO,
@@ -12,6 +12,13 @@ import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 type NativeAdModule = typeof import('react-native-google-mobile-ads');
 type LoadedNativeAd = Awaited<ReturnType<NativeAdModule['NativeAd']['createForAdRequest']>>;
 
+/**
+ * Ao voltar do segundo plano o `NativeMediaView` do Android costuma renderizar
+ * em branco e o ad expira (~1h). Recarrega quando falhou antes ou está mais
+ * velho que isto; abaixo do limiar são só app-switches rápidos.
+ */
+const NATIVE_AD_RESUME_RELOAD_MS = 30_000;
+
 function resolveBlockWidth(props: Record<string, unknown>): number | undefined {
   if (typeof props.width === 'number' && props.width > 0) return props.width;
   return undefined;
@@ -42,6 +49,10 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
   const [adsModule, setAdsModule] = useState<NativeAdModule | null>(null);
   const [nativeAd, setNativeAd] = useState<LoadedNativeAd | null>(null);
   const [failed, setFailed] = useState(false);
+  const [reloadToken, setReloadToken] = useState(0);
+
+  const loadedAtRef = useRef(0);
+  const failedRef = useRef(false);
 
   useEffect(() => {
     if (!catalog?.isEnabled()) return;
@@ -66,16 +77,22 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
           return;
         }
 
+        loadedAtRef.current = Date.now();
+        failedRef.current = false;
+        setFailed(false);
         setNativeAd(ad);
       } catch {
-        if (!cancelled) setFailed(true);
+        if (!cancelled) {
+          failedRef.current = true;
+          setFailed(true);
+        }
       }
     })();
 
     return () => {
       cancelled = true;
     };
-  }, [catalog, placement]);
+  }, [catalog, placement, reloadToken]);
 
   useEffect(() => {
     if (!nativeAd) return;
@@ -84,6 +101,35 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
     };
   }, [nativeAd]);
 
+  useEffect(() => {
+    if (!catalog?.isEnabled()) return;
+
+    let backgroundSince: number | null = null;
+
+    const subscription = AppState.addEventListener('change', (state: AppStateStatus) => {
+      if (state === 'active') {
+        if (backgroundSince === null) return;
+        const backgroundMs = Date.now() - backgroundSince;
+        backgroundSince = null;
+        if (backgroundMs < 3_000) return;
+        const stale =
+          loadedAtRef.current === 0 ||
+          Date.now() - loadedAtRef.current > NATIVE_AD_RESUME_RELOAD_MS;
+        if (failedRef.current || stale) {
+          setReloadToken((token) => token + 1);
+        }
+        return;
+      }
+      if (backgroundSince === null) {
+        backgroundSince = Date.now();
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [catalog]);
+
   if (!catalog?.isEnabled()) {
     return null;
   }