Cómo configurar Expo (React Native) para usuarios de Mac

Una guía introductoria para crear una aplicación en React Native utilizando Expo

Expo es una framework para aplicaciones universales de React. Consiste en un conjunto de herramientas y servicios construidos alrededor de React Native y plataformas nativas que nos ayudan a desarrollar, construir rápidamente apps en iOS, Android y aplicaciones web desde el mismo JavaScript, todo sin tocar el código nativo. También permite crear los bundles para una producción muy rápida.

Lo primero que necesitamos es instalar Node.js y Watchman (recomendado) con los siguientes comandos:

brew install node
brew install watchman

Crear nuestro primer proyecto con Expo

Para continuar con la instalación de Expo, abrimos un terminal y ejecutamos lo siguiente:

npm install -g expo-cli

Luego pasamos a crear nuestro proyecto con Expo que nos servirá de ejemplo:

expo init react-native-example

Veremos que aparecen tres opciones. Elegimos la primera de ellas para crear un proyecto vacío (blank). Cuando termine de crear el proyecto, hacemos cd react-native-example y levantamos nuestro proyecto con npm run start.

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

• Para Android: Android Studio en Windows, Linux o Mac.
• Para iPhone: desde un ordenador con macOS instalado.

Si queremos utilizar un dispositivo físico podemos entrar en App Store o Google Play y instalar una aplicación llamada Expo Go, así podremos ejecutar nuestro proyecto creado con Expo dentro de nuestro dispositivo. Solo basta con abrir la cámara de nuestro teléfono y escanear el código QR que se muestra cuando iniciemos nuestro proyecto con Expo.

Al ejecutar npm run start se abrirá una nueva pestaña en el browser que es la consola de Expo desde donde podremos levantar nuestro proyecto en el emulador Android, iOS o web o escaneando el código QR desde nuestro dispositivo físico, el cual nos preguntará para ejecutar el proyecto en la aplicación de Expo Go. No necesitamos instalar alguna dependencia, ya que todo vendrá configurado por defecto.

Abrimos Visual Studio Code (o nuestro IDE favorito) y podemos ver que se han creado las siguientes carpetas y archivos:

¡Ya podemos empezar a escribir nuestra aplicación en React Native!