[🐛] Banner Ad not showing in React Native 0.70.1 - NEW ARCHITECTURE [workaround: do not use new architecture + post a PR fixing it]

[ugurdalkiran]

Hello.

I am using React Native version 0.70.1 and NEW ARCHITECTURE enabled. So I'm going {"fabric":true, ... }

I'm using react-native-google-mobile-ads version 8.1.0.

It loads and displays successfully with no issues with interstitials. 🎉

But I couldn't see the BANNER commercial no matter what I did on the screen. There is no error when I check it with the onAdFailedToLoad function.

Here is the code I use to add a BANNER ad.

<BannerAd unitId={TestIds.BANNER} size={BannerAdSize.BANNER} />

My thought may be that there is a problem because the fabric is being drawn on the screen? Have you encountered the same problem? How should we go about this?

[mikehardy]

Hey there! I'm unsure - I have done zero testing with fabric. Looks like I need to refresh the example so it's using up to date react-native 0.70.1 (as of this typing) then we can try with / without fabric

You don't mention in your report what versions of react-native and/or any other things you are running, also, it may be that it's just a no-fill ? But that would be an error I guess. Did the load hook actually run ? Just curious for more details I guess - I think you can also enable admob request logging as a popup and it will show you what the admob library thought of the requests - https://github.com/invertase/react-native-google-mobile-ads/blob/0bd3441fd92ee8ad5058df6d99f084bb004ea442/RNGoogleMobileAdsExample/App.tsx#L645

[ugurdalkiran]

The dependencies I use are:

"dependencies": {
    "react": "18.1.0",
    "react-native": "0.70.1",
    "react-native-gesture-handler": "2.6.1",
    "react-native-google-mobile-ads": "8.1.0",
    "react-native-reanimated": "3.0.0-rc.2",
    "react-native-splash-screen": "3.0.6",
    "react-native-svg": "13.2.0"
},
"devDependencies": {
    "@babel/core": "7.19.1",
    "@babel/runtime": "7.19.0",
    "@svgr/cli": "6.3.1",
    "metro-react-native-babel-preset": "0.72.3"
}

When I look at the window that opens, it says "No Fill" for Banner. What should I understand? :(

The banner becomes "No Fill" while the interstitial is "Fill".

[mikehardy]

I deleted the images from your comment in order to remove the ad ids so you may avoid any possibility for ad fraud - it happens! There is a troubleshooting section on no-fill reasons, there are quite a few reasons banners might no-fill, and your app has to handle it. I do not think this is fabric-related...

[mikehardy]

You can try TestIds.BANNER to see, as a test

[ugurdalkiran]

The Ids in the images were Test Id. :)

I have now deleted the Interstitial ad. I just left BANNER in the app. I can't see anything on the openAdInspector screen. I keep saying.

[ugurdalkiran]

There is nothing. So I stayed. :(

[mikehardy]

Hmm - I just updated the example so it's based on react-native 0.70.1 - you may try pulling this repo from that branch, making sure you can see the banner ids (I can) then enable new architecture and re-check (I have not tried this and won't have time at the moment, sorry)

https://github.com/invertase/react-native-google-mobile-ads/pull/226 https://github.com/invertase/react-native-google-mobile-ads/tree/%40mikehardy/refresh-example

[ugurdalkiran]

Is it normal that I don't get any console warning even though I add the banner ad like this?

<BannerAd
    unitId={TestIds.BANNER}
    size={BannerAdSize.BANNER}
    onAdOpened={e => {
        console.log("onAdOpened");
        console.log(e);
    }}
    onAdFailedToLoad={e => {
        console.log("onAdFailedToLoad");
        console.log(e);
    }}
    onAdLoaded={e => {
        console.log("onAdLoaded");
        console.log(e);
    }}
    onAdClosed={e => {
        console.log("onAdClosed");
        console.log(e);
    }}
/>

[mikehardy]

I dunno - I log things with the listener like this:

https://github.com/invertase/react-native-google-mobile-ads/blob/main/RNGoogleMobileAdsExample/App.tsx#L200-L210

[ugurdalkiran]

Aaaaah, I finally got something.

I noticed that the "onNativeEvent" function in react-native-google-mobile-ads/src/ads/BaseAd.tsx doesn't work at all. That's why the "setDimensions" function at the bottom was not triggering.

So I replaced the default dimensions on line 50 with this.

const [dimensions, setDimensions] = useState<(number | string)[]>([320, 50]);

After doing that, I was able to see this on the screen.

"'RNGoogleMobileAdsBannerView' is not Fabric compatible yet."

As I mentioned at the beginning, the problem is with Fabric.

[mikehardy]

Ah ha! Okay - so... now what :laughing: ? I'm new to the whole new architecture thing, there are enough other serious issues I'm working through across a few repos that I haven't had time to play with it at all

[ugurdalkiran]

At least we found the problem. I think you can get this thing in and get it done quickly, I trust you. 😆

[DoctorJohn]

@ugurdalkiran Mike is not using this module, it's up to us to add a feature if we want it. Do you have any experience with fabric? I'm wondering whether old and new architecture can be supported at the same time.

[mikehardy]

Not only am I not currently using it (though I do have some app dreams of course ;-)...) I've already worked about 20 hours this weekend and don't have fabric experience. So I'm not your person to trust in about 3 ways unfortunately... but I am "new architecture curious", and I do want this module to be maintained well so I'm happy to collaborate on any PRs that come up of course

[mikehardy]

Here's an example of another repo I maintain where someone proposed a PR for new architecture that appears to support old and new at the same time https://github.com/react-native-netinfo/react-native-netinfo/pull/622 - maybe useful ?

[ugurdalkiran]

I don't have any information. I just want to use Banner Ad in new architecture. :)

[ugurdalkiran]

Any progress on this issue? @mikehardy @DoctorJohn

[mikehardy]

@ugurdalkiran there will not be any progress I think, it is open source and requires someone that is motivated to get in there and do the work

Motivation can be "my company needs this feature", or "I am interested" or anything, it is different for different people.

There are no secret updates though, so for you and/or anyone else that sees this - if it affects you and you are motivated, post a PR and we will collaborate

In the absence of that, there will be no updates I think

[swatantragoswami09]

My ads is also not showing please help me I am using

"react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-google-mobile-ads": "^8.2.0"

[mikehardy]

Duplicate posts, "me too" posts, etc will be hidden as they do not provide value. Text is preferred over images. If you have more information to provide please do so but you must advance the state of knowledge here with your post for it to be considered valuable, a "me too" should just be a reaction above :point_up_2:

https://stackoverflow.com/help/how-to-ask - guidelines on the level of work you should do to advance the state of knowledge here.

[swatantragoswami09]

@mikehardy can you provide the solution to how we can solve this ??

[mikehardy]

@swatantragoswami09 do not use new architecture if you need this module, until this issue is fixed. That's stated in the comment thread above clearly

For all future commenters: read the comment thread here prior to posting, thank you

[swatantragoswami09]

I am using the latest version of the react-native-google-mobile-ads library but it is not showing me any ads as i showed you in the picture. what is old architecture ??

[mikehardy]

@swatantragoswami09 you appear to be in the wrong issue, and are hijacking this thread. Please open a new issue but read the new issue template first and carefully follow it's instructions, thank you.

[github-actions[bot]]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

[mikehardy]

This is a live issue but needs a motivated implementor to post a PR

[birdofpreyru]

I randomly came across this thread, and wanna add my 5cents:

• The New Architecture consists of two things, which can be independently enabled: Turbo Modules, and Fabric. I believe, this library only has issues with Fabric, and thus works with a part of New Architecture (Turbo Modules) enabled in an app.
• More popular libs still don't support Fabric, in particular react-native-webview does not support it yet. So, in a realworld it probably won't be the only lib preventing you to enable Fabric. Also, I might be wrong, but I have some memories that under the hood this library uses webview to show banner ads, thus the updates necessary / any issues on the way, might be similar to that rn-webview lib.
• Both architecture sure can be supported in the same lib. RN docs have a nice guide on how to migrate, and also they have example repo https://github.com/react-native-community/RNNewArchitectureLibraries showing how to migrate a lib to new arch with backward support of old arch, if anyabody here wants to play with it and do the migration :) (I have no capacity to do it myself in the foreseeable future).

[github-actions[bot]]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

[dylancom]

@ugurdalkiran I made a PR that makes the lib work on new arch: #413

[ugurdalkiran]

@dylancom I follow PR. Thank you. I will try it as soon as possible. 😍

[mikehardy]

:tada: This issue has been resolved in version 11.3.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[ugurdalkiran]

I don't know if I did something wrong but I couldn't see RN(0.72.3) RNGMA(11.4.0) ads on Android even though newArchEnabled=true. :/

[dylancom]

You can try the example app in this repo and compare, it works fine.