react-native-google-mobile-ads 14.7.1 → 14.8.0

package/README.md

@@ -30,22 +30,107 @@ React Native Google Mobile Ads is built with three key principals in mind;
 - 📄 **Well documented**
   - full reference & installation documentation alongside detailed guides and FAQs
 
+## Ad formats
+
+### App open
+
+App open ads are a special ad format intended for publishers wishing to monetize their app load screens.
+
+<img width="200" src="https://developers.google.com/static/admob/images/app-open-ad.png" alt="App open ad">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#app-open-ads)
+
+### Banner
+
+Banner ad units display rectangular ads that occupy a portion of an app's layout.
+They stay on screen while users are interacting with the app, either anchored at the top or bottom of the screen or inline with content as the user scrolls.
+Banner ads can refresh automatically after a certain period of time.
+
+#### Anchored adaptive
+
+A dynamically sized banner that is full-width and auto-height. Anchored adaptive banners are expected to be always on-screen, locked to the screen’s top or bottom.
+
+<img width="200" src="https://developers.google.com/static/admob/images/Android_adaptive.png" alt="Anchored adaptive">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#banner-ads-component)
+
+#### Inline adaptive
+
+Inline adaptive banners are larger, taller banners compared to anchored adaptive banners.
+They are of variable height, and can be as tall as the device screen.
+They are intended to be placed in scrolling content.
+
+<img width="600" src="https://developers.google.com/static/admob/images/inline-adaptive.png" alt="Inline adaptive">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#banner-ads-component)
+
+#### Collapsible
+
+Collapsible banner ads are intended to improve performance of anchored ads that are otherwise a smaller size.
+
+<img width="400" src="https://developers.google.com/static/admob/images/collapsible-banner.png" alt="Collapsible banner">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#collapsible-banner-ads)
+
+#### Fixed size (legacy)
+
+The Google Mobile Ads SDK supports fixed ad sizes for situations where adaptive banners ads don't meet your needs.
+Banner (320x50), Large banner (320x100), Medium rectangle (300x250), full banner (468x60) and leaderboard (728x90).
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#banner-ads-component)
+
+### Native
+
+Native ads allow you to customize the look and feel of the ads that appear in your app.
+You decide how and where they're placed, so the layout is more consistent your app's design.
+
+<img width="300" src="https://developers.google.com/static/admob/images/format-native.svg" alt="Native">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/native-ads)
+
+### Interstitial
+
+Interstitial ad units show full-page ads in your app. Place them at natural breaks & transitions in your app's interface, such as after level completion in a gaming app.
+
+<img width="300" src="https://developers.google.com/static/admob/images/format-interstitial.svg" alt="Interstitial">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#interstitial-ads)
+
+### Rewarded
+
+AdMob rewarded ad units allow you to reward users with in-app items for interacting with video ads, playable ads, and surveys.
+
+<img width="300" src="https://developers.google.com/static/admob/images/format-rewarded.svg" alt="Rewarded">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#rewarded-ads)
+
+### Rewarded Interstitial
+
+Rewarded interstitial is a type of incentivized ad format that allows you offer rewards for ads that appear automatically during natural app transitions.
+Unlike rewarded ads, users aren't required to opt-in to view a rewarded interstitial.
+
+<img width="300" src="https://developers.google.com/static/admob/images/format-rewarded-interstitial.svg" alt="Rewarded interstitial">
+
+[Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#rewarded-interstitial-ads)
+
 ## Migrating to the New Architecture Status (backwards compatible)
 
 This package can be used in both The Old and [The New Architecture](https://reactnative.dev/docs/the-new-architecture/landing-page).
 When using The New Architecture, some legacy code will still be used though. See status below:
 
 | Platform | Feature                                                                                                                                                        | Status      |
-| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| -------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------| ----------- |
 | iOS      | Mobile Ads SDK Methods (Turbo Native Module)                                                                                                                   | ✅ Complete |
 | iOS      | Banners (Fabric Native Component)                                                                                                                              | ✅ Complete |
 | iOS      | Full Screen Ads (Turbo Native Module)                                                                                                                          | ✅ Complete |
+| iOS      | Native Ads (Turbo Native Module, Fabric Native Component)                                                                                                      | ✅ Complete |
 | iOS      | User Messaging Platform (Turbo Native Module)                                                                                                                  | ✅ Complete |
 | iOS      | [EventEmitter](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md#add-event-emitting-capabilities) (Turbo Native Module) | ⏳ To-Do    |
 | iOS      | Revenue Precision Constants (Turbo Native Module)                                                                                                              | ✅ Complete |
 | Android  | Mobile Ads SDK Methods (Turbo Native Module)                                                                                                                   | ⏳ To-Do    |
 | Android  | Banners (Fabric Native Component)                                                                                                                              | ⏳ To-Do    |
 | Android  | Full Screen Ads (Turbo Native Module)                                                                                                                          | ⏳ To-Do    |
+| Android  | Native Ads (Turbo Native Module, Fabric Native Component)                                                                                                      | ✅ Complete |
 | Android  | User Messaging Platform (Turbo Native Module)                                                                                                                  | ⏳ To-Do    |
 | Android  | [EventEmitter](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md#add-event-emitting-capabilities) (Turbo Native Module) | ⏳ To-Do    |
 | Android  | Revenue Precision Constants (Turbo Native Module)                                                                                                              | ⏳ To-Do    |

package/android/build.gradle

@@ -108,6 +108,16 @@ android {
       appJSONGoogleMobileAdsOptimizeAdLoading      : appJSONGoogleMobileAdsOptimizeAdLoadingBool
     ]
     buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+
+    sourceSets {
+      main {
+        if (isNewArchitectureEnabled()) {
+          java.srcDirs += ['src/newarch']
+        } else {
+          java.srcDirs += ['src/oldarch']
+        }
+      }
+    }
   }
   lintOptions {
     disable 'GradleCompatible'

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeAppModule.java

@@ -30,10 +30,10 @@ import io.invertase.googlemobileads.common.ReactNativeModule;
 import io.invertase.googlemobileads.common.ReactNativePreferences;
 
 public class ReactNativeAppModule extends ReactNativeModule {
-  private static final String TAG = "RNAppModule";
+  static final String NAME = "RNAppModule";
 
   ReactNativeAppModule(ReactApplicationContext reactContext) {
-    super(reactContext, TAG);
+    super(reactContext, NAME);
   }
 
   @Override

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsConsentModule.java

@@ -35,11 +35,11 @@ import javax.annotation.Nonnull;
 
 public class ReactNativeGoogleMobileAdsConsentModule extends ReactNativeModule {
 
-  private static final String TAG = "RNGoogleMobileAdsConsentModule";
+  static final String NAME = "RNGoogleMobileAdsConsentModule";
   private ConsentInformation consentInformation;
 
   public ReactNativeGoogleMobileAdsConsentModule(ReactApplicationContext reactContext) {
-    super(reactContext, TAG);
+    super(reactContext, NAME);
     consentInformation = UserMessagingPlatform.getConsentInformation(reactContext);
   }
 

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsMediaView.kt

@@ -0,0 +1,57 @@
+package io.invertase.googlemobileads
+
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import android.annotation.SuppressLint
+import android.widget.ImageView
+import com.facebook.react.bridge.ReactContext
+import com.google.android.gms.ads.nativead.MediaView
+
+@SuppressLint("ViewConstructor")
+class ReactNativeGoogleMobileAdsMediaView(
+  private val context: ReactContext
+): MediaView(context) {
+  fun setResponseId(responseId: String?) {
+    val nativeModule = context.getNativeModule(ReactNativeGoogleMobileAdsNativeModule::class.java)
+    nativeModule?.getNativeAd(responseId ?: "")?.let {
+      this.mediaContent = it.mediaContent
+      requestLayout()
+    }
+  }
+
+  fun setResizeMode(resizeMode: String?) {
+    when (resizeMode) {
+      "cover" -> setImageScaleType(ImageView.ScaleType.CENTER_CROP)
+      "contain" -> setImageScaleType(ImageView.ScaleType.CENTER_INSIDE)
+      "stretch" -> setImageScaleType(ImageView.ScaleType.FIT_XY)
+    }
+  }
+
+  override fun requestLayout() {
+    super.requestLayout()
+    post(measureAndLayout)
+  }
+
+  private val measureAndLayout = Runnable {
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+    )
+    layout(left, top, right, bottom)
+  }
+}

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsMediaViewManager.kt

@@ -0,0 +1,55 @@
+package io.invertase.googlemobileads
+
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.RNGoogleMobileAdsMediaViewManagerDelegate
+import com.facebook.react.viewmanagers.RNGoogleMobileAdsMediaViewManagerInterface
+
+@ReactModule(name = ReactNativeGoogleMobileAdsMediaViewManager.NAME)
+class ReactNativeGoogleMobileAdsMediaViewManager(
+  reactContext: ReactApplicationContext
+) : ViewGroupManager<ReactNativeGoogleMobileAdsMediaView>(reactContext),
+  RNGoogleMobileAdsMediaViewManagerInterface<ReactNativeGoogleMobileAdsMediaView> {
+  private val delegate: ViewManagerDelegate<ReactNativeGoogleMobileAdsMediaView> = RNGoogleMobileAdsMediaViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<ReactNativeGoogleMobileAdsMediaView> = delegate
+
+  override fun getName(): String = NAME
+
+  override fun createViewInstance(context: ThemedReactContext): ReactNativeGoogleMobileAdsMediaView = ReactNativeGoogleMobileAdsMediaView(context)
+
+  @ReactProp(name = "responseId")
+  override fun setResponseId(view: ReactNativeGoogleMobileAdsMediaView, responseId: String?) {
+    view.setResponseId(responseId)
+  }
+
+  @ReactProp(name = "resizeMode")
+  override fun setResizeMode(view: ReactNativeGoogleMobileAdsMediaView, resizeMode: String?) {
+    view.setResizeMode(resizeMode)
+  }
+
+  companion object {
+    const val NAME = "RNGoogleMobileAdsMediaView"
+  }
+}

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsModule.kt

@@ -26,13 +26,11 @@ import com.google.android.gms.ads.AdRequest
 import com.google.android.gms.ads.AdValue;
 import com.google.android.gms.ads.OnAdInspectorClosedListener
 
-private const val SERVICE = "RNGoogleMobileAdsModule";
-
 class ReactNativeGoogleMobileAdsModule(
   reactContext: ReactApplicationContext
 ) : ReactContextBaseJavaModule(reactContext) {
 
-  override fun getName() = SERVICE
+  override fun getName() = NAME
 
   override fun getConstants(): Map<String, Any> {
     return mapOf(
@@ -164,7 +162,6 @@ class ReactNativeGoogleMobileAdsModule(
     }
   }
 
-
   @ReactMethod
   fun openDebugMenu(adUnit: String) {
     currentActivity?.runOnUiThread {
@@ -181,4 +178,8 @@ class ReactNativeGoogleMobileAdsModule(
   fun setAppMuted(muted: Boolean) {
     MobileAds.setAppMuted(muted)
   }
+
+  companion object {
+    const val NAME = "RNGoogleMobileAdsModule"
+  }
 }

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsNativeAdView.kt

@@ -0,0 +1,107 @@
+package io.invertase.googlemobileads
+
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import android.annotation.SuppressLint
+import android.widget.FrameLayout
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.common.UIManagerType
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.gms.ads.nativead.MediaView
+import com.google.android.gms.ads.nativead.NativeAd
+import com.google.android.gms.ads.nativead.NativeAdView
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+
+@SuppressLint("ViewConstructor")
+class ReactNativeGoogleMobileAdsNativeAdView(
+  private val context: ReactContext
+): FrameLayout(context) {
+  val viewGroup = ReactViewGroup(context)
+  private val nativeAdView = NativeAdView(context)
+  private var nativeAd: NativeAd? = null
+  private var reloadJob: Job? = null
+
+  init {
+    nativeAdView.addView(viewGroup)
+    addView(nativeAdView)
+  }
+
+  fun setResponseId(responseId: String?) {
+    val nativeModule = context.getNativeModule(ReactNativeGoogleMobileAdsNativeModule::class.java)
+    nativeModule?.getNativeAd(responseId ?: "")?.let {
+      if (nativeAd == it) {
+        return
+      }
+      nativeAd = it
+      reloadAd()
+    }
+  }
+
+  fun registerAsset(assetType: String, reactTag: Int) {
+    val uiManager = UIManagerHelper.getUIManagerForReactTag(context, reactTag)
+    val assetView = uiManager?.resolveView(reactTag) ?: return
+    when (assetType) {
+      "advertiser" -> nativeAdView.advertiserView = assetView
+      "body" -> nativeAdView.bodyView = assetView
+      "callToAction" -> nativeAdView.callToActionView = assetView
+      "headline" -> nativeAdView.headlineView = assetView
+      "price" -> nativeAdView.priceView = assetView
+      "store" -> nativeAdView.storeView = assetView
+      "starRating" -> nativeAdView.starRatingView = assetView
+      "icon" -> nativeAdView.iconView = assetView
+      "image" -> nativeAdView.imageView = assetView
+      "media" -> nativeAdView.mediaView = assetView as MediaView
+    }
+    reloadAd()
+  }
+
+  private fun reloadAd() {
+    reloadJob?.cancel()
+    reloadJob = CoroutineScope(Dispatchers.Main).launch {
+      delay(100)
+      nativeAd?.let { nativeAdView.setNativeAd(it) }
+      nativeAdView.rootView.requestLayout()
+    }
+  }
+
+  override fun requestLayout() {
+    super.requestLayout()
+    post(measureAndLayout)
+  }
+
+  fun destroy() {
+    reloadJob?.cancel()
+    reloadJob = null
+    nativeAdView.removeView(viewGroup)
+    nativeAdView.destroy()
+  }
+
+  private val measureAndLayout = Runnable {
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+    )
+    layout(left, top, right, bottom)
+  }
+}

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsNativeAdViewManager.kt

@@ -0,0 +1,85 @@
+package io.invertase.googlemobileads
+
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import android.view.View
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.RNGoogleMobileAdsNativeViewManagerDelegate
+import com.facebook.react.viewmanagers.RNGoogleMobileAdsNativeViewManagerInterface
+
+@ReactModule(name = ReactNativeGoogleMobileAdsNativeAdViewManager.NAME)
+class ReactNativeGoogleMobileAdsNativeAdViewManager(
+  reactContext: ReactApplicationContext
+) : ViewGroupManager<ReactNativeGoogleMobileAdsNativeAdView>(reactContext),
+  RNGoogleMobileAdsNativeViewManagerInterface<ReactNativeGoogleMobileAdsNativeAdView> {
+  private val delegate: ViewManagerDelegate<ReactNativeGoogleMobileAdsNativeAdView> = RNGoogleMobileAdsNativeViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<ReactNativeGoogleMobileAdsNativeAdView> = delegate
+
+  override fun getName(): String = NAME
+
+  override fun createViewInstance(context: ThemedReactContext): ReactNativeGoogleMobileAdsNativeAdView = ReactNativeGoogleMobileAdsNativeAdView(context)
+
+  override fun onDropViewInstance(adView: ReactNativeGoogleMobileAdsNativeAdView) {
+    super.onDropViewInstance(adView)
+    adView.destroy()
+  }
+
+  override fun prepareToRecycleView(
+    reactContext: ThemedReactContext,
+    view: ReactNativeGoogleMobileAdsNativeAdView
+  ): ReactNativeGoogleMobileAdsNativeAdView? {
+    return null
+  }
+
+  @ReactProp(name = "responseId")
+  override fun setResponseId(view: ReactNativeGoogleMobileAdsNativeAdView, responseId: String?) {
+    view.setResponseId(responseId)
+  }
+
+  @ReactMethod
+  override fun registerAsset(view: ReactNativeGoogleMobileAdsNativeAdView, assetKey: String, reactTag: Int) {
+    view.registerAsset(assetKey, reactTag)
+  }
+
+  override fun addView(parent: ReactNativeGoogleMobileAdsNativeAdView, child: View, index: Int) {
+    parent.viewGroup.addView(child, index)
+  }
+
+  override fun getChildCount(parent: ReactNativeGoogleMobileAdsNativeAdView): Int {
+    return parent.viewGroup.childCount
+  }
+
+  override fun getChildAt(parent: ReactNativeGoogleMobileAdsNativeAdView, index: Int): View? {
+    return parent.viewGroup.getChildAt(index)
+  }
+
+  override fun removeViewAt(parent: ReactNativeGoogleMobileAdsNativeAdView, index: Int) {
+    parent.viewGroup.removeViewAt(index)
+  }
+
+  companion object {
+    const val NAME = "RNGoogleMobileAdsNativeView"
+  }
+}