Solucionar error (node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2232:9) en React Native y Expo build

Tiempo de lectura: 2 minutos

Hola, hoy vamos a solucionar el problema que aparece con la última versión de iOS y la librería de React Native menor a 68.

El error que aparece es el siguiente:

❌  (node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2232:9)

  2230 |         generationCount);
  2231 |     node->setLayoutHadOverflow(
> 2232 |         node->getLayout().hadOverflow() |
       |         ^ use of bitwise '|' with boolean operands [-Werror,-Wbitwise-instead-of-logical]
  2233 |         currentRelativeChild->getLayout().hadOverflow());
  2234 |   }
  2235 |   return deltaFreeSpace;

Para solucionarlo, vamos a fixear el error y parchearlo con Patch-Package.

Primero vamos a instalar Patch-Package:

npm install patch-package --save-dev

Añadimos –save-dev para indicar que solo se quiere instalar y guardar en las dependencias del entorno de desarrollo.

Una vez instalado, vamos a modificar la línea que da error, en este caso se refiere a un operador lógico que falta (doble pipe ||) ya que indica que solo hay un pipe |.

El archivo está en node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

Para ello vamos a la línea 2232 y añadimos el doble pipe:

 node->setLayoutHadOverflow(
        node->getLayout().hadOverflow() |
        currentRelativeChild->getLayout().hadOverflow());
  }

Lo cambiamos a:

 node->setLayoutHadOverflow(
        node->getLayout().hadOverflow() ||
        currentRelativeChild->getLayout().hadOverflow());
  }

Esto soluciona el error en local, ahora vamos a crear un parche y guardarlo como librería para que se pueda aplicar desde Expo eas y generar el build correctamente.

Primero vamos a escribir en la consola:

npx patch-package react-native

El comando funciona así: npx patch-package <nombre_paquete> en este caso el nombre del paquete es react-native.

Ahora se genera un paquete con la corrección y se guarda en el proyecto.

Ahora para que se aplique cuando ejecutemos el build o eas tenemos que ir al archivo package.json y añadir dentro del objeto de scripts:

"scripts": {
    "postinstall": "patch-package"
}

Ahora se ejecutará el parche cuando pasemos a otros entornos.