Implementar enlaces profundos Deep Links o enlaces Universales con Expo en React Native

Implementar enlaces profundos Deep Links o enlaces Universales con Expo en React Native

Tiempo de lectura: 4 minutos Los enlaces profundos nos permiten abrir secciones de nuestra APP utilizando un link o url. Primero vamos a implementar los deep links en Android. Para ello: Vamos a app.json y añadimos: Suponiendo que la url que queremos abrir es https://myapp.com/main. Para obtener el contenido de la URL abierta añadimos dentro de nuestra pantalla de navegación … Leer más

Integrar pruebas Unitarias con Jest en React

Integrar pruebas Unitarias con Jest en React

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos integar prubas con Jest que nos permitan testear los componentes React creados. Lo primero que tenemos que hacer es instalar Jest: Instalamos testing-library/jest-dom: Instalamos ts-jest Instalamos: Instalaremos React testing library: O si usamos TypeScript: Además para typescript: Ahora vamos a crear la estructura de carpetas para nuestras pruebas con … Leer más

There was a problem loading the project. Failed to connect en React Native

There was a problem loading the project. Failed to connect en React Native

Tiempo de lectura: 2 minutos Al intentar ejecutar una aplicación desarrollada en React Native en un dispositivo Android, me he encontrado con el siguiente error. Para solucionarlo, he ido a la configuración de red e Internet de mi ordenador, después he pulsado en ‘Estado’ como muestro en la siguiente imagen. A continuación pulsamos dónde estamos conectados para ir a la … Leer más

Eliminar backup automático de LocalStorage en Android / iOS con React Native Expo

Eliminar backup automático de LocalStorage en Android / iOS con React Native Expo

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos eliminar la opción de permitir backup en localstorage usando React Native. Por defecto Expo en React Native nos establece la opción de almacenar el localstorage en remoto: Para evitarlo tendremos que poner la opción de allowBackup a false. Para ello vamos a nuestro app.json y ponemos: Y ahora tendremos … Leer más

Detectar colisiones entre dos elementos en React Native

Detectar colisiones entre dos elementos en React Native

Tiempo de lectura: 4 minutos Hoy vamos a aprender cómo podemos detectar colisiones entre dos elementos usando React Native. Detectar colisiones es muy útil por si queremos realizar pequeños juegos con React Native incluso con Expo. Lo primero que haremos es tomar de referencia nuestro elemento del tutorial de Permitir arrastrar elementos por la pantalla en React Native DragComponent.tsx Y … Leer más

Como poner una APP de React Native con Expo en modo Inmersivo (pantalla completa) para Android

Como poner una APP de React Native con Expo en modo Inmersivo (pantalla completa) para Android

Tiempo de lectura: < 1 minuto Hoy vamos a implementar el modo Inmersivo para Android en una APP desarrollada con Expo React Native. El modo inmersivo nos permite poner una aplicación en modo pantalla completa en Android. Primero vamos a instalar las librerias necesarias: Expo navigation bar: Expo status bar: Y ahora para ocultar la barra de estado y navegación añadimos … Leer más

Transformar vector XML de Android a un SVG usando la línea de comandos

Transformar vector XML de Android a un SVG usando la línea de comandos

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos transformar un vector XML de Android a un vector en formato SVG usando la línea de comandos. Con el vector en SVG podremos utilizarlo tanto en React, Flutter o Web. Lo primero que haremos es instalar esta librería (si queremos podemos usar la web): Una vez instalada la vamos … Leer más

Permitir arrastrar elementos por la pantalla en React Native

Permitir arrastrar elementos por la pantalla en React Native

Tiempo de lectura: 2 minutos Hoy vamos a crear un componente que nos permitirá arrastrar otros elementos por la pantalla usando React Native. Lo primero que haremos es crear el componete que llamaremos DragComponent.tsx y añadiremos la lógica que nos permita arrastrar: Ahora voy a explicar el código: Para utilizarlo solo tendremos que envolver nuestro componente con este: DevCodeLight devcodelight.com

Ocultar statusBar cuando mostramos modal en React Native

Ocultar statusBar cuando mostramos modal en React Native

Tiempo de lectura: < 1 minuto Vamos a ver cómo podemos solucionar el error que nos muestra el statusbar cuando mostramos un modal en React Native. Para solucionar este bug, tenemos que añadir la siguiente propiedad en nuestro modal: Y ahora se mostrará en pantalla completa: isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva … Leer más

Añadir respuesta háptica (vibración) a un botón de tu APP de React Native con Expo

Añadir respuesta háptica (vibración) a un botón de tu APP de React Native con Expo

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir una respuesta háptica en un botón usando React Native con Expo. Una respuesta háptica en un botón es una retroalimentación táctil que proporciona un dispositivo cuando presionas un botón o realizas alguna acción táctil sobre él. En lugar de simplemente pulsar un botón y no recibir ningún tipo … Leer más