Crear un Splash Screen personalizada en React Native (funciona con web, Android, iOS)

Crear un Splash Screen personalizada en React Native (funciona con web, Android, iOS)

Tiempo de lectura: 2 minutos Sí, queremos crear un Splash Screen personalizada en nuestra APP de React Native lo primero que tenemos que hacer es crear dos Screen, uno va a ser el Splash Screen y otro la primera pantalla de la APP. En APP.js añadimos un stack navigation con las pantallas (Splash Screen y Principal): Si quieres saber como … Leer más

Mostrar y ocultar tablas de una base de datos en phpmyadmin

Mostrar y ocultar tablas de una base de datos en phpmyadmin

Tiempo de lectura: 2 minutos Para mostraros como ocultar una tabla en una base de datos que tengamos en phpmyadmin usaré como ejemplo phpmyadmin. si la desplegamos, visualizaremos las tablas. Vamos a ocultar la tabla pma__bookmark, para ello, posicionamos el ratón encima de la tabla en la que aparecerá un icono en la derecha como os muestro a continuación. Después, … Leer más

Multi-idioma con React Native de forma automática según el idioma del dispositivo. Compatible con Android e iOS y web

Multi-idioma con React Native de forma automática según el idioma del dispositivo. Compatible con Android e iOS y web

Tiempo de lectura: 3 minutos En este tutorial os voy a enseñar cómo añadir soporte multi-idioma en React Native. Vamos a utilizar la librería i18next (https://react.i18next.com/) Primero vamos a instalar las siguientes dependencias: Una vez instaladas, creamos una nueva carpeta en nuestro proyecto llamada language y dentro añadimos dos archivos con el código de país que queramos implementar. En mi … Leer más

Solucionar problema: i18next::pluralResolver: Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling en i18n con React Native y Android

Solucionar problema: i18next::pluralResolver: Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling en i18n con React Native y Android

Tiempo de lectura: < 1 minuto Al implementar el soporte multi-idioma de i18next en React Native, la plataforma Android puede devolver el siguiente error: Y por consola sale lo siguiente: Para solucionarlo, tenemos que ir al archivo qué creamos para inicializar el plugin i18n y después añadir compatibilidad con JSON v3 (compatibilityJSON: ‘v3’): Una vez añadido ya no aparece el error … Leer más

Añadir un loader en React Native

Tiempo de lectura: 2 minutos Os voy a enseñar cómo añadir un loader para las pantallas de carga de React Native. Para comenzar, hay que crear un nuevo componente que llamaremos Loader.js Ahora voy a explicar el código: Para crear el loader he utilizado la librería react-native-paper (https://reactnativepaper.com/), esta librería proporciona diseño basado en Material Design de Google. Si queremos … Leer más

Abrir Stack.Tab desde un Stack.Screen contenido dentro de un tab con diferentes NavitagionContainer React Native.

Tiempo de lectura: 3 minutos Os voy a explicar cómo abrir otro tab, dentro de un screen (fuera del tab pero contenido dentro de la pila de ejecución) que ya tenemos contenido en nuestro tab. Por ejemplo, tenemos la siguiente pantalla y queremos realizar la navegación qué se indica en el vídeo: Y queremos abrir el tab «Buscar» utilizando el … Leer más

Añadir iconos en Tab Navigator en React Native

Añadir iconos en Tab Navigator en React Native

Tiempo de lectura: < 1 minuto Cuando creamos un Tab Navigator por defecto, este sale sin iconos: Partiendo de este código: Si queremos añadir iconos podemos hacer lo siguiente. Vamos a utilizar una librería que ya nos proporciona iconos a nuestro proyecto, también podemos utilizar nuestros propios iconos, pero para que sea más rápido vamos a utilizar esta librería. Instalamos la … Leer más

Solucionar error ‘Too many re-renders. React limits the number of renders to prevent an infinite loop.’ en React

Solucionar error ‘Too many re-renders. React limits the number of renders to prevent an infinite loop.’ en React

Tiempo de lectura: < 1 minuto Este error ocurre cuándo llamamos por ejemplo a un setEstado desde varios elementos a la vez. Tomando de ejemplo el siguiente código: Los tres botones tienen asignados el método onPress con la función de setPosicion que va a cambiar la posición de la variable posMenu. El problema viene en que cuando el render se devuelve … Leer más

Solucionar Warning: Each child in a list should have a unique «key» prop. Al hacer un bucle de elementos dinámicos con React Native.

Solucionar Warning: Each child in a list should have a unique «key» prop. Al hacer un bucle de elementos dinámicos con React Native.

Tiempo de lectura: < 1 minuto Si al ejecutar nuestro código dónde incluimos un bucle de elementos, aparece el siguiente mensaje: «Warning: Each child in a list should have a unique «key» prop» Esto se debe a que nuestro bucle está creando elementos iguales o clones con el mismo ID. Imaginemos qué este es nuestro código: Al ejecutarlo nos aparece el … Leer más