Tu primera aplicación con React Native

Hola, hola! Es una pena no haber tenido la oportunidad de manejar React Native CLI, pero de todas maneras creo que es una buena manera de poder iniciar en este tipo de Desarrollo (tomando en cuenta que Expo SDK ha recibido buenas actualizaciones últimamente).

Para quienes ya hayan manejado React Native CLI y Expo, pues las diferencias serían las siguientes:

REACT NATIVE CLI:

Genera un proyecto con lo mínimo necesario para poder correr una App con la configuración de Android y iOS abierta.

Contiene el proyecto de Android y iOS de manera independiente con la opción de poder escribir código nativo para cada plataforma.

Se necesita una Mac para el caso del control de iOS y dependencias (POD INSTALL) con Xcode.

EXPO CLI

1. En expo no existen las carpetas de Android y iOS ya que el SDK se encarga de hacer los builds necesarios para cada plataforma.

2. Puedes utilizar un template ya hecho sin necesidad de crear todo desde cero como pasa en RN CLI.

3. Puedes correr tu proyecto sin necesidad de un $npx react-native run-android/ios. => Expo tiene un ambiente súper interesante para correr apps en un sitio web con Expo Snack o en su aplicativo móvil con Expo Go.

***RESUMEN: Si su proyecto necesita manejar un performance más dedicado, lo mejor es utilizar RN CLI, pero si solo quieren probar la herramienta y no manipular algúna librería, comportamiento, engine, etc; pues lo mejor es utilizar RN Expo.

Tuve problemas para instalar expo cli. Se había instalado bien pero no reconocía el comando para consultar la versión.
Entonces, abrí la línea de comando e ingresé:
'yarn global bin’
Y apareció una ruta, copié la ruta del archivo bin.

Luego ir a Propiedades> Configuración avanzada del sistema> Avanzado> Variables de entorno

Seleccionar el entorno Path, darle a editar y crear una nueva variable y pegarle la ruta.
Aceptar, aceptar y reiniciar la consola de comando. Ahora sí te reconocerá el comando para consultarla versión

Qué pena que no hayan usado React Native CLI !

Una verdadera Joya que éste curso sea con Expo!
De cualquier manera el otro curso de Introducción a React Native 2019, ocupan React Native CLI y iOS.

Me gustaría saber por que no usan React Native CLI ?

¡El curso será con expo! 😱 yo pensaba que sería con el CLI

Si estás en mac y no te funciona el comando expo --version al instalar:

• Revisa si en el PATH está “.npm-global/bin”

Para saberlo, ejecuta el siguente comando en la consola:

echo $PATH

• Si no está, debes agregarlo desde el archivo .bash_profile, de la siguiente manera (Yo uso nano, tu puedes usar VIM si deseas)

nano ~/.bash_profile

• Una vez abierto el archivo, agrega la siguiente línea al final.

export PATH=$PATH:~/.npm-global/bin

• Finalmente, para cargarlo, ejecuta esta última línea en tu consola:

source ~/.bash_profile

Ya podrás ejecutar los comandos de expo.
Si algo de esto te suena muy intimidante, podrías pasarte por el curso de Terminal

Me hubiera gustado que hayan usado React Native CLI 😦

Pienso que en este cursos no usan React Native CLI, para simplificar la instalacion, ya que mucha gente se pierde cuando tiene que configurar JAVA y las variables de entorno globales como lo es el SDK de android studio.
Igualmente no esta de mas que se haga un curso avanzado donde se haga esta configuracion en todas las plataformas (Linux, Windows y Mac) para que no se pierdan.

Pasos para iniciar tu primer proyecto

Instalar gestor de dependencias yarn https://yarnpkg.com/getting-started/install

npm i -g yarn

Instalar herramienta de linea de comandos expo https://reactnative.dev/docs/environment-setup

yarn global add expo-cli

verificamos la instalación:

expo --version
expo-cli --version

crear proyecto react native

expo init myFirstProject

Para aquellos que tengan el siguiente error:

"No se puede cargar el archivo C:\Users\root\AppData\Roaming\npm\expo.ps1 porque la ejecución de scripts está deshabilitada en este sistema."

Podremos solucionarlo con solo cambiar la directiva de ejecución “Restricted” que viene por defecto en PowerShell.

Para ello debemos iniciar la terminal de comando como ADMINISTRADOR. Y luego ejecutar el siguiente comando:

""Set-ExecutionPolicy RemoteSigned""

De esta forma cualquier paquete que ejecute un script (como expo). Podrá hacerlo siempre y cuando sea un archivo de fuente confiable.

Ahora probamos el comando:

"expo --version"

Podremos ver numero de la versión de Expo. (En mi caso 5.0.1)

Ya tenemos el problema solucionado. ✅

¡Hola! Espero que mi aporte sea de mucho valor para aquellos que después de instalar en Mac:

yarn global add expo-cli

Y al verificar si expo se instaló correctamente ejecutando: expo --version; resulta que yo ejecutaba estos comandos desde iTerm2, pero volví a hacer la instalación global ahora desde la terminal por defecto del sistema y al final me funcionó de maravilla.

Si tu directiva esta bloqueda en win, usa el sig commmand en powershell como admin: Set-ExecutionPolicy RemoteSigned

Si no quereis tener instalado Node y/o Expo para usar React Native, os comparto mi Dockerfile.

FROM node:16.13.2-alpine

WORKDIR /usr/src/app

COPY . .

RUN npm install --global expo-cli

EXPOSE 19006

Y luego para usarlo hay que crear la imagen con:

docker build -t expo:16.13.2-alpine .

Y usar crear el contenedor con:

docker run --rm
-p 19006:19006
-v $(PWD):/app
-w /app
-it expo:16.13.2-alpine bash

Podéis sustituir bash por comando npm y funcionará.