AdMob Home

​
How to integrate AdMob in our React Native Expo App?

  1. Firstly, you need to make sure to have an AdMob account. If you don’t have one, you can create it here.
  2. Start the setup by following the steps below.

​
Setup

1

First, you need to install the react-native-google-mobile-ads package.
npm install react-native-google-mobile-ads
2

Go to the admob.google.com and create your account.
AdMob Home
3

You need to create the same app for iOS and Android.
AdMob App ID
4

Then pick a name for your app:
AdMob App Name
5

Now you need to create an ad unit for each type of ad.
AdMob Ad Unit
6

You can choose a 4 category:
Banner, Interstitial, Rewarded and App Open.
AdMob App Category
7

Now you need to get your app ID for each platform.
AdMob App ID
8

Ad Unit Successfully Created.
AdMob Ad Unit ID
9

Now, listen carefully to the following steps.
Open app.json file and add the following code down below:
plugins: [
    ...
        [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-<your-android-app-id>",
          "iosAppId": "ca-app-pub-<your-ios-app-id>"
        }
      ],
    ...
]
10

Go to services/admob/admobConfig.ts file and change the values with your own.
If you are using the Gluestack branch go to the services/admob/admobInitialize.ts file and change the values to your own.
Go to services/admob/admobService.ts file and uncomment the code.
11

Now , go to app/_layout.tsx file and add the following code down below:
app/_layout.tsx
import { initializeAdmobService } from '@/services/admob';
import { useAdmob } from '@/hooks/useAdmob';

function App(){
    const { admobState, initializeAdmobService } = useAdmob();
    useEffect(() => {
        ...
        // Ad this line: 👇
        initializeAdmobService();
        ...
        getUserTrackingPermission();
        ...
    }, []);
    // Find this useEffect and change this line: 👇
    useEffect(() => {
        if (loaded && initialized && admobState.admobReady.isLoaded) {
            SplashScreen.hideAsync();
        }
}, [loaded, initialized, admobState.admobReady.isLoaded]);
12

Now you can use Ads in where you want in your app. For example:
app/screens/profile.tsx
import { BannerAd } from 'react-native-google-mobile-ads';
// If you want to use other Ad types, use this import: 👇
import { useAdmob } from '@/hooks/useAdmob';
// If you want to use Banner AD, use this import: 👇
import { admobConfig } from '@/services/admob/admobConfig';

const ProfileScreen = () => {
    const { showInterstitial, showRewarded, showAppOpen } = useAdmob();
    useEffect(() => {
        // Show Interstitial Ad
        showInterstitial();
        // or  
        showRewarded();
        // or
        showAppOpen();
    }, []);
    return (
        <>
            <BannerAd
                unitId={admobConfig.bannerAdUnitId}
                size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
            />
            <ProfileComponent .../>
        </>
    );
};
13

Don’t forget to build your app again.
npx expo prebuild or eas build --profile development --platform <platform>