Desarrollo móvil en 2020 con React Native y Expo

En 2020 desarrollar aplicaciones móviles con React Native y Expo es algo tremendamente sencillo, sean aplicaciones híbridas o aplicaciones nativas. Lo único que debemos saber es JavaScript y HTML, el resto lo pone React Native a través de sus componentes y la gran cantidad de paquetes que la comunidad ofrece día a día.

En esta entrada aprenderás a crear tu primera aplicación móvil con React Native y Expo, será una aplicación híbrida, ¿pero qué significa una aplicación nativa y qué diferencias hay entre una aplicación nativa y una aplicación híbrida? Veamos.

¿Qué son las aplicaciones híbridas?

Las aplicaciones híbridas son el tipo de aplicación más sencilla en el mundo del desarrollo móvil, con HTML, JavaScript y CSS podrás crear un archivo .apk (extensión de las aplicaciones Android) o .ipa(extensión de las aplicaciones iOS), no necesitas nada más. La gran ventaja que nos ofrece el desarrollo híbrido es que no necesitas preocuparte por configurar y compilar tu proyecto con Xcode o Android Studio, es decir, un simple comando será capaz de crear los archivos .apk o .ipa listos para publicar en sus respectivas Store’s.

Cuando creamos una aplicación móvil con React Native y Expo por defecto se crea una aplicación híbrida, pero si lo deseamos, podemos convertir esta aplicación en una aplicación nativa de una forma muy sencilla utilizando el comando detach de Expo CLI.

¿Qué son las aplicaciones nativas?

Mientras el código de una aplicación Nativa o Híbrida en React Native practicamente será el mismo, la gran diferencia viene en la forma de configurar, instalar dependencias y compilar tu APP para Android o iOS. Lidiar con Xcode o Android Studio puede ser un verdadero dolor de cabeza, más Xcode que Android Studio, pero es algo que siempre debes tener en cuenta en tus desarrollos, sobre todo por el incremento del tiempo que te va a llevar.

Si nos ponemos en el caso de una sencilla aplicación nativa para iOS con Expo, deberás hacer lo siguiente:

• Instalar Xcode.
• Configurar tu cuenta de desarrollador Apple para generar los certificados.
• Configurar los certificados para tu proyecto con Xcode.
• Compilar la APP con Xcode, validar y subir a tu cuenta de iTunes Connect.

Esto, que son 4 líneas, la primera vez que lo hagas te garantizo que desearas no haber tenido que crear nunca una aplicación móvil nativa con React Native y Expo en este caso (te habla la voz de la experiencia). Pero no te preocupes, si te ves en este caso, simplemente sigue los 2 siguientes cursos, uno para Android y otro para iOS, lo explico todo paso a paso con un ejemplo real.

Curso App de Suscripciones con React Native para Android

Curso para publicar aplicaciones en la App Store, ejemplo con React Native

Teniendo claro qué son las aplicaciones nativas y las aplicaciones híbridas en el desarrollo de aplicaciones móviles, vamos a crear nuestro primer proyecto con React Native y Expo utilizando Expo CLI.

Instalar Expo CLI

Lo primero que debemos hacer es tener instalado Node.js, para ello simplemente descarga el ejecutable desde su página. Una vez tengamos Node.js instalado en nuestro equipo, simplemente ejecuta el siguiente comando en un terminal.

El comando anterior nos ofrece una variable de entorno en nuestro equipo llamada expo, si la ejecutamos en un terminal veremos lo siguiente

IDE para trabajar con React Native y Expo

Yo te voy a recomendar la herramienta que yo utilizo para programar aplicaciones con React Native a día de hoy, no sé si será la mejor, todo depende de los gustos, para a mi es la que mejor me funciona y me ayuda a escribir un mejor código. El IDE que utilizo es IntelliJ IDEA que, aunque esté pensado principalmente para Java, es un todo terreno y se mueve como pez en el agua con cualquier cosa que trabaje con JavaScript.

Los productos de JetBrains no son gratuitos, pero tienes una versión gratuita de 30 días para poder probarlos. Debe quedar claro que yo no me llevo ninguna comisión por promocionarlos, pero llevo utilizándolos muchos años para todos mis desarrollos, PHP, JavaScript y Bases de datos y puedo decir que es una de mis mejores inversiones a día de hoy, actualizaciones constantes, mejoras, un IDE rápido para desarrollar y hacer debug y en definitiva, una poderosa herramienta para en este caso desarrollar aplicaciones móviles con React Native y Expo.

Si no te interesa utilizar un IDE de pago con IntelliJ IDEA, siempre puedes utilizar Visual Studio Code o cualquier editor de texto gratuito con el que a través de plugins se acerque lo máximo a lo que es un IDE.

Primer proyecto con React Native y Expo

Ya estamos listos para crear un nuevo proyecto con React Native y Expo, así que abre un nuevo terminal y ejecuta el siguiente comando:

Una vez se haya ejecutado el anterior comando veremos en pantalla lo siguiente:

Moviéndonos con las flechas de nuestro teclado podremos seleccionar la opción tabs y pulsando enter se creará un nuevo proyecto con un montón de cosas ya hechas, es la mejor forma de comenzar un proyecto nuevo con React Native y Expo ya que de esta forma no deberemos configurarlo todo desde 0.

Una vez se haya creado nuestro proyecto el terminal nos informará que podemos lanzar nuestra nueva APP utilizando varios comandos:

En este momento ya estarás en disposición de abrir tu proyecto con tu IDE, si todo ha ido bien prodemos ver lo siguiente:

• components: Los componentes que tendrá nuestra APP, un Input para un formulario, un Avatar para los usuarios o cualquier cosa que nos permita refactorizar código.
• constants: Aquí podemos guardar constantes de nuestro proyecto, colores, alto y ancho de la pantalla actual y en definitiva valores que nunca cambiaran.
• hooks: los hooks nos permiten escribir código de una forma diferente a cómo lo hacemos con clases, a mi particularmente me gusta más utilizar clases por que a mi parecer queda un código más limpio y ordenado.
• navigations: Aquí podremos guardar las distintas navegaciones de nuestra APP, por ejemplo una para usuarios identificados y otra para usuarios que no lo estén.
• screens: Cada una de las pantallas de nuestra APP, Login, Registro, Perfil etcétera.
• App.js: El punto de entrada de nuestra aplicación.
• app.json: Aquí se guarda la configuración de Expo para nuestro proyecto, la orientación, icono, splash screen, la versión etcétera.

Lanzando nuestra APP en un emulador

Si tenemos un emulador en nuestra computadora podremos lanzar nuestra APP y poder visualizarla rápidamente, por ejemplo en MAC OS cuando instalamos Xcode ya lo tenemos completamente configurado. Para lanzar nuestra APP para iOS simplemente debemos ejecutar el siguiente comando:

¿Increíble verdad? Ya tenemos nuestra APP corriendo en  un emulador, pero… ¿y si no tengo ningún emulador? Expo tiene una solución rápida y fácil para solucionar este problema.

Expo Client, ¡desarrolla tu APP en un dispositivo físico!

Expo nos ofrece una solución para poder ver nuestros desarrollos en dispositivos físicos, sea en Android o en iOS, para ello simplemente debemos descargar su APP desde la App Store o la Play Store. Una vez la tengamos instalada en nuestro dispositivo podremos abrir el terminal que abrió anteriormente el comando yarn ios para leer el código QR que nos ofrece con Expo Client. Cuando Expo Client lea el código de tu APP automáticamente la instalará en tu dispositivo y cualquier cambio que hagas en tu código actualizará la APP instalada en tu dispositivo.

¿Quieres seguir aprendiendo a desarrollar APP’s con React Native y Expo?

Te invito a que te suscribas a la plataforma, tenemos varios cursos que te ayudarán a continuar tu aprendizaje con React Native y Expo, desarrollo de nuevas aplicaciones y publicaciones en Play Store y App Store paso a paso con material actualizado.

Además, si eres desarrollador Laravel no te puedes perder el Curso de React Native y Laravel Echo con Laravel Sanctum, aplicaciones en tiempo real, en él aprendemos desde 0 y paso a paso a desarrollar una APP en tiempo real utilizando como Backend Laravel con Socket.IO.