feat: [WIP] Native Ad Support

[wjaykim]

Description

Initial Native Advanced Ad Support

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 assetKey={'headline'}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{nativeAd.headline}</Text>
    </NativeAsset>
    <NativeAsset assetKey={'body'}>
      <Text>{nativeAd.body}</Text>
    </NativeAsset>
  </View>
  <NativeAsset assetKey={'callToAction'}>
    <View style={{ backgroundColor: '#4285F4', paddingHorizontal: 16, paddingVertical: 12 }}>
      <Text style={{ color: 'white', fontWeight: 'bold' }}>{nativeAd.callToAction}</Text>
    </View>
  </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
• wip

Related issues

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 ♥️ 👑

[rolandvar]

Is inserted an extra parenthesis.
It should be GADMediaView *mediaView = (RNGoogleMobileAdsMediaView *)view;

[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)