Añadir un plugin que permita editar AndroidManifest.xml cuando generas un proyecto con Expo en React Native ejemplo para añadir com.google.android.gms.ads.APPLICATION_ID

Tiempo de lectura: 2 minutos

Hoy vamos a crear un plugin que nos permitirá editar el manifest de Android a la hora de generar el build con Expo en React Native.

En este ejemplo añadiremos el ID de aplicación necesario para Google Admob.

Primero vamos a crear un archivo que llamaremos AdmobExtraConfigManifest.js (no importa si usas TypeScript, vamos a usar javascript en este archivo).

El contenido es:

const { withAndroidManifest } = require('@expo/config-plugins');

const withAdMobAppId = (config, { androidAppId }) => {
  return withAndroidManifest(config, (config) => {
    const appIdMetaData = {
      $: {
        'android:name': 'com.google.android.gms.ads.APPLICATION_ID',
        'android:value': androidAppId,
      },
    };

    const androidManifest = config.modResults;
    const application = androidManifest.manifest.application[0]; // Acceder al primer objeto de la aplicación

    // Inicializar meta-data si no existe
    if (!application['meta-data']) {
      application['meta-data'] = [];
    }

    // Comprobar si ya existe
    const existingMetaDataIndex = application['meta-data'].findIndex(
      (meta) => meta.$['android:name'] === 'com.google.android.gms.ads.APPLICATION_ID'
    );
    
    // Actualizar o agregar el meta-data
    if (existingMetaDataIndex === -1) {
      application['meta-data'].push(appIdMetaData);
    } else {
      application['meta-data'][existingMetaDataIndex] = appIdMetaData;
    }

    return config;
  });
};

module.exports = (config, { androidAppId }) => {
  return withAdMobAppId(config, { androidAppId });
};

Y ahora vamos a incluir este plugin dentro de nuestra configuración de Expo. Vamos a app.json y dentro de «plugins» añadimos:

"plugins": [
      [
         "./src/util/config/AdmobExtraConfigManifest.js",
        { "androidAppId": "ca-app-pub-NUESTRO_ID_DE_APP_REAL_ADMOB" }
      ]
    ],

En mi caso la ruta es src/util/config/, debes incluir correctamente la ruta a tu plugin creado.

Finalmente usaremos el comando expo prebuild que nos generará de nuevo los archivos de Android.

Podremos verificar que en Manifest ahora incluye el atributo com.google.android.gms.ads.APPLICATION_ID con el valor indicado en el apartado plugins de nuestro app.json.