tutz

Instalación de React Native en Mac para Android

En esta oportunidad vamos a aprender como instalar React Native en Mac para trabajar aplicaciones en Android.

Vamos a ir paso a paso instalando todo lo necesario hasta al final llegar a correr nuestra primera App en Android.

Instalación de dependencias

Para empezar necesitamos tener instalado Node, Watchman, línea de comando de React Native, JDK y Android Studio.

Node y Watchman

La guía oficial de React Native recomienda usar Homebrew para instalar Node y Watchman. Una vez que tengas instalado Homebrew puedes ir a la terminal y correr los siguientes comandos.

brew install node
brew install watchman

Nota: Si ya tienes instalado Node en tu equipo, asegurate tener instalado la versión 8.3 o superior.

Java Development Kit

Así como con Node y Watchman, la guía oficial recomienda usar Homebrew, para instalar el JDK corre los siguientes comandos desde la terminal.

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

Nota: Si ya tienes instalado JDK en tu equipo, asegurate tener la versión 8 o posterior.\

Entorno de desarrollo en Android

Si eres nuevo en Android quizás te sientes un poco pesado con todos estos pasos, pero son los necesarios para que tengas corriendo tu primera App en Android.

Instalación de Android Studio

Primero debes descargar e instalar Android Studio. Cuando te pida selecciona el tipo de instalación elige instalación Custom y asegurate seleccionar los siguientes cuadros:

  • Android SDK
  • Android SDK Platform
  • Perfomance (Intel HAXM)
  • Android Virtual Device
  • Luego le das en siguiente para instalar los componentes seleccionados.

    Instalación de Android SDK

    Por defecto Android Studio instala último SDK disponible. Si deseas instalar un SDK en especial puedes hacerlo desde el administrador de SDKs.

    Para ingresar al Administrador, en la pantalla de bienvenida vas a seleccionar Configure y luego SDK Manager.

    Luego selecciona “SDK Platforms” y haz check en “Show Package Details” que se encuentra en la parte inferior derecha.

    Una vez expandido toda la información asegurate tener instalado en Android 9 (Pie) los siguiente items.

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image Luego selecciona “SDK Tools” y nuevamente haz check en “Show Package Details” y asegurate tener seleccionado 28.0.3 en “Android SDK Build-Tools”.
  • Por último dale en Apply y esto descargara e instalara el SDK y las herramientas necesarias.

    Configura el entorno de variable ANDROID_HOME

    Las herramientas de React Native requiere que algunas variables de entorno esten establecidas para construir apps con código nativo.

    Así que debes agregar las siguientes líneas a tu $HOME/.bash_profile o $HOME/.bashrc.

    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools

    Creando una nueva aplicación

    React Native tiene una linea de interfaz de comandos que puedes usar para generar un nuevo proyecto. Puedes hacer uso de esta sin instalarlo globalmente, solo usando npx.

    Corre el siguiente comando

    npx react-native init NombreApp

    Cambia NombreApp por el nombre que quieres darle a tu aplicación. Con esto ya tienes tu primera App en React Native.

    Corre tu primera App Android en React Native

    cd NombreApp
    npx react-native run-android

    Ahora puedes ir a App.js y modificar cualquier linea y vers tus cambios, para esto debes teclear dos veces seguidas R o seleccionar Reload desde el Menu (⌘M).

    Espero que hayas disfrutado de este tutorial paso a paso para poder trabajar Aplicaciones en Android con React Native.