repository·main·Indexed 21 days ago
https://github.com/invertase/react-native-google-mobile-adsA React Native wrapper for the Google Mobile Ads SDK (version 16.4.0) that enables AdMob monetization for iOS and Android apps. It provides full TypeScript support and supports multiple ad formats, including App open, Banner (anchored adaptive, inline adaptive, collapsible, and fixed size), Native, Interstitial, Rewarded, and Rewarded Interstitial ads. The library is compatible with both the Old Architecture and the React Native New Architecture.
The react-native-google-mobile-ads module provides integration for six different types of advertisements. Once you have completed the initial setup, you can implement the following formats:
The module supports six distinct types of advertisements:
Google ads are categorized into several modes depending on user consent:
It is critical to understand how these modes affect ad delivery. The AdsConsent helper provides the tools to request consent, but the developer is responsible for ensuring the resulting consent status is correctly handled and reflected throughout the application logic.
The adUnitid parameter passed to the hook controls the lifecycle of the ad instance:
adUnitid is changed, a new ad instance is created and the previous one is destroyed.null: If adUnitid is set to null, no ad instance is created and any existing instance is destroyed.The library supports several Google AdMob ad formats:
Ad Inspector is an in-app overlay for authorized devices that allows real-time analysis of test ad requests. It is used to:
When implementing App Open Ads, keep these constraints in mind:
To display an ad, you typically follow this lifecycle:
load() function (often inside a useEffect) to fetch the ad from the network.isLoaded. If true, call show(). If false, proceed with your fallback logic (e.g., navigating to the next screen).isClosed state to perform actions after the user dismisses the ad.import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';
export default function App({ navigation }) {
const { isLoaded, isClosed, load, show } = useInterstitialAd(TestIds.INTERSTITIAL);
useEffect(() => {
// Start loading the interstitial straight away
load();
}, [load]);
useEffect(() => {
if (isClosed) {
// Action after the ad is closed
navigation.navigate('NextScreen');
}
}, [isClosed, navigation]);
return (
<View>
<Button
title="Navigate to next screen"
onPress={() => {
if (isLoaded) {
show();
} else {
// No advert ready to show yet
navigation.navigate('NextScreen');
}
}}
/>
</View>
);
}In version 5 and later, react-native-google-mobile-ads transitioned from the old Consent SDK to Google's User Messaging Platform (UMP) SDK. This change aligns with IAB standards and Apple's App Tracking Transparency (ATT) requirements.
requestInfoUpdate(): Now accepts an optional AdsConsentInfoOptions object instead of a list of publisherIds. It returns a new AdsConsentInfo interface.showForm(): No longer accepts parameters. It returns an AdsConsentFormResult interface containing the new AdsConsentStatus.getAdProviders, getStatus, and setStatus have been removed.addTestDevices, setDebugGeography, and setTagForUnderAgeOfConsent are removed. Their functionality is now handled via the AdsConsentInfoOptions object passed to requestInfoUpdate().getUserChoices() can be used to inspect specific consent choices made by the user.Unlike the old SDK, the new AdsConsentStatus primarily indicates whether you should show the consent modal to a user, rather than providing detailed user preference information directly through the status enum.
Install the module based on your project type:
React Native (Bare):
npm install react-native-google-mobile-adsExpo:
npx expo install react-native-google-mobile-adsNote for Android: Before releasing, you must select "Yes, my app contains ads" in the Google Play Console under "Policy and programmes" > "App content" > "Manage".
npm install react-native-google-mobile-ads
# or
npx expo install react-native-google-mobile-adsWhile the EARNED_REWARD event is triggered on the client, you can use Server Side Verification (SSV) to confirm rewards on your backend. This prevents client-side tampering.
To use SSV:
userId and customData via the serverSideVerificationOptions field in the RequestOptions object.Note: You must verify the incoming requests on your server to ensure they are genuine.
const rewardedAd = RewardedAd.createForAdRequest(adUnitId, {
serverSideVerificationOptions: {
userId: '9999',
customData: 'my-custom-data',
},
});