Configuración de un proyecto de Expo
Expo es una librería basada en React Native que te permite escribir simultáneamente código para iOS y Android con un gran número de componentes disponibles que hace la tarea de escribir una aplicación mucho más sencilla. También provee de múltiples herramientas como Expo Go, el cual está integrado tanto en el emulador de iOS como de Android así como en un móvil físico para poder desarrollar y probar la aplicación al mismo tiempo. Expo también dispone de facilidades para poder compilar la aplicación pero eso lo dejaremos para más adelante.
expo
Configurar un proyecto de expo por primera vez quizá no sea una tarea sencilla si no estas acostumbrado a usar multiples librerías y componentes al mismo tiempo. Por eso el objetivo del post de hoy es facilitar el trabajo a todos aquellos que quieren crear su primera aplicación. Vamos a configurar primero los emuladores de android o ios para después poder crear y lanzar el proyecto de expo.
Programas necesarios
Lo primero que hay que instalar es node.js mediante el siguiente enlace node.js
Una vez instalado node podremos instalar yarn ejecutando
npm install --global yarn
Si estas en dispositivo Windows antes de poder instalar expo-cli deberás reiniciar el ordenador, también te recomiendo que instales la nueva consola PowerShell desde la tienda de aplicaciones y recuerda ejecutarla siempre como administrador.
Finalmente vamos a instalar expo mediante el comando
yarn global add install expo-cli
Configurando android emulator
El primer paso es bajarse e instalar Android Studio desde la página de developers de Android. Android Studio
En el proceso de instalación te recomiendo instalar directamente los siguientes paquetes pues van a ser necesarios a la hora de lanzar el emulador.
- Android Emulator
- Android SDK Build-Tools
- Android SDK Platform-Tools
- Intel x86 Emulator Accelerator (HAXM installer)
Vamos a agregar un emulador desde el apartado de More Actions pulsando en AVD Manager 1. Create Virtual Device 2. Select Device 3. Select a system image
Finalmente vamos a configurar la variable de entorno el sistema para poder lanzar el emulador desde la terminal, este paso es opcional pero si vas a trabajar de manera habitual en el proyecto es más que recomendable para tu salud mental.
Buscamos la variables de entorno y añadimos en el apartado Path la siguiente ruta
C://Users/[Your username]/AppData/Local/Android/Sdk/emulator
Ya podremos lanzar el emulador ejecutando el siguiente comando desde la terminal
emulator -avd [Emulator name]
Si no estas seguro de que nombre has puesto al emulador puedes ejecutar
emulator -list-avds
Si no has querido configurar la variable de entorno puedes iniciar el emulador en Android Studio desde AVD Manager en el apartado de More Actions pulsando el botón de play.
Si estas en un dispositivo Windows es probable que tengas que activar la Plataforma de hipervisión de Windows desde el Panel de Control buscando activar o desactivar las características de Windows.
Configurando ios emulator
Para probar la aplicación en el emulador de iOS es necesario utilizar un Mac. El emulador de iOS forma parte del programa Xcode que puede ser descargado desde la Mac App Store de forma gratuita.
Crear el proyecto
Una vez conseguido instalar todo lo necesario llega el momento de poder crear el proyecto ejecutando el siguiente comando y seleccionando la opción blank
expo init [your app name]
Finalmente entramos dentro del directorio y ejecutamos para lanzar el proyecto:
expo start
Se ta abrirá una página web, selecciona Local en el apartado de Connection y pulsa en Run on Android/iOS simulator según lo que hayas querido configurar.
Si no se ha abierto tu navegador directamente puedes pulsar a en la terminal para abrir android emulator o i para ios emulator.
Usando un dispositivo físico
En el caso de que el emulador no te convenza siempre puedes usar un dispositivo físico para ver el desarrollo de la aplicación descargando expo go desde tu dispositivo Android o iOS. Una vez cambiado en el apartado Connection de Local a Tunnel podrás escanear el código QR desde tu dispositivo.
