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