The 'Close' button for RewardedAd cannot be closed before obtaining the reward

bergkamp commented 6 months ago

What happened?

While the RewardedAd is playing, the 'Close' button is disabled and cannot be used to close the ad. Only after the ad finishes playing does the 'Close' button become active and allow for the ad to be closed.

Here is my code

const adUnitId = __DEV__ ? TestIds.REWARDED : CONFIG.admobRewardId;
    const { isLoaded, isClosed, load, show, reward, isEarnedReward } = useRewardedAd(adUnitId);

    useEffect(() => {
        load();
        console.log("loaded:",isLoaded)
    }, [load]);

    useEffect(() => {
        if(isClosed){
            load();
            props.close();
        }
    }, [isClosed]);

    useEffect(() => {
        console.log("isEarned", reward)
        if(isEarnedReward){
            console.log("isEarnedReward", reward)
            props.addFree();
        }
    }, [isEarnedReward]);

I noticed that AdMob requires RewardedAds to allow users to skip. Policies for ad units that offer rewards.

Is there a configuration I am missing that causes the inability to close the ad? Thanks.

Platforms

iOS

React Native Info

System:
  OS: macOS 14.2
  CPU: (8) arm64 Apple M1 Pro
  Memory: 107.92 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.13.0
    path: /opt/homebrew/opt/node@18/bin/node
  Yarn:
    version: 1.22.18
    path: /opt/homebrew/bin/yarn
  npm:
    version: 8.19.3
    path: /opt/homebrew/opt/node@18/bin/npm
  Watchman:
    version: 2023.01.23.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.11.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "30"
      - "32"
    Build Tools:
      - 30.0.2
      - 32.0.0
      - 32.1.0
    System Images:
      - android-32 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2021.1 AI-211.7628.21.2111.8309675
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 1.8.0_322
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/zhrs/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.71.14
    wanted: 0.71.14
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Are your using Typescript?

[ ] My project is using Typescript

package.json

"dependencies": {
    "@openspacelabs/react-native-zoomable-view": "^2.1.1",
    "@react-native-async-storage/async-storage": "^1.18.1",
    "@react-native-camera-roll/camera-roll": "^5.4.0",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.7",
    "i18n-js": "^4.2.3",
    "js-md5": "^0.7.3",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-native": "0.71.14",
    "react-native-animatable": "^1.3.3",
    "react-native-animated-pagination-dot": "^0.4.0",
    "react-native-device-info": "^10.6.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-google-mobile-ads": "^12.6.0",
    "react-native-image-marker": "^0.6.3",
    "react-native-image-picker": "^5.3.1",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-localize": "^3.0.0",
    "react-native-modal": "^13.0.1",
    "react-native-permissions": "^4.0.1",
    "react-native-purchases": "^5.14.0",
    "react-native-reanimated": "^3.3.0",
    "react-native-reanimated-carousel": "^3.4.0",
    "react-native-root-siblings": "^4.1.1",
    "react-native-safe-area-context": "^4.5.2",
    "react-native-screens": "^3.20.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-webview": "^12.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.9",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  }

app.json

{
  "name": "xxxx",
  "displayName": "xxxx",
  "react-native-google-mobile-ads": {
    "ios_app_id": "xxxxxx"
  },
  "sk_ad_network_items": [
    "cstr6suwn9.skadnetwork",
    "4fzdc2evr5.skadnetwork",
    "4pfyvq9l8r.skadnetwork",
    "2fnua5tdw4.skadnetwork",
    "ydx93a7ass.skadnetwork",
    "5a6flpkh64.skadnetwork",
    "p78axxw29g.skadnetwork",
    "v72qych5uu.skadnetwork",
    "ludvb6z3bs.skadnetwork",
    "cp8zw746q7.skadnetwork",
    "c6k4g5qg8m.skadnetwork",
    "s39g8k73mm.skadnetwork",
    "3qy4746246.skadnetwork",
    "3sh42y64q3.skadnetwork",
    "f38h382jlk.skadnetwork",
    "hs6bdukanm.skadnetwork",
    "v4nxqhlyqp.skadnetwork",
    "wzmmz9fp6w.skadnetwork",
    "yclnxrl5pm.skadnetwork",
    "t38b2kh725.skadnetwork",
    "7ug5zh24hu.skadnetwork",
    "9rd848q2bz.skadnetwork",
    "y5ghdn5j9k.skadnetwork",
    "n6fk4nfna4.skadnetwork",
    "v9wttpbfk9.skadnetwork",
    "n38lu8286q.skadnetwork",
    "47vhws6wlr.skadnetwork",
    "kbd757ywx3.skadnetwork",
    "9t245vhmpl.skadnetwork",
    "a2p9lx4jpn.skadnetwork",
    "22mmun2rn5.skadnetwork",
    "4468km3ulz.skadnetwork",
    "2u9pt9hc89.skadnetwork",
    "8s468mfl3y.skadnetwork",
    "av6w8kgt66.skadnetwork",
    "klf5c3l5u5.skadnetwork",
    "ppxm28t8ap.skadnetwork",
    "424m5254lk.skadnetwork",
    "ecpz2srf59.skadnetwork",
    "uw77j35x4d.skadnetwork",
    "mlmmfzh3r3.skadnetwork",
    "578prtvx9j.skadnetwork",
    "4dzt52r2t5.skadnetwork",
    "gta9lk7p23.skadnetwork",
    "e5fvkxwrpn.skadnetwork",
    "8c4e2ghe7u.skadnetwork",
    "zq492l623r.skadnetwork",
    "3rd42ekr43.skadnetwork",
    "3qcr597p9d.skadnetwork"
  ]
}

ios/Podfile

No response

android/build.gradle

No response

android/app/build.gradle

No response

android/settings.gradle

No response

AndroidManifest.xml

No response

haresh4d commented 6 months ago

Facing same issue. Nothing happens when clicked on close button.

mehtaprashant19 commented 6 months ago

@bergkamp have you found the solution? I am stuck with this. Nothing works. The close button is not clickable till the ad is completed.

dylancom commented 6 months ago

Sounds like an SDK problem to me (not related to this React Native port)

bergkamp commented 6 months ago

@bergkamp have you found the solution? I am stuck with this. Nothing works. The close button is not clickable till the ad is completed.

Not yet.

github-actions[bot] commented 5 months ago

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.

vutran-tvg commented 5 months ago

I believe that is the behavior of reward ads. It requires users to complete "something," in this case, watching the video. Consider using a different ad type if you want users to close the ad at any time.

github-actions[bot] commented 4 months ago

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.

invertase / react-native-google-mobile-ads