Cómo configurar React Native desde cero con Expo

Requisitos previos

Expo nos va a permitir tanto crear aplicaciones para iPhone sin necesidad de tener un Mac, como abstraernos de parte de su configuración o de los elementos más engorrosos de utilizar React Native, lo que para comenzar a dar los primeros con este framework es bastante de agradecer.

Vamos a necesitar también tener algún modo para probar las aplicaciones, para lo que podemos tener un terminal físico o puede utilizar un emulador.

Si queremos utilizar un emulador, para Android podemos hacerlo desde Android Studio en Windows, Linux o Mac, y para iPhone vamos a tener que hacerlo desde un ordenador con macOS instalado y ejecutar nuestro simulador.

También vamos a necesitar tener instalado NodeJS y algún editor de código como Visual Studio Code, Atom o cualquier otro.

Vamos a utilizar un equipo con todo lo necesario ya instalado para ver qué dependencias más propiamente de React Native vamos a necesitar.

No importa que instalemos nada sobre React Native directamente, basta con que instalemos el CLI de Expo, lo que podemos hacer utilizando esta dependencia:

	npm install -g expo-cli

De esta forma se instalará en nuestro sistema todo el paquete Expo.

Una vez instalado, si utilizamos Mac, la propia compañía de Expo recomienda que instalemos Watchman. Aunque no es una condición necesaria, al estar recomendado no está de más instalarlo.

En nuestro caso lo vamos a instalar utilizando Brew, pero si no queréis hacer así también se puede instalar utilizando las otras alternativas que se ofrecen en la página de instalación de Watchman:

https://facebook.github.io/watchman/docs/install.html

De esta forma, el proyecto va a poder gestionar los ficheros que estamos utilizando o modificando de una manera más eficiente y con menos problemas.

Una vez finalice la instalación de Expo, lanzamos la siguiente acción para instalar Watchman desde Brew:

	brew install watchman

Creación del proyecto

Tras finalizar la instalación, vamos a empezar a crear nuestro proyecto, para lo que tenemos que acceder a la carpeta donde queremos que ese proyecto se cree. No importa que creemos esa carpeta manualmente, ya que la propia instrucción de inicialización del proyecto creará esa carpeta por nosotros.

Una vez estamos dentro de esa carpeta, vamos a inicializar nuestro proyecto, al cual vamos a llamar, por ejemplo, rn-expo, de esta forma:

	expo init rn-expo

Una vez lo ejecutamos, el sistema nos preguntará qué tipo de proyecto queremos crear:

Lo más normal es comenzar con un proyecto en blanco, ya sea con TypeScript o con JavaScript, según nuestra preferencia, pero para este ejemplo vamos a comenzar con un proyecto con ciertas cosas ya creadas, así podemos ver algo más visual, para lo que elegimos la opción tabs:

A continuación se nos solicita un nombre para el mismo, al cual llamaremos “RN-Expo”, por ejemplo.

Seguidamente nos pregunta si queremos utilizar Yarn, ya que en nuestro caso lo tenemos ya instalado en el sistema. En caso de no querer usar Yarn se puede utilizar npm, y en caso de no tenerlo instalado no lo preguntará.

No importa que instalemos alguna dependencia, ya que todo vendrá configurado por defecto.

Una vez finalizada vamos a abrir el editor código y ver cómo funciona y cómo lanzar la aplicación en ambas plataformas, en el emulador de iPhone y en el emulador de Android.

Una vez tenemos el proyecto cargado, nos muestra las opciones que tenemos para iniciarlo, pero antes vamos a abrirlo en el editor de código, que en nuestro caso es Visual Studio:

	code rn-expo

Inicialización del proyecto y práctica

Después volvemos a la terminal y vamos a iniciar el proyecto, tal y como se nos indicaba anteriormente:

	cd rn-expo
	yarn start

Esto lo que hace es abrir una pestaña de nuestro navegador, dónde vamos a tener la consola de administración de Expo, que nos va a permitir por un lado ver información sobre el estado de lo que está sucediendo, y por otro lanzar tanto a los simuladores como a elementos reales.

Por ejemplo, podemos mandar un enlace a nuestro correo electrónico y abrirlo desde un móvil, si tenemos instalada la aplicación de cliente de Expo.

Si estamos utilizando Android podemos directamente escanear el código QR que aparece, y, siempre y cuando tengamos conectado nuestro ordenador y esté funcionando, van a sincronizarse y podemos programar en tiempo real en un dispositivo real utilizando Expo.

Para comenzar la práctica vamos a seleccionar que se ejecute tanto en nuestro simulador de iOS (Run on iOS simulator), como en el emulador Android (Run on Android device/emulator). Veremos cómo empieza a descargarse la aplicación y comienza a abrirse en ambos sistemas operativos.

Una vez que se abra nuestro simulador podemos ver cómo empieza a gestionarse el código que necesita JavaScript para ambos terminales, y al finalizar vemos cómo se ha instalado la aplicación tanto en un emulador como en el otro.

Tenemos la misma pantalla en ambos dispositivos, con una serie de textos, una barra inferior para navegar entre los elementos:

Parece que los iconos son distintos, ya que no se nos permite tener pequeñas especificaciones de código diferente entre ambas plataformas, pero el funcionamiento general viene a ser el mismo en las dos plataformas.

Si volvemos a Visual Studio para ver el código que tenemos para nuestro proyecto, vemos que ya está preparado con todas las dependencias y las pantallas, con una serie de componentes ya creados que se han reutilizado desde nuestra aplicación, y una serie de constantes para colores y para la interfaz si

Para la navegación está configurado con React navigation, pero si optamos por instalación de un proyecto en blanco, no vendrá con ningún elemento de navegación instalado y se puede instalar React navigation o cualquier otro.

Dentro de las pantallas, por ejemplo, si nos vamos a HomeScreen, vemos que tenemos varios import y nuestro código utilizando el JSX de React Native, sin utilizar HTML.

Vamos a hacer unos cambios en ambas plataformas, y vamos a desactivar la opción Live Reload y activar la opción Hot Reloading en los dos simuladores.

Una vez hechos estos cambios vamos al código de la HomeScreen y vamos a cambiar, por ejemplo, el texto “Get started by opening” por cualquier otro, y al grabar los cambios podemos ver cómo ese texto se ha modificado en ambos terminarles virtuales.