Do you want to integrate your AdMob to React Native Application?
If you want to earn from your React Native Applications you need to integrate AdMob with your React Native Application. So Google AdMobs helps you to earn from your applications.
Mostly React Native Packages are installed using a single command. In this article, i will tell you the simplest way to install, Integrate, and use AdMob in your react native application.
Create AdMob Account:
First of all you must have a AdMob account. Go to this Article and check how you can create Admob account. The process of creating Admob account is very straight and simple. In this Article All steps are mentioned and described briefly.
How to Install React Native AdMob:
For the integration of Admob with react native first of all we have to Install React native AdMob in your project its is very easy to do so here we discuss the steps :
There are different packages to integrate Admob with your React Native Project but here I discuss that one which I personally use and I think have easy integration than Others.
React-native-admob is bossily a react-native module for Google AdMob Banners, Interstitials, and Rewarded Videos, and also DFP Banners. To install this module Run the command stated below.
npm i @talaikis/react-native-admob
In older versions of React native, you need to configure this module manually but now This fork is a working version for RN 0.60+. Don’t link this package, auto-linking works fine. No need to do extra linking at all.
Open your already created application and install this module using the line stated above.
Once installation process is done. Nothing to do other than this.
React native AdMob Types:
React native AdMob Allows four types of Ads units for its user:
- AdMobBanner,
- AdMobInterstitial,
- PublisherBanner,
- AdMobRewarded,
AdMobBanner,
AdMobBanner is the Banner Add for your Application you can add it as sticky location on at any place on any page of your applicatio.
To read more about this click here.
Usage
import {
AdMobBanner,
} from 'react-native-admob'
// Display a banner
<AdMobBanner
adSize="fullBanner"
adUnitID="your-admob-unit-id"
testDevices={[AdMobBanner.simulatorId]}
onAdFailedToLoad={error => console.error(error)}
/>AdMobInterstitial,
This type of React-native AdMob has imperative API. You can use this at any function call.
To ready more Click Here.
Usage
import {
AdMobInterstitial
} from '@talaikis/react-native-admob';
componentDidMount() {
AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
AdMobInterstitial.setAdUnitID('ca-app-pub-your_ad-uint');
AdMobInterstitial.addEventListener('adLoaded', () =>
console.log('AdMobInterstitial adLoaded'),
);
AdMobInterstitial.addEventListener('adFailedToLoad', error =>
console.warn(error),
);
AdMobInterstitial.addEventListener('adOpened', () =>
console.log('AdMobInterstitial => adOpened'),
);
AdMobInterstitial.addEventListener('adClosed', () => {
console.log('AdMobInterstitial => adClosed');
AdMobInterstitial.requestAd().catch(error => console.warn(error));
});
AdMobInterstitial.addEventListener('adLeftApplication', () =>
console.log('AdMobInterstitial => adLeftApplication'),
);
AdMobInterstitial.requestAd().catch(error => console.warn(error));
}
componentWillUnmount() {
AdMobInterstitial.removeAllListeners();
}
showInterstitial() {
AdMobInterstitial.showAd().catch(error => console.warn(error));
}
componentWillUnmount() {
AdMobRewarded.removeAllListeners();
}PublisherBanner,
This is just Like AdMobBanner with the addition of 2 extra properties:
Click here for more details:
Usage:
import {
PublisherBanner,
} from 'react-native-admob'
<PublisherBanner
adSize="fullBanner"
adUnitID="your-admob-unit-id"
testDevices={[PublisherBanner.simulatorId]}
onAdFailedToLoad={error => console.error(error)}
onAppEvent={event => console.log(event.name, event.info)}
/>AdMobRewarded,
In comparison to the AdMobBanner and PublisherBanner which have a declaritive API, the AdMobRewarded has an imperative API, just like the AdMobInterstitial.
Click Here to read more:
Usage:
import {
AdMobRewarded,
} from 'react-native-admob';
componentDidMount() {
AdMobRewarded.setTestDevices([AdMobRewarded.simulatorId]);
AdMobRewarded.setAdUnitID('your ad unit');
AdMobRewarded.addEventListener('rewarded', reward =>
console.log('AdMobRewarded => rewarded', reward),
);
AdMobRewarded.addEventListener('adLoaded', () =>
console.log('AdMobRewarded => adLoaded'),
);
AdMobRewarded.addEventListener('adFailedToLoad', error =>
console.warn(error),
);
AdMobRewarded.addEventListener('adOpened', () =>
console.log('AdMobRewarded => adOpened'),
);
AdMobRewarded.addEventListener('videoStarted', () =>
console.log('AdMobRewarded => videoStarted'),
);
AdMobRewarded.addEventListener('adClosed', () => {
console.log('AdMobRewarded => adClosed');
AdMobRewarded.requestAd().catch(error => console.warn(error));
});
AdMobRewarded.addEventListener('adLeftApplication', () =>
console.log('AdMobRewarded => adLeftApplication'),
);
AdMobRewarded.requestAd().catch(error => console.warn(error));
}
componentWillUnmount() {
AdMobRewarded.removeAllListeners();
}
showRewarded() {
AdMobRewarded.showAd().catch(error => console.warn(error));
}How to change Upload Limit on CyberPanel? Increase or decrease Upload Size through CyberPanel?
