react-native-admob-native-ads icon indicating copy to clipboard operation
react-native-admob-native-ads copied to clipboard

Native Ads Not Showing

Open ShivGandhi29 opened this issue 4 months ago • 0 comments

Hi there,

Im using the react-native-admob-native-ads package and cant get the ads to display. Im getting a very similar issue to this thread here: https://github.com/ammarahm-ed/react-native-admob-native-ads/issues/39

Image

I have a react native expo app, and in my app.config file I'm using the both test ad id and test app id from AdMob. This is for iOS:

  [
    'react-native-admob-native-ads',
    {
      iosAppId: 'ca-app-pub-3940256099942544~1458002511',
      facebookMediation: false,
    }
  ],

my index (app launch) file has this useeffect to initialize the ad:

    /**
     * AdMob Initialisation
     */
    useEffect(() => {
        configureAdMob().then(() => {
            setAdmobReady(true);
            console.log('AdMob configured');
        });
    }, []);

and my AdMobConfig looks like this: import { Platform } from 'react-native'; import { AdManager, MAX_AD_CONTENT_RATING } from 'react-native-admob-native-ads';


const realAdUnitIds = {
  native: Platform.select({
    ios: 'ca-app-pub-2795024523940881/6534257751',
    android: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
  }),
};


const testAdUnitIds = {
  native: 'ca-app-pub-3940256099942544/3986624511',
};


export const adUnitIds = __DEV__ ? testAdUnitIds : realAdUnitIds;


const testDeviceIds = ['48645E32-BB80-4A76-87C4-A551E40A31C5'];

const config = {
  testDeviceIds: testDeviceIds,
  tagForChildDirectedTreatment: false,
  tagForUnderAgeConsent: false,
};
export async function configureAdMob() {
    try {
      console.log('Starting AdMob Native Ads config...');
      console.log(`Mode: ${__DEV__ ? 'Development' : 'Production'}`);
      console.log(`Platform: ${Platform.OS}`);
      
      await AdManager.setRequestConfiguration(config);
      console.log('config', config)
      AdManager.isTestDevice().then((isTest) => {
        console.log('isTest', isTest)
      })
     
      console.log('AdMob Native configuration applied.');
    } catch (error) {
      console.error('Failed to configure AdMob:', error);
    }
  }

My logs say that admob is configured, but when i run my test ad it doesnt load the ad. This my my test ad:

import NativeAdView, {
  CallToActionView,
  IconView,
  HeadlineView,
  TaglineView,
  AdvertiserView,
  AdBadge,
} from "react-native-admob-native-ads";
import { View, Text, Button } from "react-native";

function logs(){
  console.log('logs are loggingggggggggggggggg')
}

export default function TestAd() {


  return (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <Button title="logs" onPress={logs} />
      <NativeAdView
        adUnitID="ca-app-pub-3940256099942544/3986624511"
        onAdLoaded={() => {
          console.log("Ad loaded");
        }}
        onAdFailedToLoad={(error) => {
          console.warn("Failed to load ad", error);
        }}
        style={{
          width: "95%",
          alignSelf: "center",
          minHeight: 300,
          backgroundColor: "#fff",
        }}
        enableSwipeGestureOptions={{ tapsAllowed: true }}
      >
        <AdBadge />
        <View
          style={{
            height: 100,
            width: "100%",
            flexDirection: "row",
            justifyContent: "flex-start",
            alignItems: "center",
            paddingHorizontal: 10,
          }}
        >
          <IconView
            style={{
              width: 60,
              height: 60,
            }}
          />
          <View
            style={{
              width: "65%",
              maxWidth: "65%",
              paddingHorizontal: 6,
            }}
          >
            <HeadlineView
              style={{
                fontWeight: "bold",
                fontSize: 13,
              }}
            />
            <TaglineView
              numberOfLines={1}
              style={{
                fontSize: 11,
              }}
            />
            <AdvertiserView
              style={{
                fontSize: 10,
                color: "gray",
              }}
            />
          </View>

          <CallToActionView
            style={{
              height: 45,
              paddingHorizontal: 12,
              backgroundColor: "blue",
              justifyContent: "center",
              alignItems: "center",
              borderRadius: 5,
              elevation: 10,
            }}
            textStyle={{ color: "white", fontSize: 14 }}
            
        
          />
        </View>
      </NativeAdView>
    </View>
  );
}

One of the main issues is that I don't get any logs showing for

        onAdLoaded={() => {
          console.log("Ad loaded");
        }}
        onAdFailedToLoad={(error) => {
          console.warn("Failed to load ad", error);
        }} 

Any solutions will be much appreciated.

Thank you

ShivGandhi29 avatar Jun 16 '25 04:06 ShivGandhi29