@earthling/react-native-admob NPM

Admob for React Native with powerful hooks and components

📦 Installation

📃 Documentation

🚀 Usage

Initializing Mobile Ads SDK

import AdMob from '@react-native-admob/admob';

AdMob.initialize();

Displaying Banner Ad

import { BannerAd, BannerAdSize } from '@react-native-admob/admob';

<BannerAd
  size={BannerAdSize.BANNER}
  unitId={UNIT_ID_BANNER}
  onAdFailedToLoad={(error) => console.error(error)}
  requestOptions={{
    requestNonPersonalizedAdsOnly: true,
  }}
/>;

Displaying InterstitialAd

import { useInterstitialAd } from '@react-native-admob/admob';

const { adLoadError, adLoaded, show } = useInterstitialAd(UNIT_ID_INTERSTITIAL);

useEffect(() => {
  if (adLoadError) {
    console.error(adLoadError);
  }
}, [adLoadError]);

useEffect(() => {
  if (adLoaded) {
    show();
  }
}, [adLoaded]);

Displaying RewardedAd

import { useRewardedAd } from '@react-native-admob/admob';

const { adLoadError, adLoaded, show, reward } = useRewardedAd(UNIT_ID_REWARDED);

useEffect(() => {
  if (adLoadError) {
    console.error(adLoadError);
  }
}, [adLoadError]);

useEffect(() => {
  if (adLoaded) {
    show();
  }
}, [adLoaded]);

useEffect(() => {
  if (reward) {
    console.log('Reward earned: ');
    console.log(reward);
  }
}, [reward]);

Displaying App Open Ad

import { useAppOpenAd } from '@react-native-admob/admob';
import RNBootSplash from 'react-native-bootsplash';

export default function App() {
  const [initialized, setInitialized] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [splashDismissed, setSplashDismissed] = useState(false);
  const { adDismissed, adLoadError } = useAppOpenAd(
    initialized ? UNIT_ID_APP_OPEN : null,
    {
      showOnColdStart: true,
    }
  );

  useEffect(() => {
    const initAdmob = async () => {
      await AdMob.initialize();
      setInitialized(true);
    };
    const load = async () => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      setLoaded(true);
    };

    initAdmob();
    load();
  }, []);

  useEffect(() => {
    if (initialized && loaded && (adDismissed || adLoadError)) {
      RNBootSplash.hide({ fade: true });
      setSplashDismissed(true);
    }
  }, [initialized, loaded, adDismissed, adLoadError]);

  return splashDismissed ? <Example /> : <View />;
}

For detailed usage, head over Documentation.