Como Configurar Anúncios do AdMob em um Aplicativo React Native Usando Expo

Configurar anúncios do AdMob em um aplicativo React Native usando Expo é um processo direto, mas envolve alguns passos importantes. Aqui, irei demonstrar esse processo com base nas informações disponíveis no React Native Google Mobile Ads.

Passo 1: Instalação das Dependências

Primeiro, vamos instalar as dependências necessárias. Abra seu terminal e execute os seguintes comandos:

npx expo install react-native-google-mobile-ads

Passo 2: Configuração do AdMob no Expo

Antes de poder exibir anúncios para seus usuários, você precisa ter uma conta do Google AdMob . No item de menu Apps, crie ou escolha um aplicativo Android/iOS existente. Cada plataforma de aplicativo expõe um ID de conta exclusivo que precisa ser adicionado ao projeto.

No item de menu Configurações do aplicativo, você pode encontrar o ID do aplicativo:

Abra seu arquivo app.json ou app.config.js e adicione a configuração do Google Mobile Ads:

{
  "expo": {
    "react-native-google-mobile-ads": {
      "android_app_id": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX",
      "ios_app_id": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"
    }
  }
}

Certifique-se de substituir ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX pelo seu próprio ID de aplicativo do AdMob.

Antes de carregar anúncios, faça com que seu aplicativo inicialize o Google Mobile Ads SDK chamando initialize, que inicializa o SDK e retorna uma promisse assim que a inicialização for concluída (ou após um tempo limite de 30 segundos). Isso precisa ser feito apenas uma vez, de preferência no carregamento do aplicativo.

import mobileAds from 'react-native-google-mobile-ads';

mobileAds()
  .initialize()
  .then(adapterStatuses => {
    // Inicialização completa!
  });

Passo 3: Implementação dos Anúncios
Agora, vamos implementar os anúncios no seu aplicativo. Importe e configure o AdMob no seu código React Native:

Banner Ad

import { BannerAd, BannerAdSize } from 'react-native-google-mobile-ads';
import React, { useEffect } from 'react';
import { View } from 'react-native';

export default function App() {
    return (
    <View>
      <BannerAd
        adUnitID="ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX" // Substitua pelo seu próprio ID de unidade de anúncio
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
}

Intersticial Ad

import { InterstitialAd, AdEventType } from 'react-native-google-mobile-ads';
import React, { useEffect } from 'react';
import { Button } from 'react-native';

export default function App() {
  useEffect(() => {
    const unsubscribe = interstitial.addAdEventListener(
      AdEventType.LOADED,
      () => {}
    );
    interstitial.load();
    return unsubscribe;
  }, []);

  const showInterstitialAd = () => {
    interstitial.loaded && interstitial.show();
  };

  return (
    <Button
      title="Mostrar Anúncio Intersticial"
      onPress={showInterstitialAd}
    />
  );
}

Conclusão
E pronto! Você configurou com sucesso anúncios do AdMob, incluindo anúncios de banner e intersticiais, no seu aplicativo React Native usando Expo. Este guia foi feito para te dar uma introdução básica; consulte a documentação oficial para detalhes mais avançados e opções de configuração.

Se precisar de mais ajuda, sinta-se à vontade para perguntar. Boa sorte com seu aplicativo!