--- 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) ## 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: ### 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. ### 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. ### 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. ## 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 🤓**

miguelcast

🪄 Lecciones aprendidas actualizando la versión de React Native

Join Our Newsletter. No Spam, Only the good stuff.