Migrar expo-ads-admob a react-native-google-mobile-ads

A partir de la versión 46 del SDK de Expo se eliminara expo-ads-admob, incluso si estas utilizando Expo 45 con eas build es probable que ya tengas errores con esta librería. Tal y como se indica en la documentación de Admob, hay que migrar a react-native-google-mobile-ads.

¡Empecemos!

Lo primero que haremos será instalar la biblioteca react-native-google-mobile-ads

npm i react-native-google-mobile-ads

o

yarn add react-native-google-mobile-ads

Ahora tendremos que agregar nuestras ids de aplicación configurados en Admob al fichero app.json. Tiene que agregarse fuera del tag expo: {}

"react-native-google-mobile-ads": {
  "android_app_id": "ca-app-pub-XXXXXXXXXXXXXX",
  "ios_app_id": "ca-app-pub-XXXXXXXXXXXXXX"
 }

app.json

{
 "expo": {
  "name": "test",
  "slug": "test",
  "scheme": "test",
  "version": "1.0.0",
  "owner": "you",
  "icon": "./assets/icon.png",
  "splash": {
   "image": "./assets/splash.png",
   "resizeMode": "contain",
   "backgroundColor": "#32a060"
  },
  "updates": {
   "fallbackToCacheTimeout": 0
  },
  "assetBundlePatterns": [
   "**/*"
  ],
  "ios": {
   "supportsTablet": true,
   "bundleIdentifier": "com.you.test",
   "requireFullScreen": true,
   "buildNumber": "1.0.0"
  },
  "android": {
   "package": "com.you.test",
   "permissions": [
    "READ_EXTERNAL_STORAGE",
    "READ_INTERNAL_STORAGE",
    "CAMERA",
    "WRITE_EXTERNAL_STORAGE"
   ],
   "versionCode": 1,
   "adaptiveIcon": {
    "foregroundImage": "./assets/icon.png",
    "backgroundColor": "#32a060"
   }
  },
  "web": {
   "favicon": "./assets/icon.png"
  },
  "description": ""
 },
 "react-native-google-mobile-ads": {
  "android_app_id": "ca-app-pub-XXXXXXXXXXXXXX",
  "ios_app_id": "ca-app-pub-XXXXXXXXXXXXXX"
 }
}

Ahora podemos probar a añadir un banner

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
<BannerAd
      unitId={adUnitId}
      size={BannerAdSize.FULL_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
    />

Para probarlo ya no podremos utilizar el comando expo start y visualizarlo con la app de Expo ya que la librería react-native-google-mobile-ads contiene código nativo que la app de Expo no puede interpretar.

Deberemos generar el código nativo con el comando expo prebuild, el cual nos generara el código nativo en Android e Ios. Una vez generado el código lo podremos probar con los comandos

expo run:android
expo run:ios

Teniendo en cuenta que si no estamos en un Mac no podremos probar el Ios y para poder probarlo deberemos hacerlo desde el cloud con el eas build:ios

Configuraremos nuestro eas.json con un tag “preview” para poder generar desde el cloud de Expo un archivo apk en caso de Android y un .gz en caso de Ios que nos permitirá probarlo en un simulador.

{
  "cli": {
    "version": ">= 0.52.0"
  },
  "build": {
    "development": {
      "distribution": "internal",
      "android": {
        "gradleCommand": ":app:assembleDebug"
      },
      "ios": {
        "buildConfiguration": "Debug"
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true,
        "cache": {
        "key": "181121"
        }
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

Y utilizaremos el comando

eas build -p android --profile preview
eas build -p ios --profile preview

Antes de hacer eso tenemos que tener en cuento dos posibles errores

En Ios será necesario que antes de subir al cloud de Expo hayamos eliminado la librería expo-ads-admob

En Android deberemos modificar la siguiente linea del AndroidManifest.xml del código nativo generado con el expo prebuild

Tendremos la linea de la siguiente manera

<meta-data android:name="com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT" android:value="true"/>

Hay que poner el valor a false

<meta-data android:name="com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT" android:value="false"/>

¡Ya lo tenemos!

Ya deberíais poder generar las apps tanto de “preview” como de producción utilizando para mostrar anuncios la librería react-native-google-mobile-ads y para generar las apps con el eas build

Ya sabes que si te ha gustado el artículo me puedes invitar a un café ;-)

martinmul is Creation of articles about programming and owner of freecons.eu

Recuerda seguir la siguiente publicación para más artículos sobre React Native con Expo

Ract Native con Expo