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.
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
- 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
<AdMobBannerbannerSize="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.