[🐛] Bug Report Title - Unable to show Native Ads in react native cli #802
Description
I tried all possible way to render native ads inside the react native cli app and found that google never returning us the Native Ads
Got this error : Cannot read property 'responseId' of undefined This error is located at: in NativeAdView (created by SafeNativeAd) in RCTView when working with code
import React, { useState } from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import {
NativeAdView,
HeadlineView,
TaglineView,
CallToActionView,
MediaView,
TestIds,
} from 'react-native-google-mobile-ads';
const adUnitId = DEV ? TestIds.NATIVE : 'ca-app-pub-your-actual-native-ad-unit-id';
const SimpleNativeAd = ({ style }) => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const onAdLoaded = () => {
console.log('Simple native ad loaded');
setLoading(false);
setError(false);
};
const onAdFailedToLoad = (event) => {
console.log('Simple native ad failed to load:', event.nativeEvent);
setLoading(false);
setError(true);
};
if (error) {
return null;
}
return (
<View style={[styles.wrapper, style]}>
{loading && (
)}
<NativeAdView
adUnitID={adUnitId}
onAdLoaded={onAdLoaded}
onAdFailedToLoad={onAdFailedToLoad}
style={styles.container}
>
<View style={styles.adBadge}>
<Text style={styles.adText}>Sponsored</Text>
</View>
<HeadlineView style={styles.headline} />
<MediaView style={styles.media} />
<TaglineView style={styles.body} />
<CallToActionView style={styles.cta} />
</NativeAdView>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
position: 'relative',
},
container: {
backgroundColor: '#f9f9f9',
padding: 16,
margin: 8,
borderRadius: 8,
borderWidth: 1,
borderColor: '#e0e0e0',
minHeight: 250,
},
loadingOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
zIndex: 1,
borderRadius: 8,
margin: 8,
},
adBadge: {
alignSelf: 'flex-start',
backgroundColor: '#ffd700',
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 4,
marginBottom: 8,
},
adText: {
fontSize: 10,
fontWeight: 'bold',
color: '#333',
},
headline: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
marginBottom: 8,
},
media: {
width: '100%',
height: 180,
borderRadius: 8,
marginBottom: 8,
},
body: {
fontSize: 14,
color: '#666',
lineHeight: 20,
marginBottom: 12,
},
cta: {
backgroundColor: '#007bff',
color: '#fff',
textAlign: 'center',
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 6,
fontSize: 16,
fontWeight: 'bold',
},
});
export default SimpleNativeAd;
- TypeError: ad.load is not a function (it is undefined), when working with code
// components/SimpleNativeAd.js
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import {
NativeAd,
NativeAdView,
HeadlineView,
TaglineView,
CallToActionView,
MediaView,
TestIds,
} from 'react-native-google-mobile-ads';
const adUnitId = DEV ? TestIds.NATIVE_ADVANCED : 'ca-app-pub-your-actual-native-ad-unit-id';
const SimpleNativeAd = ({ style }) => {
const [nativeAd, setNativeAd] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const initAd = async () => {
try {
const ad = NativeAd.createForAdRequest(adUnitId);
await ad.load();
setNativeAd(ad);
} catch (error) {
console.log('Failed to load native ad:', error);
} finally {
setLoading(false);
}
};
initAd();
}, []);
if (loading) {
return (
<View style={[styles.loadingContainer, style]}>
Loading ad...
);
}
if (!nativeAd) {
return null;
}
return (
<NativeAdView nativeAd={nativeAd} style={[styles.container, style]}>
Sponsored
<HeadlineView style={styles.headline} />
<MediaView style={styles.media} />
<TaglineView style={styles.body} />
<CallToActionView style={styles.cta} />
</NativeAdView>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#f9f9f9',
padding: 16,
margin: 8,
borderRadius: 8,
borderWidth: 1,
borderColor: '#e0e0e0',
},
loadingContainer: {
height: 200,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
borderRadius: 8,
margin: 8,
},
adBadge: {
alignSelf: 'flex-start',
backgroundColor: '#ffd700',
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 4,
marginBottom: 8,
},
adText: {
fontSize: 10,
fontWeight: 'bold',
color: '#333',
},
headline: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
marginBottom: 8,
},
media: {
width: '100%',
height: 180,
borderRadius: 8,
marginBottom: 8,
},
body: {
fontSize: 14,
color: '#666',
lineHeight: 20,
marginBottom: 12,
},
cta: {
backgroundColor: '#007bff',
color: '#fff',
textAlign: 'center',
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 6,
fontSize: 16,
fontWeight: 'bold',
},
});
export default SimpleNativeAd;
later I found, it's never returning the Native Ad, please help me with the issue or any suggestion !
Thanks
Platforms
Android, but have not tested behavior on iOS
React Native Info
System:
OS: macOS 15.6.1
CPU: (8) arm64 Apple M1
Memory: 120.41 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 24.8.0
path: ~/.nvm/versions/node/v24.8.0/bin/node
Yarn: Not Found
npm:
version: 11.6.0
path: ~/.nvm/versions/node/v24.8.0/bin/npm
Watchman:
version: 2025.05.26.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/lib/ruby/gems/3.4.0/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.5
- iOS 18.5
- macOS 15.5
- tvOS 18.5
- visionOS 2.5
- watchOS 11.5
Android SDK:
API Levels:
- "35"
- "36"
Build Tools:
- 34.0.0
- 35.0.0
- 35.0.1
- 36.0.0
System Images:
- android-35 | Google APIs ARM 64 v8a
- android-36 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.26094.121.2513.14007798
Xcode:
version: 16.4/16F6
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.15
path: /usr/bin/javac
Ruby:
version: 3.4.6
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.1
wanted: 15.0.1
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.77.0
wanted: 0.77.0
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: trueAre your using Typescript?
- My project is using Typescript
package.json
{
"name": "PalmR8D",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"postinstall": "patch-package"
},
"dependencies": {
"@anthropic-ai/sdk": "^0.50.4",
"@bam.tech/react-native-image-resizer": "^3.0.11",
"@gorhom/bottom-sheet": "^5.1.2",
"@invertase/react-native-apple-authentication": "^2.4.1",
"@kolking/react-native-rating": "^1.4.0",
"@legendapp/list": "^2.0.6",
"@notifee/react-native": "^9.1.8",
"@react-native-async-storage/async-storage": "^2.1.0",
"@react-native-camera-roll/camera-roll": "^7.9.0",
"@react-native-clipboard/clipboard": "^1.16.2",
"@react-native-community/checkbox": "^0.5.17",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-native-community/geolocation": "^3.4.0",
"@react-native-community/netinfo": "^11.4.1",
"@react-native-community/slider": "^4.5.5",
"@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/functions": "^21.14.0",
"@react-native-firebase/installations": "^21.14.0",
"@react-native-firebase/messaging": "^21.14.0",
"@react-native-firebase/storage": "^21.14.0",
"@react-native-google-signin/google-signin": "^13.1.0",
"@react-native-picker/picker": "^2.11.0",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/material-top-tabs": "^7.3.6",
"@react-navigation/native": "^7.0.14",
"@react-navigation/stack": "^7.1.1",
"@reduxjs/toolkit": "^2.5.1",
"@s77rt/react-native-contacts": "^0.1.1",
"@stripe/stripe-react-native": "^0.38.6",
"@twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^1.8.4",
"date-fns": "^4.1.0",
"dotenv": "^16.5.0",
"fp-ts": "^2.16.9",
"geofire-common": "^6.0.0",
"geofirestore": "^5.2.0",
"htmlparser2": "^10.0.0",
"jwt-decode": "^4.0.0",
"libphonenumber-js": "^1.12.22",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"papaparse": "^5.5.2",
"patch-package": "^8.0.0",
"postinstall-postinstall": "^2.1.0",
"react": "18.3.1",
"react-hook-form": "^7.54.2",
"react-native": "0.77.0",
"react-native-action-sheet": "^2.2.0",
"react-native-calendar-picker": "^8.0.5",
"react-native-collapsible": "^1.6.2",
"react-native-compressor": "^1.10.4",
"react-native-confetti": "^0.1.0",
"react-native-confetti-cannon": "^1.5.2",
"react-native-contacts": "^7.0.7",
"react-native-create-thumbnail": "^2.1.1",
"react-native-device-info": "^14.0.4",
"react-native-document-picker": "^9.3.1",
"react-native-dotenv": "^3.4.11",
"react-native-draggable-flatlist": "^4.0.3",
"react-native-element-dropdown": "^2.12.4",
"react-native-fast-image": "^8.6.3",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.25.0",
"react-native-get-random-values": "^1.11.0",
"react-native-google-mobile-ads": "^15.7.0",
"react-native-google-places-autocomplete": "^2.5.6",
"react-native-image-picker": "^7.0.0",
"react-native-insta-pagination-dots": "^1.0.5",
"react-native-linear-gradient": "^2.8.3",
"react-native-maps": "^1.23.8",
"react-native-modal": "^13.0.1",
"react-native-orientation-locker": "^1.7.0",
"react-native-otp-entry": "^1.8.2",
"react-native-paper": "^5.13.1",
"react-native-permissions": "^5.2.5",
"react-native-phone-input": "^1.3.7",
"react-native-phone-number-input": "^2.1.0",
"react-native-ratings": "^8.1.0",
"react-native-raw-bottom-sheet": "^3.0.0",
"react-native-reanimated": "^3.17.5",
"react-native-safe-area-context": "^5.5.2",
"react-native-screens": "^4.5.0",
"react-native-share": "^12.0.9",
"react-native-simple-toast": "^3.3.2",
"react-native-svg": "^15.11.1",
"react-native-tab-view": "^4.1.3",
"react-native-uuid": "^2.0.3",
"react-native-vector-icons": "^10.2.0",
"react-native-version-check": "^3.5.0",
"react-native-video": "^6.10.0",
"react-native-vision-camera": "4.6.3",
"react-native-webview": "^13.16.0",
"react-redux": "^9.2.0",
"redux-persist": "^6.0.0",
"rn-emoji-keyboard": "^1.7.0",
"toggle-switch-react-native": "^3.3.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "15.0.1",
"@react-native-community/cli-platform-android": "15.0.1",
"@react-native-community/cli-platform-ios": "15.0.1",
"@react-native/babel-preset": "0.77.0",
"@react-native/eslint-config": "0.77.0",
"@react-native/metro-config": "0.77.0",
"@react-native/typescript-config": "0.77.0",
"@types/jest": "^29.5.13",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}app.json
{
"name": "PalmR8D",
"displayName": "PalmR8D",
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-9984133001441098~5751087645",
"ios_app_id": "ca-app-pub-9984133001441098~3124924300",
"delay_app_measurement_init": false,
"user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you.",
"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"
]
}
}