AdMob Integration

Implement Google AdMob in your Expo app

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.

   
3. You need to create the same app for iOS and Android.

   
4. Then pick a name for your app:

   
5. Now you need to create an ad unit for each type of ad.

   
6. You can choose a 4 category:

   Banner, Interstitial, Rewarded and App Open.

   
7. Now you need to get your app ID for each platform.

   
8. Ad Unit Successfully Created.

   
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>