Cargar desde el final una FlatList para mostrar un chat en React Native

Cargar desde el final una FlatList para mostrar un chat en React Native

Tiempo de lectura: < 1 minuto Hoy os voy a enseñar cómo podéis cargar una flatlist de forma invertida para mostrar una conversación (chat) con React Native. Estamos utilizando la librería de FlatList que viene con el paquete React Native. Para mostrar los elementos de forma invertida (que se carguen desde abajo y no desde arriba) tenemos que añadir la propiedad … Leer más

Enviar un e-mail o realizar una llamada de teléfono desde tu APP en React Native

Enviar un e-mail o realizar una llamada de teléfono desde tu APP en React Native

Tiempo de lectura: < 1 minuto Hoy os voy a enseñar a enviar un email o una llamada telefónica desde React Native. Para utilizar esta función vamos a importar la libería de Linking de react-native https://reactnative.dev/docs/linking Para implementar una llamada utilizaremos igual que en HTML la clave tel:numero_telefono Y para enviar un e-mail utilizaremos mailto:email isMa Ingeniero en Informática, Investigador, me … Leer más

Eliminar acentos en un string Javascript

Eliminar acentos en un string Javascript

Tiempo de lectura: < 1 minuto Para eliminar acentos (tildes) en un String utilizando Javascript hay que hacer lo siguiente: Tememos el siguiente String Para eliminar los signos de puntuación tendremos que utilizar la siguiente función (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize) De esta forma, al utilizar la función podemos eliminar los acentos. isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles … Leer más

Ordenar un JSON por alguna de sus claves usando Javascript

Ordenar un JSON por alguna de sus claves usando Javascript

Tiempo de lectura: < 1 minuto Hoy os voy a enseñar cómo podemos ordenar un JSON utilizando alguna de sus claves. Tenemos el siguiente JSON: Contiene distintas frutas, tiene un id qué está sin ordenar y además una propiedad que indica un orden. Para ordenar el JSON podemos hacer lo siguiente Con esta función podemos ordenar la listaJSON utilizando la clave … Leer más

Reproducir vídeos de Youtube sin YoutubeAPI (sin api key) en React Native

Reproducir vídeos de Youtube sin YoutubeAPI (sin api key) en React Native

Tiempo de lectura: 2 minutos Os voy a enseñar cómo podemos reproducir vídeos de Youtube, sin necesidad de utilizar la librería de Youtube para React Native. De esta forma no tendrás que añadir un API Key para reproducir vídeos. Lo primero de todo, tenemos que crear un Screen con un Webview. Para ello primero instalamos Webview: Una vez instalado, creamos … Leer más

Utilizar axios de forma asíncrona en React Native

Utilizar axios de forma asíncrona en React Native

Tiempo de lectura: < 1 minuto En este artículo os voy a enseñar cómo utilizar axios de forma asíncrona en vuestros proyectos. Partiendo del siguiente código para realizar una llamada GET con axios: Al utilizar la sentencia .then la APP se queda a la espera de cargar el resultado de forma síncrona. Para cambiar la llamada a una llamada asíncrona hay … Leer más

Forzar refrescar (recargar) screen al cambiar de pantalla con React Navigation Tab en React Native

Forzar refrescar (recargar) screen al cambiar de pantalla con React Navigation Tab en React Native

Tiempo de lectura: < 1 minuto Si queremos forzar que una pantalla se cargue al cambiar o abrirla de nuevo en React Native haremos lo siguiente: En nuestro stack de pantallas añadimos esta propiedad: Al añadir esta propiedad, unmountOnBlur desmontará el componente y lo volverá a montar cada vez que lo abramos y hará que se refresque de nuevo la pantalla. … Leer más

Problema con axios y cabeceras headers (http) en mayúscula con React Native

Problema con axios y cabeceras headers (http) en mayúscula con React Native

Tiempo de lectura: < 1 minuto Cuando utilizamos axios y adjuntamos una cabecera como el siguiente ejemplo: Tenemos que tener cuidado con las cabeceras que tengan mayúsculas, ya que axios las transforma en minúsculas. Si en nuestro servidor back, esperamos recibir la cabecera TOKEN-AUTH en mayúsculas, tendremos que añadir también permitir recibir la cabecera token-auth ya que axios realiza un .toLowerCase … Leer más

Enviar un POST con URLSearchParams (params) en React Native usando Axios

Enviar un POST con URLSearchParams (params) en React Native usando Axios

Tiempo de lectura: < 1 minuto En el artículo de hoy, voy a enseñaros cómo enviar un POST construido con URLSearchParams y usando la librería Axios para React Native/Expo. En los anteriores artículos, os enseñe Realizar una llamada GET en React Native con Axios y Cómo hacer un POST con Axios en React Native Lo primero que tenemos que hacer es … Leer más

Refrescar una FlatList en React Native

Refrescar una FlatList en React Native

Tiempo de lectura: < 1 minuto Si eliminamos o añadimos un nuevo elemento a una FlatList en React Native tenemos que hacer lo siguiente: Primero tenemos que crear un estado tipo booleano: Depués lo asignamos a la FlatList con el atributo extraData: Cuándo queramos refrescar la lista, pondremos lo siguiente: Y listo, ya realiza un re-render de la lista y vuelve … Leer más