Actualizar React Native en tu proyecto: Lo que necesitas saber

Si llegaste hasta aquí es porque seguramente te has dado cuenta de que las librerías de tu proyecto se encuentran desactualizadas, has querido instalar una nuevas y la versión que usas no cuenta con soporte, o simplemente quieres acceder a nuevas características de versiones más actuales de React Native y mejorar tanto la experiencia de usuario como de desarrollo.

La actualización a nuevas versiones de React Native te dará acceso a más API, nuevas librerías, mejoras en el performance, entre otros detalles positivos. La actualización requiere un poco de esfuerzo, pero con este artículo tratamos de prepararte para que todo salga bien.

Nos vamos a centrar en proyectos desarrollados sólo con React Native y te daré las recomendaciones más importantes para que actualices tu proyecto React Native sin morir en el intento.

Recomendaciones

1. Lee la documentación oficial de React Native. Sabemos que a veces no nos gusta leer, sino que pasamos directo a la acción. Muchas veces eso solo nos genera más retrasos, ya que por saltarse algún paso ocasionamos errores innecesarios. Así que nos conviene hacer de la documentación nuestra mejor amiga a la hora de querer actualizar nuestra app.
   
2. No actualices a la última versión. Un error que se comete a menudo es tratar de actualizar directamente sobre la última versión cuando nos encontramos cuatro o más versiones por debajo de la actual. Esto hace que se acumulen todos los cambios y errores de cada una de las anteriores, es decir, sumamos errores al mismo tiempo que actualizamos. Esto incrementa la complejidad, por lo que siempre es mejor hacer las actualizaciones gradualmente, en especial si dentro de ellas hay cambios en la arquitectura de React Native.
   
3. Apóyate en la comunidad. La comunidad de React Native de GitHub nos permite compartir experiencias de desarrollo y aportar soluciones donde,generalmente, muchos necesitamos ayuda. También promueve el aprendizaje sobre nuevas características. Lo que más nos ayudará al actualizar nuestro proyecto es que, seguramente, los errores a los que te enfrentas ya fueron resueltos en los issues del repositorio de React Native.
   
4. Aplica el principio estrella de la los developers: divide y vencerás. Encárgate de resolver tus conflictos paso a paso. Primero, asegúrate de que tu proyecto se ejecute perfectamente para Android (haz lo mismo en el caso de iOS). Actualiza, elimina o reemplaza librerías que no funcionen correctamente, resuelve los errores de código, arregla los problemas de UI que puedan aparecer y, finalmente, analiza y soluciona las advertencias que reporte React Native. Esto hará que el trabajo sea mucho más sencillo y que nos aseguremos de que nuestra actualización fue ejecutada correctamente.
   

Los proyectos típicos de React Native se componen esencialmente por un proyecto de Android, un proyecto de iOS y un proyecto de JavaScript. La actualización puede ser bastante tediosa, pero si aplicas nuestras recomendaciones, el proceso será más sencillo.

Actualmente, hay dos formas de actualizar nuestro proyecto de React Native: usando la React Native CLI o manualmente a través de Upgrade Helper.

¿Qué es la React Native CLI?

Es una herramienta de línea de comandos que se envía a través de React Native en forma de @react-native-community/clipaquete.

¿Cómo actualizar con React Native CLI?

Si quieres actualizar a la última versión, bastaría con colocar este comando desde la terminal de tu proyecto:

npx react-native upgrade

No obstante, muchas veces esto no es lo que queremos, sobre todo en casos donde usamos más de cuatro versiones anteriores, con proyectos demasiados grandes y usamos de muchas librerías.

Por ende, si tienes una versión específica a la que quieres migrar, deberás correr el siguiente comando:

npx react-native upgrade number_version-upgrade

Luego, resuelve los conflictos. Los archivos en conflicto incluyen delimitadores que dejan muy claro de dónde provienen los cambios.

¿Qué es React Native Upgrade Helper?

Es una web que nos permite colocar la versión de React Native que tenemos sobre la que queremos actualizar y ver cuáles cambios ocurrieron entre una versión y otra, con recomendaciones de lo que deberíamos ver antes de realizar la actualización y el porqué de actualizar nuestro proyecto.

¿Cómo actualizar React Native con React Native Upgrade Helper?

Primero debes seleccionar la versión en la que se encuentra tu proyecto y la versión a la cual deseas actualizar. Por defecto, se seleccionan las últimas versiones principales. Después de seleccionar, puedes hacer clic en el botón Muéstrame cómo actualizar y encontrarás la información que necesitas para hacer los cambios necesarios en tu proyecto.

El primer archivo que se muestra es el package.json. Mi recomendación siempre será que actualices todas las dependencias que se encuentren allí, junto con las que recomienden.

Luego, actualiza. La nueva versión puede contener actualizaciones de otros archivos que se generan cuando ejecutas npx react-native init. Esos archivos se enumeran después de package.json en la web de React Native Upgrade Helper. Si no hay otros cambios, solo necesitarás reconstruir el proyecto para continuar con el desarrollo.

En caso de que haya cambios, puedes actualizarlos manualmente copiando y pegando desde los cambios en la web de React Native Upgrade Helper o puedes hacerlo con el comando de actualización de React Native CLI, como ya se explicó acá.

Finalmente, asegúrate siempre de que tu versión de React Native use las dependencias correctas.

Una vez que actualices tu proyecto y se encuentre estable, considera actualizar regularmente para minimizar la pesadilla de actualización que muchos devs enfrentan al dejar de actualizar.

Espero que este contenido haya sido de utilidad y que te ayude a actualizar React Native sin sufrimiento. ¡Hasta pronto!