[🐛] Native Video ads: video won't play unless we move away then come back #775
Description
What happened?
I am using Native Video ads, using TestIds.GAM_NATIVE_VIDEO. (for some reason, the NATIVE_VIDEO never manages to fetch any video or ads, not sure what the diff is with GAM?)
I insert the created ads into a list of full screen images that the user swipe down to move to the next.
However, when I reach the video ads, the screens remains black, unless I swipe down (move to next fullscreen image), and go back to the ads which then displays and plays automatically as expected.
I respected all recommandations for implementations:
<View style={[styles.gridContainer, style]}>
<MainCard
bg="#EED38D"
rounded="12px"
mx="1"
my="1.5"
flex="1"
ml={ml}
mr={mr}
h={`${height || ADS_CONFIG.GRID_AD_HEIGHT}px`}
{...rest}
>
<NativeAdView nativeAd={nativeAd} style={styles.gridAdView}>
{/* Ad attribution badge */}
<View style={styles.adBadge}>
<Text style={styles.adBadgeText}>Ad</Text>
</View>
{/* Media or Icon */}
{nativeAd.images && nativeAd.images.length > 0 ? (
<NativeMediaView style={styles.gridMedia} />
) : nativeAd.icon ? (
<NativeAsset assetType={NativeAssetType.ICON}>
<Image
source={{ uri: nativeAd.icon.url }}
style={[styles.gridIcon, { width: scale(100), height: scale(100) }]}
/>
</NativeAsset>
) : (
// Placeholder when no media is available
<View style={styles.noMediaPlaceholder}>
<Text style={styles.noMediaText}>Advertisement</Text>
</View>
)}
{/* Content */}
<View style={styles.gridContent}>
{nativeAd.headline && (
<NativeAsset assetType={NativeAssetType.HEADLINE}>
<Text style={styles.gridHeadline} numberOfLines={2}>
{nativeAd.headline}
</Text>
</NativeAsset>
)}
{nativeAd.body && (
<NativeAsset assetType={NativeAssetType.BODY}>
<Text style={styles.gridBody} numberOfLines={3}>
{nativeAd.body}
</Text>
</NativeAsset>
)}
{nativeAd.callToAction && (
<NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
<Text style={styles.gridCta}>{nativeAd.callToAction}</Text>
</NativeAsset>
)}
</View>
</NativeAdView>
</MainCard>
</View>
Platforms
Android, but have not tested behavior on iOS
React Native Info
info Fetching system and libraries information...
System:
OS: Windows 11 10.0.26100
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
Memory: 3.52 GB / 31.86 GB
Binaries:
Node:
version: 22.16.0
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 10.9.2
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-221.6008.13.2211.9514443
Visual Studio:
- 17.14.36301.6 (Visual Studio Community 2022)
Languages:
Java: 11.0.18
Ruby: Not Found
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.80.1
wanted: 0.80.1
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not foundAre your using Typescript?
- My project is using Typescript
package.json
{
"name": "appname",
"version": "2.12.7",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"postinstall": "patch-package",
"clean": "cd android && ./gradlew clean && cd.."
},
"dependencies": {
"@d11/react-native-fast-image": "^8.10.0",
"@dicebear/core": "^7.0.1",
"@gorhom/bottom-sheet": "^4.6.4",
"@gorhom/portal": "^1.0.14",
"@miblanchard/react-native-slider": "^2.6.0",
"@react-native-async-storage/async-storage": "^2.2.0",
"@react-native-camera-roll/camera-roll": "^7.10.1",
"@react-native-clipboard/clipboard": "^1.16.3",
"@react-native-community/blur": "^4.4.1",
"@react-native-community/netinfo": "^11.4.1",
"@react-native-community/slider": "^4.5.7",
"@react-native-firebase/analytics": "^21.14.0",
"@react-native-firebase/app": "^21.14.0",
"@react-native-firebase/auth": "^21.14.0",
"@react-native-firebase/crashlytics": "^21.14.0",
"@react-native-firebase/database": "^21.14.0",
"@react-native-firebase/firestore": "^21.14.0",
"@react-native-firebase/storage": "^21.14.0",
"@react-native-masked-view/masked-view": "^0.3.2",
"@react-native-seoul/masonry-list": "^1.4.2",
"@react-navigation/drawer": "^7.4.1",
"@react-navigation/material-top-tabs": "^7.2.14",
"@react-navigation/native": "^7.1.10",
"@react-navigation/native-stack": "^7.3.14",
"@react-navigation/stack": "^7.3.3",
"@reduxjs/toolkit": "^2.8.2",
"@sayem314/react-native-keep-awake": "^1.3.1",
"@shopify/flash-list": "^1.8.3",
"@supabase/supabase-js": "^2.50.0",
"@timwangdev/react-native-geocoder": "^1.0.0-alpha.7",
"@typescript-eslint/eslint-plugin": "^8.33.1",
"@typescript-eslint/parser": "^8.33.1",
"@use-it/interval": "^1.0.0",
"axios": "^1.9.0",
"d3-shape": "^3.2.0",
"dayjs": "^1.11.10",
"lodash": "^4.17.21",
"lottie-react-native": "^7.2.3",
"mobx": "^6.7.0",
"mobx-react-lite": "^3.4.0",
"native-base": "^3.4.28",
"patch-package": "^8.0.0",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-native": "0.80.1",
"react-native-action-sheet": "^2.2.0",
"react-native-animatable": "1.3.3",
"react-native-appstate-hook": "^1.0.6",
"react-native-audio-recorder-player": "^3.6.12",
"react-native-auto-height-image": "^3.2.4",
"react-native-compressor": "^1.12.0",
"react-native-controlled-mentions": "^2.2.5",
"react-native-countdown-circle-timer": "^3.2.1",
"react-native-date-picker": "5.0.12",
"react-native-device-info": "^14.0.4",
"react-native-dotenv": "^3.4.2",
"react-native-edge-to-edge": "^1.6.1",
"react-native-error-boundary": "^2.0.0",
"react-native-event-listeners": "^1.0.7",
"react-native-flip-card": "^3.5.7",
"react-native-fs": "^2.20.0",
"react-native-geolocation-service": "^5.3.1",
"react-native-gesture-handler": "^2.27.1",
"react-native-google-mobile-ads": "^15.4.0",
"react-native-haptic-feedback": "^2.3.3",
"react-native-iap": "^12.16.2",
"react-native-image-base64": "^0.1.4",
"react-native-image-colors": "^1.5.2",
"react-native-image-crop-picker": "github:ivpusic/react-native-image-crop-picker#pull/2168/head",
"react-native-image-marker": "^1.2.6",
"react-native-image-picker": "^8.2.1",
"react-native-keyboard-controller": "^1.17.4",
"react-native-lightbox-v2": "^0.9.2",
"react-native-linear-gradient": "^3.0.0-alpha.1",
"react-native-localization": "^2.3.2",
"react-native-localize": "^3.4.1",
"react-native-modal": "^14.0.0-rc.1",
"react-native-onesignal": "^5.2.12",
"react-native-pager-view": "^6.8.1",
"react-native-parsed-text": "0.0.22",
"react-native-permissions": "^5.4.1",
"react-native-phone-number-input": "^2.1.0",
"react-native-pinchable": "^0.2.1",
"react-native-public-ip": "^1.0.2",
"react-native-qrcode-svg": "^6.3.15",
"react-native-radial-gradient": "^1.2.1",
"react-native-rate-app": "^1.3.7",
"react-native-reanimated": "^3.19.0",
"react-native-recaptcha-that-works": "^1.3.0",
"react-native-remote-svg": "^2.0.11",
"react-native-safe-area-context": "^5.4.1",
"react-native-screens": "^4.11.1",
"react-native-share": "^12.1.0",
"react-native-shared-element": "^0.9.0-rc0",
"react-native-sound": "^0.11.2",
"react-native-sound-recorder": "^1.5.0",
"react-native-splash-view": "^0.0.18",
"react-native-svg": "^15.12.0",
"react-native-toast-message": "^2.3.0",
"react-native-tracking-transparency": "^0.1.2",
"react-native-twilio-video-webrtc": "^3.2.1",
"react-native-url-polyfill": "^2.0.0",
"react-native-uuid": "^2.0.1",
"react-native-vector-icons": "^10.0.3",
"react-native-video": "^6.16.0",
"react-native-view-shot": "^4.0.3",
"react-native-vision-camera": "^4.7.0",
"react-native-webview": "^13.14.2",
"react-native-wheel-color-picker": "^1.3.1",
"react-navigation-shared-element": "^3.1.3",
"react-redux": "^9.2.0",
"react-string-replace": "^1.1.0",
"redux": "^5.0.1",
"redux-persist": "^6.0.0",
"styled-components": "^5.3.1",
"styled-system": "^5.1.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "18.0.0",
"@react-native-community/cli-platform-android": "18.0.0",
"@react-native-community/cli-platform-ios": "18.0.0",
"@react-native-community/eslint-config": "^2.0.0",
"@react-native/babel-preset": "0.80.1",
"@react-native/eslint-config": "0.80.1",
"@react-native/metro-config": "0.80.1",
"@react-native/typescript-config": "0.80.1",
"@types/jest": "^29.5.13",
"@types/react": "^19.1.0",
"@types/react-test-renderer": "^19.1.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "19.1.0",
"typescript": "^5.8.3"
},
"engines": {
"node": ">=18"
},
"jest": {
"preset": "react-native"
}
}app.json
{
"name": "appname",
"displayName": "appname",
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxx",
"ios_app_id": "ca-app-pub-xxx",
"sk_ad_network_items": [
"cstr6suwn9.skadnetwork",
"4fzdc2evr5.skadnetwork",
"2fnua5tdw4.skadnetwork",
"ydx93a7ass.skadnetwork",
"p78axxw29g.skadnetwork",
"v72qych5uu.skadnetwork",
"ludvb6z3bs.skadnetwork",
"cp8zw746q7.skadnetwork",
"3sh42y64q3.skadnetwork",
"c6k4g5qg8m.skadnetwork",
"s39g8k73mm.skadnetwork",
"3qy4746246.skadnetwork",
"f38h382jlk.skadnetwork",
"hs6bdukanm.skadnetwork",
"mlmmfzh3r3.skadnetwork",
"v4nxqhlyqp.skadnetwork",
"wzmmz9fp6w.skadnetwork",
"su67r6k2v3.skadnetwork",
"yclnxrl5pm.skadnetwork",
"t38b2kh725.skadnetwork",
"7ug5zh24hu.skadnetwork",
"gta9lk7p23.skadnetwork",
"vutu7akeur.skadnetwork",
"y5ghdn5j9k.skadnetwork",
"v9wttpbfk9.skadnetwork",
"n38lu8286q.skadnetwork",
"47vhws6wlr.skadnetwork",
"kbd757ywx3.skadnetwork",
"9t245vhmpl.skadnetwork",
"a2p9lx4jpn.skadnetwork",
"22mmun2rn5.skadnetwork",
"44jx6755aq.skadnetwork",
"k674qkevps.skadnetwork",
"4468km3ulz.skadnetwork",
"2u9pt9hc89.skadnetwork",
"8s468mfl3y.skadnetwork",
"klf5c3l5u5.skadnetwork",
"ppxm28t8ap.skadnetwork",
"kbmxgpxpgc.skadnetwork",
"uw77j35x4d.skadnetwork",
"578prtvx9j.skadnetwork",
"4dzt52r2t5.skadnetwork",
"tl55sbb4fm.skadnetwork",
"c3frkrj4fj.skadnetwork",
"e5fvkxwrpn.skadnetwork",
"8c4e2ghe7u.skadnetwork",
"3rd42ekr43.skadnetwork",
"97r2b46745.skadnetwork",
"3qcr597p9d.skadnetwork"
]
}
}