Table of Contents

Bienvenido al proyecto SPINbyOXXO, este pequeño manual servirá como base para que tengas a la mano todo lo necesario para hacer un onboarding más rápido. 


Primero que nada el SO recomendado es MAC, sin embargo aquí pondré consideraciones para poder levantar el proyecto en Windows.

Cualquier duda puedes seguir la documentación oficial:

https://reactnative.dev/docs/environment-setup

Configuración general

Repositorio:

Para entrar al repositorio se debe acceder mediante la VPN de Oxxo.

VPN: https://ov.spinbyoxxo.com.mx/

Versión de node: 16.x.x

Versión de NPM: 8.x.x


Instalación de Android Studio:

Al momento se recomienda Android 10 (Q)*

MAC OS

Primero que nada se recomienda instalar:

ingresamos en la terminal: 

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Lo siguiente es ejecutar: 

  1. brew install node

  2. brew install watchman

Instalar el Java Development Kit

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

Entorno de desarrollo para Android

Instalación de Android Studio

Completar la instalación y asegurarse de seleccionar: 

  • Android SDK

  • Android SDK Platform

  • Android Virtual Device

Asegurarse de tener instalado Android SDK 10 (Q) mínimo. Esto se encuentra en: 

Appearance & BehaviorSystem SettingsAndroid SDK.


Validar que se tenga seleccionado: 

  • Android SDK Platform 29 (o mayor)

  • Intel x86 Atom_64 System Image o Google APIs Intel x86 Atom System Image

Configuración de variables de entorno.

NOTA: Validar qué terminal se está ejecutando, para esto podemos abrir una terminal local y ver en la parte superior. Para este caso tenemos zsh.

Una vez que identificamos la terminal que estamos ejecutando, modificamos o creamos el archivo .zshrc para añadir las siguientes variables de entorno


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

Estas variables también pueden ser agregadas al archivo .bash_profile

Guardar, despues ejecutar el comando source .bash_profile


NOTA: Puedes crear este archivo desde VS Code o con VIM. En caso de ser creado con VIM se necesita hacer source: 

source $HOME/.zprofile

Para validar que esté correctamente configurado podemos ejecutar: 

echo $ANDROID_HOME

Verificar que corra correctamente el emulador desde Android Studio. 

MICROSOFT WINDOWS


1.Node, JDK

choco install -y nodejs.install openjdk8 (instalar la versión 12.x.x de node js)


2.Instalación de Android Studio

Completar la instalación y asegurarse de seleccionar: 

  • Android SDK

  • Android SDK Platform

  • Android Virtual Device

Asegurarse de tener instalado Android SDK 10 (Q) mínimo. Esto se encuentra en: 

Appearance & BehaviorSystem SettingsAndroid SDK.

Validar que se tenga seleccionado: 

  • Android SDK Platform 29 (o mayor)

  • Intel x86 Atom_64 System Image o Google APIs Intel x86 Atom System Image

Posterior a la instalación de Android Studio.

Se debe agregar la variable de ambiente para el usuario

También se debe agregar platform-tools al Path

%LOCALAPPDATA%\Android\Sdk\platform-tools

Para validar que esté correcta la variable de entorno abrimos powershell y ejecutamos: 

  1. Copia y pega: Get-ChildItem -Path Env:\ en powershell

  2. valida que ANDROID_HOME se muestre

Agrega platform-tools al Path

  1.     Abrimos el panel de control de Windows

  2.     Hacer clic en User Accounts, Después en: User Accounts

  3.     Clic en Cambiar mis variables de entorno

  4.     Seleccionamos el PATH.

  5.     Clic editar.

  6.     Clic nuevo y agregamos el PATH de platform-tools a la lista.

La ubicación default es:

%LOCALAPPDATA%\Android\Sdk\platform-tools

Verificar que corra correctamente el emulador desde Android Studio. 


Creando la primer aplicación

Desde la terminal podemos ejecutar: npx react-native init AwesomeProject

Sigamos las instrucciones que van saliendo en la pantalla y si todo funciona correctamente se abrirá la pantalla de React Native con los dispositivos seleccionados en Android y iOS.


Errores comunes

  1. Versión de node y npm no soportadas

  2. Problema con watchman de manera que no se ejecuta metro

  3. Problema con el build de iOS.

  4. Problema con pods en iOS.