Cannot find NativeAssetView with tag #xxxx while registering asset type media

[Tranthanh98]

Documentation Feedback

I suddenly faced with this issue:

Cannot find NativeAssetView with tag #3238 while registering asset type media

__54-[RNGoogleMobileAdsNativeView registerAsset:reactTag:]_block_invoke

RNGoogleMobileAdsNativeView.mm:132

RCTExecuteOnMainQueue

-[RNGoogleMobileAdsNativeView registerAsset:reactTag:]

RCTRNGoogleMobileAdsNativeViewHandleCommand

-[RNGoogleMobileAdsNativeView handleCommand:args:]

-[RCTMountingManager synchronouslyDispatchCommandOnUIThread:commandName:args:]

__55-[RCTMountingManager dispatchCommand:commandName:args:]_block_invoke

__RCTExecuteOnMainQueue_block_invoke

this is my React native component

{
import { useTheme } from "@/contexts";
import { CustomTheme } from "@/contexts/ThemeContext";
import React, { useEffect, useState } from "react";
import {
  ActivityIndicator,
  Dimensions,
  Image,
  Platform,
  StyleSheet,
  View,
} from "react-native";
import {
  NativeAd,
  NativeAdView,
  NativeAsset,
  NativeAssetType,
  NativeMediaView,
  TestIds,
} from "react-native-google-mobile-ads";
import { TextUI } from "../common/TextUI";

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export const NativeAdsItem: React.FC = () => {
  const { theme } = useTheme();
  const [nativeAd, setNativeAd] = useState<NativeAd | null>(null);
  const [loading, setLoading] = useState(true);
  const styles = makeStyles(theme);

  const adUnitId = __DEV__
    ? TestIds.NATIVE
    : Platform.OS === "ios"
    ? process.env.EXPO_PUBLIC_IOS_NATIVE_ADS_UNIT_ID
    : process.env.EXPO_PUBLIC_ANDROID_NATIVE_ADS_UNIT_ID;

  useEffect(() => {
    if (!adUnitId) return;

    const loadAd = async () => {
      try {
        const ad = await NativeAd.createForAdRequest(adUnitId, {
          requestNonPersonalizedAdsOnly: false,
        });
        setNativeAd(ad);
      } catch (e) {
        console.log("Native Ad load error:", e);
      } finally {
        setLoading(false);
      }
    };

    loadAd();
    return () => {
      if (nativeAd) nativeAd.destroy();
    };
  }, [adUnitId]);

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={theme.primary} />
        <TextUI style={styles.loadingText}>Loading Ad…</TextUI>
      </View>
    );
  }

  if (!nativeAd) {
    return (
      <View style={styles.errorContainer}>
        <TextUI style={styles.errorText}>No ad available</TextUI>
      </View>
    );
  }

  return (
    <NativeAdView nativeAd={nativeAd} style={styles.adContainer}>
      {/* Media - Full background like MediaViewer */}
      <NativeMediaView style={styles.mediaView} resizeMode="cover" />

      {/* Content Overlay - Similar to StoryViewer */}
      <View style={styles.contentOverlay}>
        {/* Bottom Content */}
        <View style={styles.bottomContent}>
          {/* Ad Attribution - moved inside bottomContent */}
          <View style={styles.attributionContainer}>
            <TextUI style={styles.attributionText}>Ad</TextUI>
          </View>
          {/* Icon and Text Row */}
          <View style={styles.infoRow}>
            <NativeAsset assetType={NativeAssetType.ICON}>
              <Image
                style={styles.iconImage}
                source={{ uri: nativeAd.icon?.url }}
              />
            </NativeAsset>

            <View style={styles.textContainer}>
              {/* Headline */}
              <NativeAsset assetType={NativeAssetType.HEADLINE}>
                <TextUI style={styles.headlineText} numberOfLines={2}>
                  {nativeAd.headline}
                </TextUI>
              </NativeAsset>

              {/* Body */}
              <NativeAsset assetType={NativeAssetType.BODY}>
                <TextUI style={styles.bodyText} numberOfLines={2}>
                  {nativeAd.body}
                </TextUI>
              </NativeAsset>
            </View>
          </View>

          {/* CTA Button */}
          <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
            <View style={styles.ctaButton}>
              <TextUI style={styles.ctaText}>{nativeAd.callToAction}</TextUI>
            </View>
          </NativeAsset>
        </View>
      </View>
    </NativeAdView>
  );
};

const makeStyles = (theme: CustomTheme) =>
  StyleSheet.create({
    adContainer: {
      width: SCREEN_WIDTH,
      height: SCREEN_WIDTH, // Similar to MediaViewer height
      borderRadius: 60,
      overflow: "hidden",
      backgroundColor: theme.surface,
      elevation: 3,
      alignSelf: "center",
      position: "relative",
    },
    mediaView: {
      width: "100%",
      aspectRatio: 1,
    },
    contentOverlay: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: "space-between",
      padding: 16,
    },
    bottomContent: {
      backgroundColor: "rgba(0, 0, 0, 0.6)",
      borderRadius: 12,
      padding: 16,
      position: "relative",
    },
    infoRow: {
      flexDirection: "row",
      alignItems: "center",
      marginBottom: 12,
    },
    iconImage: {
      width: 50,
      height: 50,
      borderRadius: 25,
      backgroundColor: theme.blurBackground,
    },
    textContainer: {
      flex: 1,
      marginLeft: 12,
    },
    headlineText: {
      fontSize: 18,
      fontWeight: "bold",
      color: "white",
      textShadowColor: "rgba(0, 0, 0, 0.8)",
      textShadowOffset: { width: 0, height: 1 },
      textShadowRadius: 4,
    },
    bodyText: {
      fontSize: 14,
      color: "rgba(255, 255, 255, 0.9)",
      marginTop: 4,
      textShadowColor: "rgba(0, 0, 0, 0.8)",
      textShadowOffset: { width: 0, height: 1 },
      textShadowRadius: 4,
    },
    ctaButton: {
      backgroundColor: theme.primary,
      borderRadius: 25,
      paddingVertical: 12,
      paddingHorizontal: 24,
      alignSelf: "flex-start",
      marginTop: 12,
    },
    ctaText: {
      color: "white",
      fontWeight: "600",
      fontSize: 16,
    },
    attributionContainer: {
      position: "absolute",
      bottom: -8,
      right: -8,
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      paddingHorizontal: 6,
      paddingVertical: 2,
      borderRadius: 4,
      minWidth: 15,
      minHeight: 15,
    },
    attributionText: {
      color: "white",
      fontSize: 10,
      fontWeight: "500",
      textAlign: "center",
    },
    loadingContainer: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: theme.background,
    },
    loadingText: {
      marginTop: 8,
      fontSize: 14,
      color: theme.textSecondary,
    },
    errorContainer: {
      padding: 20,
      alignItems: "center",
      backgroundColor: theme.background,
    },
    errorText: {
      fontSize: 14,
      color: theme.textSecondary,
    },
  });
}