Skip to content

Native Ads Not Showing #405

@ShivGandhi29

Description

@ShivGandhi29

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: #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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions