ammarahm-ed/react-native-admob-native-ads

Asset uses ImageView, not MediaView - NativeMediaView not work

Opened this issue · 0 comments

If I use ImageView, after 12 hours it turns off ads because of the error {"code": 3, "domain": "com.google.android.gms.ads", "message": "Asset uses ImageView, not MediaView. <https://support.google.com/admob/answer/9905175#5>"}

In the native block settings in Admob, I unchecked the video ad. This did not help.
The error says that you need to use NativeMediaView instead of ImageView. I tried to do this to display images, but I ran into a problem. NativeMediaView does not display an image when the application starts. But if I press Ctrl + S in the code editor, it shows the image.

My code:

import {useEffect, useRef, useState} from 'react';
import {View, PixelRatio} from 'react-native';
import NativeAdView, {NativeMediaView} from 'react-native-admob-native-ads';
import {
  HeadlineView,
  TaglineView,
  ImageView,
  IconView,
  CallToActionView,
} from 'react-native-admob-native-ads';

import {BannerAd, BannerAdSize, TestIds} from 'react-native-google-mobile-ads';
import DeviceInfo from 'react-native-device-info';

interface NativeAdData {
  icon?: any;
}

const NativeAd = () => {
  const [adUnitId, setAdUnitId] = useState(TestIds.BANNER);
  const nativeAdViewRef = useRef<NativeAdView>(null);
  const [isAdLoaded, setIsAdLoaded] = useState(false);
  const [hasIcon, setHasIcon] = useState(false);
  const [showFallbackBanner, setShowFallbackBanner] = useState(false); // Доданий стан для банера

  useEffect(() => {
    // Визначення типу пристрою (емулятор чи реальний)
    DeviceInfo.isEmulator().then(isEmulator => {
      if (isEmulator) {
        setAdUnitId(TestIds.BANNER); // Тестова реклама для емулятора
        console.log('Запущено на емуляторі: показуємо тестову рекламу');
      } else {
        setAdUnitId('ID'); // Справжній ідентифікатор реклами
        console.log(
          'Запущено на реальному пристрої: показуємо реальну рекламу',
        );
      }
    });

    nativeAdViewRef.current?.loadAd();
  }, []);

  const handleAdLoaded = (adData: NativeAdData) => {
    setHasIcon(adData?.icon && adData.icon !== 'noicon');
    setIsAdLoaded(true);
    setShowFallbackBanner(false); // Скидаємо fallback
  };

  const handleAdFailedToLoad = (error: any) => {
    console.log('Помилка завантаження реклами:', error);
    setShowFallbackBanner(true); // Увімкнути fallback банер
  };

  const scale = PixelRatio.get();
  const scaleFactor = 2.5 / scale;

  return (
    <>
      {showFallbackBanner ? (
        <BannerAd
          unitId={adUnitId}
          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        />
      ) : (
        <NativeAdView
          ref={nativeAdViewRef}
          adUnitID="ID"
          onNativeAdLoaded={handleAdLoaded}
          onAdFailedToLoad={handleAdFailedToLoad}
          enableSwipeGestureOptions={{
            tapsAllowed: false,
            swipeGestureDirection: 'right',
          }}>
          {isAdLoaded ? (
            <View
              style={{
                backgroundColor: 'rgba(0, 0, 0, 0.25)',
                flexDirection: 'row',
                alignItems: 'center',
                borderRadius: 10,
                margin: 1,
              }}>
              <NativeMediaView style={{height: 100, width: 100}} />
              {/* {hasIcon ? (
                <IconView
                  style={{
                    width: 60,
                    height: 60,
                    margin: 5,
                    borderRadius: 5,
                  }}
                />
              ) : (
                <ImageView
                  style={{
                    width: 60,
                    height: 60,
                    margin: 5,
                    borderRadius: 5,
                  }}
                />
              )} */}
              <View
                style={{
                  flex: 1,
                  justifyContent: 'center',
                  marginBottom: 5,
                  marginTop: 5,
                }}>
                <HeadlineView
                  allowFontScaling={false}
                  style={{
                    fontFamily: 'GolosText-Medium',
                    fontSize: 14 * scaleFactor,
                    color: 'black',
                  }}
                />
                <TaglineView
                  allowFontScaling={false}
                  style={{
                    fontFamily: 'GolosText-Medium',
                    fontSize: 12 * scaleFactor,
                    color: 'black',
                  }}
                />
              </View>
              <View
                style={{
                  height: 35,
                  width: 90,
                  backgroundColor: '#f7c675',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 5,
                  marginRight: 5,
                  elevation: 5,
                }}>
                <CallToActionView
                  allowFontScaling={false}
                  style={{
                    height: 35,
                    width: 90,
                    backgroundColor: 'transparent',
                  }}
                  textStyle={{
                    color: 'black',
                    fontFamily: 'GolosText-Medium',
                    fontSize: 14,
                  }}
                />
              </View>
            </View>
          ) : (
            <View />
          )}
        </NativeAdView>
      )}
    </>
  );
};

export default NativeAd;