Como configurar Admob no react-native

Primeira você tem entender o que é o Admob, para isso vai estar um link aqui em baixo para você poder acessar e ler o artigo o que é Admob e para que server.

AdMob

Pronto! Agora vamos para instalação.

Instalação

Primerio instale via Npm ou Yarn (Isso você decidir) caso não saiba o que é, resumindo, ambos são instaladores de pacotes.

npm install react-native-admob — save

1. Adicione esse código abaixo no seu arquivo android/settings.gradle

include ':RNAdMob', ':app'
project(':RNAdMob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-admob/android')

2. Adicione esse código abaixo no seu arquivo android/app/build.gradle

dependencies {
   ...
   compile project(':RNAdMob')
}

3. Agora depende muito de sua versão do react native, no seu arquivo MainApplication.java

Adicione esse código no topo para versão menores que 0.29

RN < 0.29

import com.sbugert.rnadmob.RNAdMobPackage;

Dentro do protected List<ReactPackage> getPackages() {:

return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNAdMobPackage()
);

Para versões maiores ou igual a 0.29 adicione está linha, no arquivo MainAplication.java

RN >= 0.29

import com.sbugert.rnadmob.RNAdMobPackage;

Dentro doprotected List<ReactPackage> getPackages() {:

return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNAdMobPackage()
);

No admob é bem legal que você não precisa colocar o seu id principal do Admob que é aquele ca-app-pub-xxxxxxxxxx~xxxxxxxxxxou seja é preciso apenas o código do bloco de anúncio que é aquele ca-app-pub-xxxxxxxxxx/xxxxxxxxxx.

Lembre-se que ambos são diferentes, um tem um tio e outro tem uma barra.

Uso

Já no react native você pode começar import o tipo de seu anúncio se é em bloco (Banner) ou tela cheia (Full Screen) que no Admob se chama AdMobInterstitial (Tem outros, mas esses são os principais).

import {
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded
} from 'react-native-admob'

Vamos começar com Banner, o banner funciona como um componente, com ele você pode colocar na posição que você quiser em seu aplicativo, lembrando que ele tem o with ‘100%’ isso é, ele toma a largura do celular inteira.

Você começar editando o id dele como falei logo acima

<AdMobBanner
bannerSize="fullBanner"
adUnitID="seu id do admob"
testDeviceID="EMULATOR"
didFailToReceiveAdWithError={this.bannerError} />

Tem o outro modo Interstitial, com esse tipo de anuncio você pode adicionar funções para disparar, ele não é um componente, ele funciona como um item nativo, você começar adicionando o id dele

AdMobInterstitial.setAdUnitID('seu id do admob');
AdMobInterstitial.setTestDeviceID('EMULATOR');

Este ‘Emulator’ é para quando você estiver codando e ele não contar como um usuário, caso conte será debitado da sua conta.

AdMobInterstitial.requestAd(AdMobInterstitial.showAd);

Com esse show Ad, é onde você vai poder mostrar o ad para os usuário (Quando você quiser, mas cuidado para não lotar).

Espero ter ajudado, minhas redes sóciais:

Twitter: https://twitter.com/hubert_dev

Instagram: @hubert_rryan

Email profissional: hubertryanofficial@gmail.com

Todos os meus apps: http://bit.ly/35pXbiw

Artigo feito por Hubet Ryan.