Frame drop on iOS when displaying ads

rijadriki19 commented 9 months ago

What happened?

Whenever banner is in scroll view or in flat list or in flash list, it creates UI drop (frame drop). With all testing tools such as; Animation Hitches and Flipper and performance monitor, all of these tools give me same result, for one or more ads. It does not matter if they are test ads, or ads serving from google admob. When i hide all ads, flicks are gone. All of those things are happening in dev mode, production build, test flight, and also in simulator. Every item in list does not have an unnecessary rendering. This problem does not depend on content type, (regardless if content is image or just plain text or etc.). We achived previewing all type of ads, in a more complex structure, but this frame drop happens even in simple forms.

<GAMBannerAd unitId={"ca-app-pub-3940256099942544/6300978111"} sizes={[BannerAdSize.LARGE_BANNER]} />

Platforms

Only on iOS

React Native Info

System:
  OS: macOS 13.2.1
  CPU: (8) arm64 Apple M2
  Memory: 86.69 MB / 8.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: /opt/homebrew/opt/node@18/bin/node
  Yarn: Not Found
  npm:
    version: 9.8.1
    path: /opt/homebrew/opt/node@18/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.1
      - iOS 16.1
      - macOS 13.0
      - tvOS 16.1
      - watchOS 9.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.11090377
  Xcode:
    version: 14.1/14B47b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Are your using Typescript?

[X] My project is using Typescript

package.json

{
  "name": "novamobile",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~49.0.15",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-fast-image": "^8.6.3",
    "react-native-google-mobile-ads": "^12.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

app.json

{
  "expo": {
    "name": "novaMobile",
    "slug": "novaMobile",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#FFFFFF"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "xxx"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "xxx"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  },
  "plugins": [
    [
      "expo-build-properties",
      {
        "ios": {
          "useFrameworks": "static",
          "flipper":true
        }
      }
    ]
  ],
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxx",
    "ios_app_id": "ca-app-pub-xxx"
  }
}

ios/Podfile

No response

android/build.gradle

No response

android/app/build.gradle

No response

android/settings.gradle

No response

AndroidManifest.xml

No response

dylancom commented 9 months ago

In our demo app, there is no frame drop at all during scrolling.

So please provide a demo proving this.

rijadriki19 commented 9 months ago

https://github.com/invertase/react-native-google-mobile-ads/assets/91878906/dc111415-61ac-46ba-9a2b-168a961e3a8b

` {data.map((item, index) => (

  ))}
</ScrollView>`

`const ListItem = ({ article, index, x }: any) => { return (

{article.id} {article.title} {article.url} {article.id % 20 === 0 && ( )}

); }; export default memo(ListItem);`

github-actions[bot] commented 9 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.

MicahDavid commented 8 months ago

I am seeing the same issue using . What I think is going on for my issue is that the ads are being served in a webview and the momentum scrolling is causing a problem with the webview where the deceleration rates are not the same between the ScrollView and the WebView. Can anyone confirm if my theory is plausible?

What I've read about this issue, is that the deceleration rate can be modified on the webview to alleviate this problem: https://github.com/react-native-webview/react-native-webview/issues/1070

If this is the case with the GAMBannerAd, can we modify the deceleration rate: <WebView ..... decelerationRate='normal' ... />

invertase / react-native-google-mobile-ads