feat: Initial Native Ad Support

[wjaykim]

Description

Initial Native Advanced Ad Support

Detail usage of the API is documented in documentation preview.

References

• https://support.google.com/admanager/answer/7031536?hl=en
• https://developers.google.com/ad-manager/mobile-ads-sdk/android/native/advanced
• https://developers.google.com/ad-manager/mobile-ads-sdk/ios/native/advanced

Concepts

Headless NativeAsset component

Unlike previous RNAdmobNativeAd did, this implementations offers headless NativeAsset component. NativeAsset component is for registering 'asset view' to Native Ad, which allows the SDK to automatically handle tasks such as recording clicks, recording impressions, ... by wrapping the asset view. It does not have UI implementation, so App Developers must implement UI as for their needs. By doing this, we can make app developers customize their complex Native Ad style more easily.

For example:

<NativeAdView
  nativeAd={nativeAd}>
  <View style={{ padding: 16 }}>
    <NativeAsset assetType={'headline'}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{nativeAd.headline}</Text>
    </NativeAsset>
    <NativeAsset assetType={'body'}>
      <Text>{nativeAd.body}</Text>
    </NativeAsset>
  </View>
  <NativeAsset assetType={'callToAction'}>
    <Text style={{ backgroundColor: '#4285F4', color: 'white', fontWeight: 'bold', padding: 8 }}>{nativeAd.callToAction}</Text>
  </NativeAsset>
</NativeAdView>

SoC for Ad Instance and Ad View

• https://en.wikipedia.org/wiki/Separation_of_concerns
• https://en.wikipedia.org/wiki/Dependency_injection

Unlike BannerAd did, I separated process of loading ad and displaying ad respectively. Native Ad is more complex than Banner Ad, because:

• App developers need to access native assets of the loaded ad
• Sometimes they want to preload the ad, and display the ad immediately when the need.

Loading native ad, passing nativeAd to NativeAdView as props when available:

const NativeComponent = () => {
  const [nativeAd, setNativeAd] = useState<NativeAd>();

  useEffect(() => {
    NativeAd.createForAdRequest(TestIds.NATIVE)
      .then(setNativeAd)
      .catch(console.error);
  }, []);

   if (!nativeAd) {
    return null;
  }

  return (
    <NativeAdView nativeAd={nativeAd}>
      // Components to display assets must be placed here
    </NativeAdView>
  );
};

Ad instance per request

Unlike FullScreenAds(Interstitial, Rewarded, ...) of our library, ad instance is initialized after the ad is loaded.

By doing this,

• Loading step is simplified using Promise, replacing event listener
• Properties of the ad(especially assets of the ad) is guaranteed to be initialized

Supports Both new arch and old arch

This implementation supports both new arch and old arch, while using turbo module and fabric native component codebase.

Related issues

#638

Release Summary

Checklist

• I read the Contributor Guide
  and followed the process outlined there for submitting PRs.
  • Yes
• My change supports the following platforms;
  • Android
  • iOS
• My change includes tests;
  • e2e tests added or updated in __tests__e2e__
  • jest tests added or updated in __tests__
• I have updated TypeScript types that are affected by my change.
• This is a breaking change;
  • Yes
  • No

Test Plan

---

Think react-native-google-mobile-ads is great? Please consider supporting the project with any of the below:

• 👉 Star this repo on GitHub ⭐️
• 👉 Follow Invertase on Twitter

[docs-page]

To view this pull requests documentation preview, visit the following URL:

docs.page/invertase/react-native-google-mobile-ads~650

Documentation is deployed and generated using docs.page.

[dylancom]

Amazing work so far @wjaykim. So this means you don't have to create a template in Xcode right?

[wjaykim]

So this means you don't have to create a template in Xcode right?

@dylancom Yes it is. It will work just by writing jsx.

[mikehardy]

@wjaykim shows up from nowhere after a long time and just drops native ad support 😆

🏆

[AppDeveloperGroup]

Hello! Tell me how to show advertising images?

[goxr3plus]

When will this be merged we need it :)

[mikehardy]

@goxr3plus easy to use patch-package to integrate it, please provide testing and feedback, that is very very useful when it comes to merging PRs. Can't give any ETAs whatsoever (it's open source!) but it is marked as draft, so at least for me, it's not ready. Only @wjaykim can say otherwise since they are the benevolent author that provided the code

[goxr3plus]

@wjaykim You are doing an amazing work i have checked the file changes and the quality is top 🔝. Thank you so much for your effort ♥️ 👑

[ducpt-bili]

hi @goxr3plus , may you give me a guide how to patch-package with native ads and using them in your project. Thanks

[goxr3plus]

hi @goxr3plus , may you give me a guide how to patch-package with native ads and using them in your project. Thanks

I am still waiting it to be on the main branch official, i haven't patched or used this as it's work in progress, probably it's finalized soon ☺️

[Aporial]

Is there any way to use it?

[mikehardy]

@Aporial there is but you (or anyone that wants to use it) needs to be careful and know what they are doing, yes? Has to be said :-)

But the tree is visible here:
https://github.com/invertase/react-native-google-mobile-ads/commits/%40wjaykim/native-ad/

The last commit shared with main is
feefff7

So: in your package.json
1- set that main git commit SHA reference as the package reference for this package, it's the last shared commit on main we published, so that is the safe basis
2- download the diff for the PR: https://patch-diff.githubusercontent.com/raw/invertase/react-native-google-mobile-ads/pull/650.diff into "custom-patches" directory in project root
3- add "custom-patch" property to "scripts" in package.json, run as "cd node_modules/react-native-google-mobile-ads && patch -p1 --forward < custom-patches/650.diff || true" so you can use it as a javascript build target
4- add "custom-build" property to "scripts" in package.json, run as "cd node_modules/react-native-google-mobile-ads" && yarn && yarn build"
4- add "postinstall" property to "scripts" in package.json so it runs every time you run yarn (npm people, replace with npm and/or npm -i as needed). Run as "yarn custom-build && yarn custom-patch"

That (or maybe something very similar to that, if the paths in the diffs are wrong in step 3, or if I had a typo somewhere), should get you a published stable commit of main repo, with the PR diff layered on top, if you want to test it and provide feedback

[wjaykim]

I'm still working on it, there's still not implemented features(such as controlling video, receiving events...), and also I have to update documentation before I can say it's ready for review. I have no particular motivation for this work, but just for voluntary purposes. And since this is not my main job, it's hard to allocate my resource fully on this PR(especially these year-end days). Sorry to those who are waiting, but �I'm trying to and wish to end-up this PR ASAP, fyi.

[Aporial]

If it shows an image, title, description and a button - that's great)

[Roshdy]

can I donate or pay to complete this feature?

I've already starred and followed you

[dylancom]

Can you add a Learn More link to the docs in our README: https://github.com/invertase/react-native-google-mobile-ads/blob/main/README.md#native
And also add the old / new arch status: https://github.com/invertase/react-native-google-mobile-ads/blob/main/README.md#migrating-to-the-new-architecture-status-backwards-compatible

[dylancom]

Fantastic work. The last (and most challenging) puzzle piece in completing this package.
Waiting for a review from @mikehardy.

[mikehardy]

I'm not an expert in the implementation so my comments are shallow there - though I did read through everything and it did look good to me

My main contribution here is to really work through testing it, on new and old architecture on both platforms.

To support this I refreshed the example (and fixed up the script so it is more modern) and committed those changes

Then as I was testing it on old architecture I noticed an issue with the listener addition on iOS and fixed that, as well as an issue with the event emission type, and I fixed that

I committed those changes and pushed them

I left some nitpicks on wording for the docs (which were excellent, IMHO) and I'll just commit those as a batch

If you two are okay with the commits I tacked on, this is ready for merge in my opinion

Should be a squash I think / feat commit tag

Amazing work

[mikehardy]

Interesting that the GAM ids were all wrong! But these do check out --> https://developers.google.com/ad-manager/mobile-ads-sdk/android/test-ads

[mikehardy]

🎉 This PR is included in version 14.8.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀