Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Curso de React Native CLI

Curso de React Native CLI

Alejandro Sanabria

Alejandro Sanabria

Configuración de la navegación en react native

5/22
Recursos

Dependencias a instalar:

npm install @react-navigation/native @react-navigation/stack npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Aportes 67

Preguntas 18

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Hola Devs:
-No se me desesperen los que usen Linux y Windows.
Pueden correr la App segun la documentacion official, de esta manera.

  1. Abren un terminal, entra a la carpeta del proyecto y ejecutan: npx react-native start
  2. Abren otra terminal, entra a la carpeta del proyecto y ejecutan: npx react-native run-android

Y listo, el primero comando es para correr la app y el segundo para correrla en el emulador de android.

y la explicacion en windows que?

ammm… y para Windows? simplemente se olvidan? hacer npm run android en windows está dando muchisimos fallos pero por lo que veo no van a explicar ese tema /:

Para los que usamos windows, hay errores en algunas dependencias. Pueden realizar las instalaciones de esta manera y con las dependencias actualizadas:

  • npm install @react-navigation/native
  • npm install @react-navigation/[email protected] --legacy-peer-deps
  • npm install react-native-reanimated
  • npm install react-native-gesture-handler
  • npm install react-native-screens
  • npm install react-native-safe-area-context
  • npm install @react-native-masked-view/masked-view

Me salio este error y mi applicacion no se veina:
null is not an object (evaluating ‘_RNGestureHandlerModule.default.Direction’)

Causado por el import in index.js

import 'react-native-gesture-handler'

Utilize este comando en consola y solucionado:

react-native link react-native-gesture-handler

Realmente es lamentable. Parece que Platzi no esta haciendo buen control de calidad de los cursos que se publican y tampoco escucha los reclamos. Se supone que pagamos para que llevar adelante las clases con mas facilidad usando videos. Muestran en texto como instalar en Windows, un texto desactualizado, pero a la hora de hacer correr la app solo lo hacen en Mac. En Windows da muchos errores, no se puede emular y hay que terminar recurriendo a otras paginas para tratar de solucionar los errores. Decepcionado totalmente.

Para los más extremos que nos gusta ir al contrario.
Usando Yarn y agregando navegación extra (el último paso del npx es para que no de error de los pod)


yarn add @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

npx pod-install ios

si deseas tener una navegación tipo drawer o como es el menú lateral en ANDROID no olvides instalar este paquete

yarn add @react-navigation/drawer

al final del vídeo hay un error de edición. Ya me ha pasado sobretodo con los últimos cursos que están lanzando. Ojo con eso

<code>
comparto las dependencias ainstalar
npm i @react-navigation/native @react-navigation/stack

npm i react-native-reanimated react-native-gesture react-native-screens react-native-safe-area-context @react-native-community/masked-view

Tengo este error al compilar en Android, alguien tuvo este error? tengo semanas sin poder encontrar una solucion, espero puedan ayudarme, Gracias!

React Navigation

Nos permite el enrutamiento y navegación para sus aplicaciones React Native,

  1. Fácil de utilizar
  2. Completamente personalizable
  3. Basado 100% en navegación de Android e IOS

Sitio Web de React Navigation

Importante: También es compatible con Expo

Gracias profesor

y windows que??? uso “npm run android” y tras 1000 errores nada arranca alli que? y como se despliega correcament eel emulador???

Mi procesador es AMD con Windows, por lo que tuve varios problemas con la ejecución del emulador así que pueden seguir los siguientes pasos para solucionar este problema:

  1. Descargar el driver que necesitan para procesadores AMD este se encuentra en la carpeta gvm-windows_v1_7_0.zip de este link

  2. En este video se describe el proceso de instalación del driver

  3. En mi caso no pude deshabilitar Hyper- V hasta que seguí los pasos de este issue

  4. Finalmente continué con el video y por fin pude ejecutar el emulador de Android Studio

En esta clase no explica como correr la APP en Android. Claramente correr la App para iOS es muy sencillo porque no hay mucho que se deba configurar ademas de la guia que ya subieron. Pero me consegui con varios problemas al momento de correr la App en Android.

  1. Agrega las variables al bash_profile o bashrc, en mi caso usé estas:
export ANDROID_HOME="$HOME/Android/Sdk"
export PATH="$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH"

Esta variable es la que (en mi caso) hizo funcionar el emulador corriendo la app con npm run android (o npx react-native run-android)

export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"
  1. Cuando hayas agregado las variables al bash_profile o bashrc recuerda usar este comando:
source $HOME/.bash_profile 

y luego solo para verificar que haya quedado bien usa este

echo $ANDROID_HOME 

te deberia salir en la consola la rutas que acabas de agregar (/Users/xxxxxx/Library/Android/sdk)
3. Abre el Android Studio e inicia un emulador a ver que todo este bien
4. Y por ultimo corre la app usando **npm run android ** o npx react-native run-android

Espero les sirve, les dejo captura de la app corriendo en sus respectivos emuladores

¿Que significa que la app haga bootsstrap?

MAC:
Me había salido un error en el emulador de ios al momento de correr. Lo solucioné corriendo las dependencias que se encuentran en recursos y después correr el

npm run ios.

Hola compis,
les dejo mi experiencia en linux,
una vez creado el proyecto una vez dentro del proyecto, ingresan en su carpeta android
luego crean un archivo llamado local.properties al cual le escribirán sdk.dir = /home/USUARIO/Android/Sdk o la dirección personal donde tienen ese sdk,
luego npx react-native run-android , abren el android studio buscan configure>avd manager descargan alguna versión de android y lo lanzan - lo inician y por ultimo lo corren con npx react-native start.
saludos espero les ayude.

https://youtube.com/playlist?list=PLCKuOXG0bPi1J0nLKbvZSibDrawcAsfJQ ---->>> siguiendo estos videos pude corregir los errores y ponerme al dia.

Wao leyendo todos los comentarios me doy cuenta que aún no es muy práctica la instalación de react-native…

Por eso a veces no me gusta los cursos, la mayoría lo hacen en computadoras IOS. Toca uno buscar para que ejecute el programa y los errores que salen 😦 puff.

[email protected]

58 packages are looking for funding
run npm fund for details

found 4 low severity vulnerabilities
run npm audit fix to fix them, or npm audit for details
[email protected] cryptoTracker % sudo npm run ios

[email protected] ios /Users/franciscodeborjapetitme/dev/cryptoTracker
react-native run-ios

error Cannot read property ‘podfile’ of null. Run CLI with --verbose flag for more details.
TypeError: Cannot read property ‘podfile’ of null
at warnAboutPodInstall (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/@react-native-community/cli-platform-ios/build/link/warnAboutPodInstall.js:43:90)
at Object.runIOS [as func] (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/index.js:93:36)
at Command.handleAction (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:186:23)
at Command.listener (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/commander/index.js:315:8)
at Command.emit (events.js:315:20)
at Command.parseArgs (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/commander/index.js:651:12)
at Command.parse (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/commander/index.js:474:21)
at setupAndRun (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:267:24)
at Object.run (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:206:11)
at Object.<anonymous> (/Users/franciscodeborjapetitme/dev/cryptoTracker/node_modules/react-native/cli.js:16:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] ios: react-native run-ios
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] ios script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/franciscodeborjapetitme/.npm/_logs/2021-01-24T22_58_47_651Z-debug.log
[email protected] cryptoTracker % [email protected] ios
zsh: command not found: [email protected]
[email protected] cryptoTracker % ls
App.js android babel.config.js ios node_modules package.json
tests app.json index.js metro.config.js package-lock.json
[email protected] cryptoTracker %

Alguien sabria AYUDARME A entender lo que esta sucediendo muchas gracias

  "dependencies": {
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-reanimated": "^1.11.0",
    "react-native-safe-area-context": "^3.1.4",
    "react-native-screens": "^2.10.1"
  },

Para los que tengan problemas con

npm install @react-navigation/native @react-navigation/stack 

intenten hacerlo por separado

primero

npm install @react-navigation/native

y luego

npm install @react-navigation/stack

![](

Tengo este error podrian ayudarme por favor?
Es al correr npm run android

En mi caso para Windows, seguí la documentación, la cual es idéntico a lo de la clase anterior, con la única variante de que después de tener todo agregado y las variables de entorno, reinicie el equipo y funciono bien. Cabe aclarar que antes de reiniciar no funcionaba y que lo probé un dispositivo físico, no emulador. No olviden activar el debug de Android en modo de desarrollador. Documentación oficial

Cual es la diferencia entre utilizar react-navigation y utilizar ‘react-native-router-flux’ para la navegación en nuestra aplicación, cual es mejor?

Al menos ya llegue mas lejos que el curso previo de REACT NATIVE, gracias por la excelente explicacion de como instalar el ambiente 😄🤖

Para los que usan windows y android, pueden conectarlo y usar el comando “npm run android”

alguien me puede decir por que al querer escribir en la consola " npm run ios" me devuelve esta ventana…?

Tuve un problema corriendo la aplicación por primera vez en Linux. Resulta que se quedaba pegado en:

info Starting JS server...

Para solucionarlo es necesario saber cual es la terminal que estamos usando en nuestro sistema operativo, en mi caso uso Gnome, entonces sería gnome-terminal, luego se ejecuta de la siguiente manera:

REACT_TERMINAL=gnome-terminal react-native run-android

NOTA: En mi caso instale React Native de forma global npm install -g react-native-cli, en caso de que el comando anterior no funcione pueden probar corriendo npm run android en lugar de react-native run-android.

Para finalizar, es mejor hacer el cambio persistente guardando la variable REACT_TERMINAL en el ~/.bashrc, así nos aseguramos que la próxima vez que iniciemos sesión solo será necesario correr npm run android o react-native run-android:
~/.bashrc

REACT_NATIVE=gnome-terminal

NOTA: Recuerden cambiar gnome-terminal por la terminal que tienen instalada. e. g. xfce4-terminal, konsole, etc…

Uso Linux y se me hizo complicado lograr arrancar el emulador. Este enlace me ayudo bastante: https://medium.com/swlh/react-native-development-environment-configuration-in-manjaro-7d0a91d031c8 . Un dato importante es que tienen que tener instalado el el jdk8, con las versiones actuales no funciona.

Pause el curso 4 dias para poder correr el proyecto en Windows. Despues de muchas pruebas y errores por fin lo tengo al pelo (Espero no reviente nada mas)

F en este curso, estoy mas perdido… voy a seguir googleando… pero que mal que no este bien explicado… no puedo ni siquiera ejecutar la app

No logro ejecutar npm run ios, nunca termina de hacer el build y me salta el siguiente error:

** BUILD FAILED **


The following build commands failed:
        CompileC /Users/vn0tvx3/Library/Developer/Xcode/DerivedData/cryptoTracker-dhwjwgxlkkexncagtjpclevqkqjk/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper.build/Objects-normal/x86_64/ConnectionContextStore.o /Users/vn0tvx3/Downloads/JH/Cursos/react-native-crypto/cryptoTracker/ios/Pods/Flipper/xplat/Flipper/ConnectionContextStore.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Me podrían ayudar?

La mejor solucion para usar React Native es usar Expo. La verdad que estaba montando el SetUp y toda la vaina… pero me dio pereza y con expo PUM! en tres pasos.
Ademas la documentacion es la mejor del mundo. Saludos

Tuve muchos problemas al instalar las dependencias con npm, pero al usar yarn ninguna, lo recomiendo para instalar todo lo que tiene que ver con React

Solución al problema en windows JAVA_HOME:
Al utilizar la consola de wsl me arrojaba el error de no encontrar la variable JAVA_HOME a pesar de que la tenia declarada y lo podia comprobar entrando a la consola de windows(cmd) y ejecutando “echo %JAVA_HOME%”. Si no la tienen declarada la pueden declarar entrando a las variables de entorno del sistema, creando una nueva con el nombre de JAVA_HOME y agregandole la ruta de Java.
Al final en vez de usar wsl ejecute los comandos con **git bash ** y si me corrieron, algo importante que tiene que hacer es crear un emulador en android estudio ya que por defecto no viene con ninguno, si no lo hacen les saldra otro error.

En ubuntu me costo correr el emulador pero ya quedo. Me hubiera gustado que dejaran los pasos de la instalación en el curso me toco investigar todo por cuenta de uno =(

Hola, yo levante la app:
npm run android

Para windows solamente podemos correrlo en elemulador de Android con npx react-native run-android

AMD y Windows:

  • Activen la virtualización en la Bios para el CPU
  • Instalen el driver de AMD en el SDK Tools

Abrir 2 terminales, una para cada uno de los siguientes comandos:

  • npx react-native start
  • npx react-native run-android
<h3>Para STACK</h3>

npm install @react-navigation/[email protected] --legacy-peer-deps
@react-native-masked-view/masked-view

super buena! estuve intentando hacer esto leyendo en foros y luego de un par de días no había avanzado mucho

Hay que instalar las dependencias por cada proyecto o una vez ya instaladas, no hace falta volverlas a instalar para futuros desarrollos?

no puedo correr la aplicacion no reconoce el comando npm run ios

¿Qué es navegación por pila (stack)?

En caso si alguno tiene problemas al entender las derpendencias.

npm install @react-navigation/native @react-navigation/stack 
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
import 'react-native-gesture-handler';

¿Por qué instalar una librería para gestos? ¿Qué hace mejor la nueva librería para gestos?

¿Cómo mejorar las animaciones de React Native? ¿Cómo separar el hilo de animaciones del hilo de javascript en React Native?

Múltiples vistas en React Native utilizando el paquete de react-native-screens

Gracias profesor, por explicarnos de manera concisa las dependencias que se instalaron.

Me sale este error Solo cuando instalo las dependecias nose por que , alguien sabe? ya reinicie y nada

![](

consulta como levanto el emulador, ? para no tener conectado el teléfono, ?

Hola a todos, yo intente crear la app con el comando “npx” pero no funciona correctamente, lo cree con este comando:

create-react-native-app cryptoTracker

y luego añadi las dependecias con estos comandos:

yarn add @react-navigation/native @react-navigation/stack
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

y funciono correctamente, lo probe en macOS Big Sur y en windows 10 y funciona correctamente

<h3>“react”: “17.0.1”,
“react-native”: “0.64.0”</h3>

Instalar:
npm install @react-navigation/[email protected]
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
npx pod-install ios

Espero que alguien me pueda ayudar, estoy en Big Sur 11.2 con Xcode 12.4 y recien creo la app, me da un error muy largo al final tengo un error que dice

warning: The iOS Simulator deployment target ‘IPHONEOS_DEPLOYMENT_TARGET’ is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target ‘Flipper’ from project ‘Pods’)

Hola, si tienen un problema corriendolo en Linux, usen la versión del openJDK 11, con esa funciona bien. Si usan la 15 les mostrará un error.

librerías instaladas

npm i @react-navigation/native @react-navigation/stack 

npm i react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Para los que trabajan con Windows y linux asegurense de agregar el adb al path para que se pueden conectar a sus telefonos, depues hacen el comando adb devices en linux con sudo, si verifican que ahi aparezaca su telefono (tiene que estar en modo de desarrollo y en modo de depuracion usb)
Tambien verifiquen que tengan los directorios de android en el path
https://reactnative.dev/docs/environment-setup

hola buenas tengo el siguiente problema debido a la instalacion global de yarn … y ahora no entiendo como solucionar este problema
adjunto imagen del metro :

hola buenas si seguis los pasos a la hora de meter el 2º

<npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
import 'react-native-gesture-handler';        
>

añadir:
import ‘react-native-gesture-handler’;
comprobar en el package.json si en dependencies existe
"react-native-gesture-handler": “^1.9.0”, o algo similar en caso de no proceder con el npm … + import ‘react-native-gesture-handler’; problema resuelto

En mi caso estoy utilizando linux y primero tengo que ejecutar el emulador de android studio con yarn android o npm run android.
Luego de cargar el emulador ejecuto yarn start o npm run start
😄

paa App.js

import React from 'react';
import { NavigationContainer} from '@react-navigation/native';

const App = () => {
  return (
    
    <NavigationContainer>
      
    </NavigationContainer>
  );
};


export default App;

Me daba error y funcionó ceando el archivo local.properties en la carpeta android del proyecto y escribiendo esta línea

sdk.dir=C\:\\Users\\User\\AppData\\Local\\Android\\Sdk```

donde "User" debe ser su nombre de usuario

Se puede inciar el proyecto directamente en un celular android? O sea sin usar el emulador.

El tema de native con Windows es muy diferente, al parecer es mejor trabajar instalando los modulos con yarn