React-native-firebase: 🔥 Showing Admob Reward ad fails silently if <Modal /> is displayed

[joshbalfour]

first off: LOVE react-native-firebase, great work!!

Issue

My scenario is:
I'm making a puzzle game, during gameplay a user can use hints, they start with an initial amount , when they run out they can watch an ad or purchase more.
To make this flow as quick as possible, we're using a modal which pops up with these options.

My issue is:
While a react native <Modal /> is presented, I am unable to call advert.show() (where advert is from firebase.admob().rewarded(unitId)
If I dismiss the modal and then call advert.show() it works as expected.

I get this error from output:

 Warning: Attempt to present <GADOInterstitialViewController: 0x7fcacf058c00>  on <UIViewController: 0x7fcad1031100> which is already presenting <RCTModalHostViewController: 0x7fcaceec0380>

A stripped down version of my code is:

import firebase from 'react-native-firebase'
import { admob } from './config'

firebase.admob().initialize(admob.appId)

const AdRequest = firebase.admob.AdRequest

export const showAd = (sku) => {
    let unitId = admob.units[sku]
    if (!unitId) {
        unitId = admob.units['default']
        console.warn('no ad unit found for sku', sku, 'falling back to default')
    }

    const advert = firebase.admob().rewarded(unitId)

    const request = new AdRequest()
    request.addTestDevice('DEVICE_ID_EMULATOR')

    const req = request.build()
    advert.loadAd(req)

    console.log('ad built', unitId)

    advert.on('onAdLoaded', () => {
        advert.show()
    })

    advert.on('onRewarded', (event) => {
        console.log('ad reward collected', unitId)
    })

    advert.on('onAdOpened', () => {
        console.log('ad opened')
    })

    advert.on('onAdFailedToLoad', (err) => {
        console.error(err)
    })
}

Sorry if this belongs against the Admob iOS SDK instead - I'm not 100% sure!

---

Project Files

iOS

ios/Podfile:

• [ ] I'm not using Pods
• [x] I'm using Pods and my Podfile looks like:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'packs' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for packs
  pod 'AppCenter/Crashes', '~> 1.5.0'
  pod 'AppCenter/Analytics', '~> 1.5.0'
  pod 'AppCenterReactNativeShared', '~> 1.4.0'
  pod 'NearbyMessages'

  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'DevSupport'
    # Add any other subspecs you want to use in your project
  ]

  platform :ios, '9.0'
  pod 'RNSound', :path => '../node_modules/react-native-sound'

  pod 'react-native-google-analytics-bridge', :path => '../node_modules/react-native-google-analytics-bridge'

  pod 'CodePush', :path => '../node_modules/react-native-code-push'

  pod 'lottie-ios', :path => '../node_modules/lottie-ios'

  pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'

  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'

  pod 'react-native-keep-awake', :path => '../node_modules/react-native-keep-awake'

  pod 'Firebase/Core', '~> 5.9.0'
  pod 'react-native-fbsdk', :path => '../node_modules/react-native-fbsdk'

  pod 'FBSDKLoginKit'
  pod 'FBSDKShareKit'

  pod 'RNIap', :path => '../node_modules/react-native-iap'

  pod 'Firebase/AdMob', '~> 5.9.0'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

AppDelegate.m:

// N/A

---

Android

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

---

Environment

• Platform that you're experiencing the issue on:
  
  
  
  • [ ] iOS
  
  
  • [ ] Android
  
  
  • [x] iOS but have not tested behavior on Android
  
  
  • [ ] Android but have not tested behavior on iOS
  
  
  • [ ] Both
  
  
• If known, the version of the platform are you experiencing the issue on:
  
  
  
  • iOS 12
  
  
• Operating System:
  
  
  
  • [x] MacOS, version: N/A
  
  
  • [ ] Windows, version: N/A
  
  
  • [ ] Other, please specify: N/A
  
  
• Build Tools:
  
  
  
  • ADD_SOMETHING_HERE
  
  
• React Native version:
  
  
  
  • 0.57.1
  
  
• React Native Firebase library version:
  
  
  
  • 5.0.0
  
  

• Firebase module(s) you're using that has the issue:

  • [ ] N/A
  • [ ] Authentication
  • [ ] Analytics
  • [ ] Cloud Firestore
  • [ ] Cloud Messaging (FCM)
  • [ ] Crashlytics
  • [ ] Dynamic Links
  • [ ] Functions Callable
  • [ ] Invites
  • [ ] Instance ID
  • [ ] Notifications
  • [ ] Performance Monitoring
  • [ ] Realtime Database
  • [ ] Remote Config
  • [ ] Storage
  • [x] Admob

• Are you using TypeScript?

  • [x] No
  • [ ] Yes, version: N/A
• Are you using Expo, e.g. ExpoKit?
  
  
  
  • [x] No
  
  
  • [ ] Yes, I've _not_ ejected
  
  
  • [ ] Yes, but I have ejected to ExpoKit
  
  
  • [ ] Yes, but I have ejected to vanilla React Native
  
  
  • Expo version: N/A
  
  

---

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

• 👉 Donate via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️
• 👉 Contribute; see our contributing guide

[Ehesp]

Hey - can you please confirm how you're showing a Modal? Is it using a JS lib or a native one?

Cheers

[joshbalfour]

Sorry I left that out - I'm using react-native-modal which uses the native Modal

[Ehesp]

@joshbalfour Cheers... Could you show me the full code example of opening the model, showing the ad etc?

[stale[bot]]

Hello 👋, this issue has been automatically marked as stale because it has not had activity for quite some time. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[joshbalfour]

sorry haven't had a chance to produce a demo for this yet - will do soon!

[stale[bot]]

Hello 👋, this issue has been automatically marked as stale because it has not had activity for quite some time. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[obsidianart]

@joshbalfour where you able to fix it somehow? I'm seeing the same issue

[ikonduktor]

Hi! How did you fix the issue?

AdMob doesn't work with opened <Modal visible={true}>, when function showAds transferred like a prop to this modal component.

function example:
showAds() { AdMobRewarded.showAd().catch(error => console.warn(error)); }

AdMobRewarded.requestAd() is inside parent's componentDidMount

[obsidianart]

@ikonduktor I ended up closing the modal before opening the popup and opening it back after, quite crap

[ikonduktor]

@obsidianart, Thanks, I'll try

[ikonduktor]

@obsidianart Doesn't helped.

got in console
AdMobRewarded => adLoaded AdMobRewarded => adOpened

but empty screen in app.

[ikonduktor]

Added 1 second delay after closing the Modal, and everything works.
But I am not satisfied with the result. Any advice?

[Tinmania2018]

@ikonduktor how did you create the 1 second delay?

[laurpantelimon]

I am experiencing the same thing. If I have a shown, and from it I pass the event to show an ad to my parent component, the ad is loaded but then not shown. If I do the load ad action from the component it works.