react-native configurando entorno 2023

Configurar entorno de desarrollo para react native en 2023 para mac-os catalina

React native es una maravilla, pero solo si ya tienes el ambiente configurado, se hace un poco dificil crear un proyecto y que corra a la primera por lo granulado que es esta plataforma. Pero esta aguia nos ayudara a Instalar ReactNative mac-os catalina sin problemas.

En esta guia no vamos a usar brew (para todo) por la cantidad de dependencias que instala para instalar cualquier cosa.

Instalar Xcode:

https://developer.apple.com/download/all/?q=xcode

Y buscar xcode 12.4 (Que es la version mas alta que es soportada por mac os catalina 10.15.x)

Una vez instalado ejecutar el siguiente comando, para selecionar xcode en la terminal:

sudo xcode-select --switch /Applications/Xcode.app

Instalar Node:

https://nodejs.org/en/download
Version LTS 20.10

Instalar watchman:
Para este paquete vamos a instalar https://www.macports.org/ y utilizarlo para instalar watchman.

Instalar macports
https://www.macports.org/install.php

Instalar watchman

sudo port install watchman

brew:

https://brew.sh/

rbenv:

brew install rbenv

Actualizar version de Ruby:
Para este paso si utilizaremos brew para este paso:

Instalar ruby 3.1.4:

rbenv install 3.1.4 rbenv iglobal 3.1.4

Una vez instalado ruby 3.1.4 agregar el siguiente contenido a tu archivo .bash_profile.sh

eval "$(rbenv init - zsh)"

Para verificar que se instalo bien ejecutar:

ruby --version

Luego de instalado rbenv vamos a instalar cocoapods:
sudo gem install cocoapods o gem install cocoapods –user-install si no tienen acceso a root.

React Native:

Para continuar con react-native debemos ejecutar el siguiente comando para evitar posibles errores:

npm uninstall -g react-native-cli @react-native-community/cli

Creando projecto con react-native:

npx react-native init test-project --version 0.70

Luego de crear el proyecto abrir el archivo react-native.conf.js:
Eliminar la opcion automaticPodsInstalation

Podemos ejecutar un npm install en el root del proyecto y pod install en la carpeta ios. Luego ejecutar npm run ios y el proyecto debera correr sin problemas.

proyecto react-native corriendo en ios

Con dicha version y la instalación correcta funciona bien a la primera.

Android:

brew install --cask zulu11

Para poder tener emuladores y poder probar con android el siguiente stack me funciona bien.

Android Studio: 4.0.1 (https://developer.android.com/studio/archive)

Yo pude instalar la version 2022.3.1 y funciono sin problemas, pero al iniciar el emulador me da error al iniciar.

Android studio una vez instalado vamos a abrir android studio y crear un emulador (avd) y tratar de iniciarlo, si da error al iniciar ejecutar los siguientes pasos:

error iniciando emulador android

Intentar ejecutar el simulador desde la terminal:

Primero listar todos los emuladores:

emulator -list-avds

De la lista copiaremos el id del emulador que queremos ejecutar:

emulador -avd nombre-emulador

si realizamos estos y falla con este error:

dyld: Symbol not found: _vmnet_enable_isolation_key
  Referenced from: /Users/userName/Library/Android/sdk/emulator/qemu/darwin-x86_64/qemu-system-x86_64 (which was built for Mac OS X 11.1)
  Expected in: /System/Library/Frameworks/vmnet.framework/Versions/A/vmnet
 in /Users/userName/Library/Android/sdk/emulator/qemu/darwin-x86_64/qemu-system-x86_64

Si prestamos atencion al error nos dice cual es el error, dicho emulador fue compilado para una version superior a la que estamos usando, en mi caso tengo 10.15 y ese emulador es para la 11.1 por lo que es entendible que algo pueda fallar, en este caso _vmnet_enable_isolation_key no fue encontrado.

Iremos a https://developer.android.com/studio/emulator_archive y vamos a descargar la version Android Emulator (31.2.10)

https://developer.android.com/studio/emulator_archive
https://redirector.gvt1.com/edgedl/android/repository/emulator-darwin_x64-8420304.zip
(Coloco la url por si en algun momento dejan de listar esa version, pero primero entrar a la pagina de android y buscarlo ahi primero)

Una vez descargado vamos a descomprimir el contenido y copiar la carpeta completa en la carpeta donde se encuentra instalado su android sdk. Puede ir directo a android studio y ver la ruta o buscar su variable ANDROID_HOME para ver la dirección.

echo $ANDROID_HOME

Abrir dicha dirección y copiar la carpeta completa de emulator que fue el resultado de descomprimir lo descargado.

Una vez hecho esto, intentar levantar el emulador nuevamente.

emulador -avd enumator-name

Con el comando anterior deberia iniciar el emulador, si es asi, podremos correr nuestra aplicación react-native:

npm run android

A desahogo personal me parece mal que un sistema con solo 3-4 años de antiguedad y muchos software ya dejaron el soporte de este, que no esta mal, pero esa velocidad que utiliza apple para deprecar cosas y siempre utilizar las nuevas cosas (que no son compatibles con las anteriores) y forzar a que tengamos que instalar/comprar nuevas cosas, Viva Linux en ese sentido.