No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Drawer navigation y pr贸ximos pasos

16/16
Recursos

Aportes 12

Preguntas 2

Ordenar por:

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

Para solucionar el problema con el Drawer debemos de hacer lo siguiente:

  • A帽adir la siguiente linea en el archivo de babel.config.js
    plugins: [鈥榬eact-native-reanimated/plugin鈥橾

  • y luego correr el siguiente comando para borrar el cache de la app:
    expo r -c

La informacion la saque de este foro de Github:
https://github.com/software-mansion/react-native-reanimated/issues/2793

Hola devs!
Por aqu铆 les dejo una peque帽a pr谩ctica que hice con RN CLI y todos los tiposde navegaci贸n que ofrece React Navigation.

En esta aplicaci贸n podr谩n encontrar un CustomDrawerNavigator, BottomTabNavigator, TopTabNavigator y el Stack (en este hay cosas por pulir).

Repo:

react-native-navigations

si, les llega a generar un error con el Drawer. a a帽adan lo siguiente ( plugins: [鈥榬eact-native-reanimated/plugin鈥橾 ) en el objeto que retorna el archivo babel.config.js

Esta son Mis notas del curso espero les sirva.

La forma de solucionar el error del Drawer es la siguiente:

  1. ejecutar la l铆nea de comando: 鈥渆xpo install react-native-reanimated鈥. Con esto vas a tener el recurso para utilizar el plugin en la configuraci贸n de babel.
  2. En el archivo 鈥渂abel.config.js鈥:
    • Agregar la l铆nea de c贸digo: 鈥減lugins: [鈥榬eact-native-reanimated/plugin鈥橾鈥, seguido del atributo 鈥減resets鈥
  3. Por 煤ltimo, con la instalaci贸n del recurso de react y la configuraci贸n del plugin en babel hecha:
    • Ejecutar la l铆nea de comando: 鈥渆xpo start --clear鈥.
    • Una vez que el servidor est谩 corriendo, entrar a localhost:19002, eso te llevar谩 a la p谩gina del servidor local.
    • Entrar desde el celular a la aplicaci贸n Expo Go y tomar la captura del c贸digo QR de la p谩gina.

Listo!!
Siguiendo estos pasos lo solucion茅, tambi茅n me bas茅 en los comentarios/aportes hechos anteriormente por otros usuarios.

Para arreglar el error con Drawer primero:

  1. expo install react-native-reanimated
  2. A帽adir esta l铆nea al archivo babel.config.js:
    plugins: [鈥榬eact-native-reanimated/plugin鈥橾,
  3. Limpiar cache: expo start --clear

Instrucciones en: https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

Que grande este profe. Nunca lo habia visto aca en platzi, es el primer curso que veo y tomo de el, pero que grande es. Buenisimo para transmitir conocimiento.

con solo escribir imr tienen el import React from 鈥渞eact鈥 馃槂

Para los que les sale error:
modifica por completo el archivo de
babel.config.js de la siguiente manera o simplemente el que te hace falta:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

y finalmente desde consola:

expo start --clear

Ahora s铆 ejecuta desde consola

yarn ios

o sino

yarn android

El problema con el drawer, lo solucione actualizando
los sdk tools en androidstudio.

  • Abren - tools/ sdk manager / android SDK / SDK tools

Aun sin las siguientes configuraciones sigue funcionando bien el drawer tanto en emulador como en dispositivo real.

Probe a quitar el import de 鈥渞eact-native-gesture-handler鈥 del app y el plugin que recomiendan babel - plugins: [鈥渞eact-native-reanimated/plugin鈥漖,

El plugin que hay que a帽adir se menciona en la doc de Expo, seccion Reanimated.
https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

Si tienen algun problema, sigan la documentaci贸n ahi explica cada paso