Guía Definitiva para Configurar React Native en Linux

React Native es una de las herramientas más populares para desarrollar aplicaciones móviles multiplataforma. En esta guía, aprenderás a configurar tu entorno de desarrollo en Linux de manera sistemática y efectiva para empezar a programar en React Native. Además, se incluyen instrucciones específicas para usuarios de Fish shell.

Paso 1: Descargar e Instalar Android Studio

a. Descarga Android Studio

Puedes descargar Android Studio directamente desde el siguiente enlace:
Android Studio 2024.2.1.12 para Linux.

b. Instalación desde el Centro de Software

Otra opción es instalar Android Studio desde el Centro de Software de Ubuntu. Simplemente busca “Android Studio” e instálalo.

c. Configura Android Studio

1. Descomprime el archivo descargado:

   tar -xvf android-studio-2024.2.1.12-linux.tar.gz
   

   Luego, mueve la carpeta a /opt (opcional):

   sudo mv android-studio /opt/
   

2. Inicia Android Studio:

   /opt/android-studio/bin/studio.sh
   

3. Sigue el asistente para completar la configuración inicial y descarga las herramientas necesarias para la emulación de Android.

Paso 2: Instalar Node.js y npm

React Native requiere Node.js y npm para manejar las dependencias.

a. Verifica si Node.js y npm están instalados:

node -v
npm -v

Si no están instalados o necesitas una versión más reciente, instálalos:

b. Instalación de Node.js y npm:

1. Agrega el repositorio oficial:

   curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
   

2. Instala Node.js y npm:

   sudo apt install -y nodejs
   

3. Verifica las versiones:

   node -v
   npm -v
   

Paso 3: Configurar Variables de Entorno

Es necesario configurar las variables de entorno ANDROID_HOME y JAVA_HOME para que React Native pueda interactuar con Android Studio y Java correctamente.

Si estás usando Bash/Zsh

a. Configurar ANDROID_HOME

1. Encuentra la ruta de las herramientas de Android SDK, normalmente:

   ~/Android/Sdk
   

2. Edita el archivo ~/.bashrc o ~/.zshrc:

   nano ~/.bashrc
   

3. Agrega las siguientes líneas:

   export ANDROID_HOME=$HOME/Android/Sdk
   export PATH=$PATH:$ANDROID_HOME/emulator
   export PATH=$PATH:$ANDROID_HOME/platform-tools
   

4. Aplica los cambios:

   source ~/.bashrc
   

b. Configurar JAVA_HOME

1. Instala OpenJDK 17 (recomendado para React Native):

   sudo apt update
   sudo apt install openjdk-17-jdk
   

2. Encuentra la ruta de Java 17:

   sudo update-alternatives --config java
   

   Anota algo como:

   /usr/lib/jvm/java-17-openjdk-amd64

3. Configura JAVA_HOME editando ~/.bashrc:

   nano ~/.bashrc
   

   Agrega:

   export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64
   export PATH=$JAVA_HOME/bin:$PATH
   

4. Aplica los cambios:

   source ~/.bashrc
   

5. Verifica la configuración:

   echo $JAVA_HOME
   

Si estás usando Fish shell

a. Configurar ANDROID_HOME en Fish

1. Abre el archivo de configuración de Fish:

   nano ~/.config/fish/config.fish

2. Agrega las siguientes líneas:

   set -Ux ANDROID_HOME $HOME/Android/Sdk
   set -Ux PATH $ANDROID_HOME/emulator $ANDROID_HOME/tools $ANDROID_HOME/tools/bin $ANDROID_HOME/platform-tools $PATH

3. Guarda y recarga la configuración:

   source ~/.config/fish/config.fish

4. Verifica que la variable esté configurada correctamente:

   echo $ANDROID_HOME

b. Configurar JAVA_HOME en Fish

1. Instala OpenJDK 17:

   sudo apt update
   sudo apt install openjdk-17-jdk
   

2. Encuentra la ruta de Java 17:

   sudo update-alternatives --config java
   

   Anota algo como:

   /usr/lib/jvm/java-17-openjdk-amd64

3. Configura JAVA_HOME en Fish:

   set -Ux JAVA_HOME /usr/lib/jvm/java-17-openjdk-amd64
   set -Ux PATH $JAVA_HOME/bin $PATH

4. Verifica que esté configurado correctamente:

   echo $JAVA_HOME

Paso 4: Probar el Entorno

1. Instala el CLI de React Native:

   npm install -g react-native-cli
   

2. Crea un proyecto:

   npx @react-native-community/cli init MiProyecto
   

3. Ejecuta la aplicación:

   cd MyFirstApp
   npx react-native run-android
   

Si todo está configurado correctamente, deberías ver tu aplicación ejecutándose en el emulador o en un dispositivo conectado.