How can I reload banner ads on app come to foreground from background

[zoobibackups]

What happened?

I want to reload banner ads when ever app the come to forground

Platforms

Android and iOS

React Native Info

System:
  OS: macOS 14.0
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 2.40 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.0
    path: ~/.nvm/versions/node/v18.17.0/bin/node
  Yarn:
    version: 1.22.21
    path: ~/repos/GPSTracker/node_modules/.bin/yarn
  npm:
    version: 10.5.0
    path: ~/repos/GPSTracker/node_modules/.bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.0
    path: /Users/apple/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "25"
      - "28"
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 19.1.0
      - 20.0.0
      - 21.1.2
      - 22.0.1
      - 23.0.1
      - 23.0.2
      - 23.0.3
      - 24.0.0
      - 24.0.1
      - 24.0.2
      - 24.0.3
      - 25.0.0
      - 25.0.1
      - 25.0.2
      - 25.0.3
      - 26.0.0
      - 26.0.1
      - 26.0.2
      - 26.0.3
      - 27.0.0
      - 27.0.1
      - 27.0.2
      - 27.0.3
      - 28.0.0
      - 28.0.1
      - 28.0.2
      - 28.0.3
      - 29.0.0
      - 29.0.1
      - 29.0.2
      - 29.0.3
      - 30.0.0
      - 30.0.1
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 32.0.0
      - 32.1.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 34.0.0
      - 34.0.0
      - 34.0.0
      - 34.0.0
    System Images:
      - android-30 | Google Play Intel x86 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11255304
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/apple/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: ^18.2.0
  react-native:
    installed: 0.73.5
    wanted: ^0.73.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Are your using Typescript?

• My project is using Typescript

package.json

no need

app.json

no need

ios/Podfile

no need

android/build.gradle

no need

android/app/build.gradle

no need

android/settings.gradle

no need

AndroidManifest.xml

no need

[DoctorJohn]

Using React techniques, changing the key property of the banner component when the app comes into foreground should do the job. You can detect whether the app came into the foreground using the React Native AppState API.

[dylancom]

Why would you want this? A banner ad is refreshing itself automatically after Google's recommendations (30sec?).
But indeed possible as DoctorJohn suggested.

[github-actions]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

[dylancom]

I just found out this actually makes a lot of sense. Apparently the OS can terminate WKWebView when the app is in a "suspended" state. Which can lead to blank ads upon reopening the ad.
See: https://groups.google.com/g/google-admob-ads-sdk/c/rwBpqOUr8m8

Current advise by Google is to request a new ad when the app is foregrounded.

[dylancom]

For a smoother experience, I added a reload method.
This prevents flickering that occurs if we would just update the key prop.
Would be great if someone could test / provide feedback: #579