🪄 Lecciones aprendidas actualizando la versión de React Native
Tags: react, reactnative, mobile
Published: 2022-02-15 20:26:41

---
title: 🪄 Lecciones aprendidas actualizando la versión de React Native
published: true
description: Lecciones aprendidas actualizando la versión de React Native en la App de Ayenda
tags: react, reactnative, mobile
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk9iexqfdjx8htsyntbm.jpeg
---

Hace poco vivimos en Ayenda el retador y agotador proceso de actualizar la versión de React Native de nuestra App por primera vez, pasamos de la versión `0.59` a la `0.63.4`. En el proceso aprendimos algunas lecciones que nos sirvieron para llevar mucho más fácil esta actualización.

## Contenido del post
* 🤷🏻‍♀️ [Por qué actualizamos la versión de React Native](#why)
* ⏮️ [Lección #1 - No actualices a la última versión](#leccion1)
* 👣 [Lección #2 - Dividir en diferentes hitos](#leccion2)
* ⚙️ [Lección #3 - La comunidad y herramientas](#leccion3)
* 🏁 [Conclusión](#conclusion)

## <a name="why"></a>Por qué actualizamos la versión de React Native

Ayenda es una cadena de hoteles donde buscamos alojar millones de huéspedes usando tecnología, y para lograrlo empezamos a mejorar nuestros canales digitales. Para el caso de nuestra [APP](https://ayenda.com/app?utm_source=devTo&utm_medium=blog&utm_content=postLeccionesReactNative), donde cualquier persona puede descargarla, buscar un hotel en Colombia, Perú y México, realizar reservas y administrarlas, el objetivo es ofrecer la mejor experiencia y soportar una cantidad de usuarios. Nuestra app está desarrollada con [React Native](https://reactnative.dev/) y antes de llevar a cabo la actualización teníamos instalada la versión `0.59` y varias librerías más. El problema con esto es que llevábamos un largo tiempo sin hacer grandes cambios o desarrollos y nos dimos cuenta de los problemas que teníamos al estar desactualizados. Para nombrar algunos:

* Librerías desactualizadas, incluyendo React Native, por tal motivo teníamos bugs, problemas de seguridad y performance.
* El ambiente de desarrollo no soportaba herramientas como `Flipper` para hacer debbug o `Fast refresh` para agilizar nuestros desarrollos.
* Varias de las librerías que queríamos instalar para nuevos desarrollos no soportan versiones `< 0.60` de React Native.
* Acceder a nuevas características de versiones más actuales de React Native.

Estos problemas y algunos otros factores hacían que el proceso de desarrollo y la experiencia de usuario no fuera la mejor en el momento, donde empezar a crear nuevas características frecuentemente y tener un equipo de desarrollo más grande ejecutando diferentes cambios iba a convertirse en un caos.

Ahora te contaré algunas de las experiencias y lecciones que pasamos mientras actualizábamos la versión de React Native:

### <a name="leccion1"></a>Lección #1 - No actualices a la última versión

Un error que se cometió al iniciar el desarrollo para actualizar la versión de React Native de la `0.59` a la `0.63.4`, en su momento, fue tratar de actualizar directamente a esta última versión. Pero, ¿por qué esto fue una mala práctica? El hecho de querer subir 4 versiones al tiempo nos acumuló todos los cambios y errores de cada una de estas versiones, es decir, si al pasar a la versión `0.60` teníamos que hacer 20 cambios, estábamos sumando, además, los de cada versión. Todo esto junto en una actualización, sumaba demasiada complejidad y errores que resolver, por esta razón decidimos no pasar a la última versión inmediatamente, sino ir subiendo de versión gradualmente.

Empezamos a actualizar de la versión `0.59` a la `0.60` y fue mucho más fácil que hacerlo directamente a la `0.63.4`. Esto nos ayudó a ver resultados más rápidos y a minimizar la cantidad de errores que resolvimos en cada actualización, sobre todo al pasar de la versión `0.59` a la `0.60` donde agregaron grandes cambios (puedes verlos [aquí](https://reactnative.dev/blog/2019/07/03/version-60)). Luego de esto fue mucho más fácil pasar a versiones como la `0.62` y después a la `0.63.4`. En el medio de cada actualización nos encontramos otro reto, que nos llevó a la siguiente lección.

### <a name="leccion2"></a>Lección #2 - Dividir en diferentes hitos

Nos encontramos que al actualizar la versión de React Native nos empezaron a salir una serie de errores y problemas que debíamos arreglar para que nuestra App quedara funcionando correctamente. Para dar solución a estos errores, fue necesario organizarnos y avanzar hacia el objetivo en partes más pequeñas, logrando un trabajo enfocado y que nos permitió  ver el avance en todo momento; por eso decidimos ir por el siguiente camino:

* Solucionar los conflictos de IOS y que compilara correctamente (varios cambios y errores en este paso).
* Solucionar los conflictos de Android y que compilara correctamente (varios cambios y errores en este paso).
* Actualizar librerías que no estuvieran funcionando correctamente o hacer cambios en implementaciones.
* Arreglar errores de código.
* Arreglar problemas de UI.
* Solucionar las advertencias que nos reporta React Native.

Todo esto que hicimos con cada actualización nos ayudó a tener un objetivo claro sobre cada tarea y motivarnos a alcanzarla, ya que la cantidad de errores en total que pueden aparecer en la actualización puede ser algo frustrante, pero si lo dividimos y solucionamos los problemas por partes más pequeñas se hace más llevadero y menos abrumador.

### <a name="leccion3"></a>Lección #3 - La comunidad y herramientas

En el camino nos dimos cuenta de que la comunidad de React Native es una comunidad donde podemos acceder y donde se están creando grandes herramientas que nos benefician a todos. No estamos solos con todos los problemas encima sino que nos soportamos de herramientas y soluciones desarrolladas por la comunidad.

Actualizar la versión de React Native es un poco más que actualizar el archivo `package.json`, también debemos modificar varios archivos de las carpetas `ios` y `android`. Para hacer esto mucho más fácil podemos usar [Upgrade helper](https://react-native-community.github.io/upgrade-helper), este nos permite ver las diferencias entre dos versiones de archivos que fueron eliminados, agregados o actualizados de la base de código de React Native.

![Upgrade helper interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m5usx755sjo4ez08a2u.png)

Esta no es la única herramienta que nos ayuda, existen otras como el comando `upgrade` para cambiar automáticamente la base del código, como nos muestra el **Upgrade Helper** pero aplicada directamente a nuestro proyecto.

Para ver más herramientas que nos facilitan el trabajo de actualizar nuestro proyecto puedes entrar a la documentación de React Native [aquí](https://reactnative.dev/docs/upgrading).

En el momento que estuvimos resolviendo errores y conflictos un gran apoyo en la comunidad fueron los issues del repositorio de React Native y también de las dependencias que utilizamos, allí encontramos otras personas que han pasado por los mismos errores y encontramos muy buenas soluciones, lo cual nos ayudó a optimizar mejor el tiempo en cada problema que nos encontrábamos.

![react native issues section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e01i49rcnvl5szpsrl1n.png)

Aquí también fueron de gran ayuda [Stack Overflow](https://stackoverflow.com/), [Medium](https://medium.com/), [Github](https://github.com), [Dev.to](https://dev.to/) y otros blogs creados por una gran comunidad.

## <a name="conclusion"></a>Conclusión

Llevar a cabo esta actualización en Ayenda fue al comienzo un proceso agotador y un poco frustrante. Nos encontramos con muchos baches y errores, llegando al punto de pensar en que era imposible hacerlo, pero cuando trabajamos en equipo y todos pensamos en pro del mismo objetivo todo se vuelve más fácil.

Estas lecciones que compartimos nos ayudaron a que el camino fuera más ordenado, menos frustrante, a mantenernos motivados y  poder llegar a la meta.

Nuestro proyecto y nuestra experiencia de desarrollo en el equipo mejoró increíblemente después de cambiar la versión de  React Native y otras librerías más.

**Ahora a seguir con el próximo upgrade 🤓**