Primeros pasos con React Native

14/06/2017
|Por Yoné Rocha

Última actualización: 16/05/2023

En este artículo, exploraremos dos métodos para crear una app con React Native, centrándonos en el entorno de macOS. Sin embargo, es importante destacar que el proceso es bastante similar en otros sistemas operativos.

Dependencias mínimas en macOS

Shell
1
2
3
brew install node
brew install watchman
xcode-select --install

Si tenemos la versión de Ruby distribuida con el sistema, se recomienda instalar rbenv y poner un archivo .ruby-version en la raíz del proyecto RN. En el caso de RN 0.71.4 corresponde Ruby 2.7.6.

Shell
1
2
ruby --version
brew install rbenv ruby-build

1. Proyecto con Expo Go

Es un método sencillo para empezar un proyecto React Native, no es necesario tener Xcode o Android Studio, ya que se ejecuta nuestra app en un entorno llamado Expo Go, que cuenta con las APIs más comunes de iOS y Android.

  • Crear nuestra primera aplicación:
    Shell
    1
    npx create-expo-app HelloWorldReactNative
  • Iniciar el servidor de desarrollo para nuestra app:
    Shell
    1
    2
    cd HelloWorldReactNative
    npx expo start #Genera un código qr y dirección para conectarnos desde el dispositivo, explicado en el siguiente paso
  • Instalar app Expo en nuestro dispositivo Android o iOS. Escaneamos el código qr o introducir la url en Expo para mostrar la app en el dispositivo.
  • Si queremos lanzar la app en el dispositivo virtual de Android, en una máquina virtual Genymotion o en el simulador de iOS, se entiende que se ha instalado Xcode y/o Android Studio:
    Shell
    1
    2
    npm run android
    npm run ios

2. Proyecto con código nativo usando React Native CLI

Con este método tendremos nuestro código React acompañado del proyecto nativo en Xcode para iOS y/o en Java para Android. Pudiendo acceder a estos como cualquier app nativa. Muy similar a como podemos trabajar en Xamarin, con Xamarin Forms y código nativo.

2.1. Preparar el entorno de trabajo

  • Instalar Xcode y/o Android Studio.
  • En el caso de Android Studio:
    • Instalar el Android SDK y crear un dispositivo en Android Studio.
    • Definir las variables de entorno en ~/.zshrc:
      Shell
      1
      2
      3
      export ANDROID_HOME=$HOME/Library/Android/sdk
      export PATH=$PATH:$ANDROID_HOME/tools
      export PATH=$PATH:$ANDROID_HOME/platform-tools
    • Instalar Java Development Kit:
      Shell
      1
      2
      brew tap homebrew/cask-versions
      brew install --cask zulu11
  • Instalar Node.js y Watchman, como expliqué al inicio del artículo.

2.2. Pasos a seguir para crear un nuevo proyecto

  • Crear nuestra primera aplicación con código nativo:
    Shell
    1
    npx react-native init HelloWorldReactNativeWithNativeCode
  • Iniciar el servidor de desarrollo para nuestra app:
    Shell
    1
    2
    3
    4
    5
    cd HelloWorldReactNativeWithNativeCode
    npx react-native run-ios #Ejecutar en simulador iOS
    # ó
    npx react-native run-android #Ejecutar en dispositivo virtual Android o en una máquina virtual Genymotion (Preferible esto último por rendimiento)
    # Si es Genymotion, iniciar máquina virtual antes de ejecutar este comando
  • Configurar ESLint en nuestro proyecto.
  • Instalar dependencias en iOS con CocoaPods
    Shell
    1
    cd ios && pod install && cd ..

    Si al realizar la compilación de iOS, los Pods generan algún error, puedes solucionarlo eliminando la línea correspondiente a los Pods en el archivo del proyecto Xcode. Para ello, debes acceder a la pestaña “Target” -> “Build Phases” -> “Copy Pods Resources” -> “Remove Ouput Files” y eliminar los archivos de salida relacionados con los Pods.

3. Tips

3.0. Limpiar caches

  • Shell
    1
    npx react-native start --reset-cache
  • Xcode -> Product -> Clean Build Folder
  • Android Studio -> Build -> Clean Project

3.1. Opciones en dispositivo/Simulador

  • En iOS:
    • Recargar app con los cambios realizados en el código fuente: Cmd + r
    • Menú de desarrollo: Cmd + d
  • En Android:
    • Recargar app: Pulsar dos veces la tecla R, si estamos en emulador, o desde el menú de desarrollo en el dispositivo físico.
    • Menú de de desarrollo: Botón menú del dispositivo.

3.2. Migrar desde Create React Native App a un proyecto con código nativo

El siguiente comando funciona de manera similar a react-native init, creando el proyecto nativo para iOS y Android:

Shell
1
npm run eject

3.3. Ejecutar en dispositivo físico

Sólo es posible ejecutar en dispositivos físicos con proyectos React Native con código nativo.

En Android:

  • Activar modo depuración en el dispositivo: Ajustes -> Información del teléfono -> Número de compilación (Pulsar 7 veces).
  • Ir a Opciones de desarrollador -> Depuración por USB (Activar).
  • En el caso de de tener un dispositivo MI (MIUI) desactivar “Activar optimización MIUI” en Opciones de desarrollo. Si está activo no se instalará nuestra app.
  • Conectar el dispositivo por USB al ordenador.
  • Ejecutar el comando react-native run-android.

En iOS, el método es igual que con una app nativa:

  • Abrir el .xcworkspace de nuestro proyecto iOS.
  • Configurar la firma del código con nuestro Apple Developer.
  • Seleccionar el dispositivo físico y ejecutar.

3.4. Activar App Transport Security para iOS

En el caso de que usemos servicios, como API REST, debemos indicar el dominio en el info.plist de nuestro proyecto Xcode:

1
2
3
4
5
6
7
8
9
10
11
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>mi_dominio.com</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>

Si necesitáramos permitir cualquier dominio, sería así (No es lo recomendable):

1
2
3
4
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key><true/>
</dict>

3.5. Incluir tipografías personalizadas

  1. Añadir las tipografías que vayamos a usar al directorio /assets/fonts/. Si no existiera lo creamos.
  2. Editar el archivo package.json añadiendo las siguientes líneas a la raíz del JSON:
    Shell
    1
    2
    3
    4
    5
    "rnpm": {
        "assets": [
          "./assets/fonts/"
        ]
      }
  3. Ejecutar, en la Terminal, el siguiente comando:
    Shell
    1
    react-native link
  4.  Ya podríamos usar las tipografías en React Native. Podemos comprobar que se han añadido al info.plist de iOS  y en /app/src/main/assets/fonts para Android.

3.6. Generar APK (Android)

Instalar en el dispositivo para debug:

  1. Conectar, por USB al ordenador, el dispositivo con la depuración USB habilitada.
  2. react-native run-android

APK/AAB firmado (Signed realease):

  1. Hacer los pasos que indica la documentación oficial para firmar un APK.
  2. Existen diversas opciones para compilar un APK, según su destino..
    • Paquete AAB para publicar en Google Play:
      Shell
      1
      cd android && ./gradlew bundleRelease
    • APK para probar una compilación de lanzamiento en un dispositivo, si está el dispositivo físico conectado se instala directamente:
      Shell
      1
      cd android && ./gradlew installRelease
    • APK para compartir con otras personas:
      Shell
      1
      cd android && ./gradlew assembleRelease

Guías oficiales para publicar en Apple App Store y Google Play Store
Fuentes consultadas: React Native Getting Started Guide, Running on device

macOS Node.js React Native Xcode