2025-01-15 9:00am ADT
Lots of misguided information out there right now on how to make Admob work with Expo (as of January 2025, to be specific. Expo 52). And all the LLMs will run you around in a circle.
For one, don't use the expo-ads-admob
package - it's deprecated on the latest expo version.
You also do NOT need to eject from expo to use Admob, which is also a deprecated way of doing things. You do however, have to run on Android/iOS vs using Expo go over wifi - which sorts sucks, but a quick USB-C cable to your phone and you're good to go.
To start, add this to your app.json file:
{
"expo": {
...
"plugins": [
"expo-router",
...
[
"react-native-google-mobile-ads",
{
"androidAppId": "ca-app-pub-xxxx",
"iosAppId": "ca-app-pub-xxx"
}
]
],
...
Next, npx expo install react-native-google-mobile-ads
to install the required package.
Finally, here's a sample component to use for a small banner ad:
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
interface SmallBannerAdProps {
adUnitId?: string; // Optional: Fallback to TestIds.BANNER if not provided
}
const SmallBannerAd: React.FC<SmallBannerAdProps> = ({ adUnitId }) => {
const adUnit = adUnitId || TestIds.BANNER; // Use TestIds.BANNER for testing
return (
<View style={styles.adContainer}>
<BannerAd
unitId={adUnit}
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
/>
</View>
);
};
const styles = StyleSheet.create({
adContainer: {
width: '100%',
marginTop: 20,
justifyContent: 'center',
alignItems: 'center',
},
});
export default SmallBannerAd;
With this, you can just add <SmallBannerAd />
to your screen and it will show a small banner ad using a test ad unit, so you won't break the terms of service by accidently displaying a real ad.
Finlly, run npx expo prebuild && npx expo run:android
to build and run your app (providing it's connected via USB and setup for development) and it'll build & launch. Navigate as required to see the ad, and voila. At this point you can add in your ads as per the react-native-google-mobile-ads docs and you'll be good to go, and you didn't have to get rid of all your expo stuff.