Optimizar imágenes con react-native-fast-image en React Native

Optimizar imágenes con react-native-fast-image en React Native

Tiempo de lectura: 2 minutos La optimización de imágenes es un punto muy importante a la hora de desarrollar una APP. Con la librería react-native-fast-image conseguiremos cargar las imágenes de forma rápida y sencilla. Lo primero que haremos es instalar esta librería: Una vez instalada, vamos a crear un componente que nos permitirá cargar cualquier tipo de imagen usando esta … Leer más

Añadir i18next para internacionalizar una APP React Native + Expo usando TypeScript

Añadir i18next para internacionalizar una APP React Native + Expo usando TypeScript

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos internacionalizar y añadir multi lenguaje a una APP en React Native y usando TypeScript. Lo primero que haremos es instalar i18n: Una vez instalado, creamos una carpeta llamada language y dentro creamos un archivo i18next.ts Este archivo determinará automáticamente el idioma seleccionado en el dispositivo. El idioma por defecto … Leer más

Solucionar error Could not find Ninja on PATH or in SDK CMake bin folders. en React Native con Expo

Solucionar error Could not find Ninja on PATH or in SDK CMake bin folders. en React Native con Expo

Tiempo de lectura: < 1 minuto Hoy vamos a solucionar el siguiente error: A problem occurred evaluating project ‘:expo’. A problem occurred configuring project ‘:expo-modules-core’.[CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders. Este error ocurre cuando queremos generar el build de desarrollo con Expo: Para solucionar este error, tenemos que ir al SDK manager de Android … Leer más

Añadir modo oscuro (Dark Mode) en React usando Mui

Añadir modo oscuro (Dark Mode) en React usando Mui

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir modo oscuro usando React y la librería de diseño MUI. Lo primero que haremos es crear dos temas oscuro y claro: Theme.tsx Una vez creados vamos a generar la lógica que establecerá el modo oscuro según las prefrencias del usuario. Dentro de nuestro _app.tsx o archivo principal: Con … Leer más

Añadir Google AdSense en React

Añadir Google AdSense en React

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir Google Adsense en React. Lo primero que tenemos que hacer es crear una cuenta en Google Adsense y obtener nuestro código de página. Ahora tenemos que añadir el código dentro de nuestro head de esta forma: Donde en ca-pub-XXXXXXXXXXXXX debemos indicar nuestro id de Google Adsense. Y ahora … Leer más

Añadir un SVG en React Native con Expo

Añadir un SVG en React Native con Expo

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir una imagen SVG en React Native usando Expo. Lo primero que haremos es instalar las dependencias necesarias: Primero react-native-svg Y ahora instalamos react-native-svg-transformer Una vez instaladas tenemos que configurar react-native-svg-transformer. Para ello abrimos el archivo metro.config.js y añadimos: Y si usamos TypeScript tendremos que añadir este código dentro … Leer más

Añadir captcha reCAPTCHA Google a React

Añadir captcha reCAPTCHA Google a React

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos validar un formulario, incluyendo un reCAPTCHA para evitar ataques de spam por BOTS. Lo primero que tenemos que hacer es registrar nuestro código de reCAPTCHA en Google: https://www.google.com/recaptcha/about/ Y pulsamos en v3 Admin Console Le damos a crear una nueva en el botón del más (+) y en este … Leer más

Decodificar Token JWT en React

Decodificar Token JWT en React

Tiempo de lectura: < 1 minuto Hoy vamos a aprender una pequeña función para decodificar tokens JWT usando React. Lo primero que haremos es instalar las librerías necesarias: JsonWebToken auth0.js Y los tipos si usamos TypeScript: Una vez instalado, vamos a crear esta función en un archivo de utils.tsx Nos decodificará los tokens que pasemos como parámetro y los devolverá en … Leer más

Implementar inicio de sesión con Google en React

Implementar inicio de sesión con Google en React

Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo podemos implementar inicio de sesión con Google Sign y React, además compatible con Next.js. Lo primero que tenemos que hacer es instalar la librería React Oauth2 Google Una vez instalado tenemos que crear nuestras credenciales para ello: Vamos a Google Cloud Platform (https://cloud.google.com/) y pulsamos en Consola Ahora seleccionamos nuestro … Leer más

Crear una Progressive Web App (PWA) usando React y Next.js

Crear una Progressive Web App (PWA) usando React y Next.js

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos crear una web progresiva PWA utilizando React y Next.js. Instalamos la dependencia que vamos a utilizar next-pwa Ahora creamos un archivo manifest.json dentro de public. Pondremos el nombre y los datos de nuestra app y enlazaremos el icono. Podemos elegir la orientación indicando:   «orientation»: «portrait» Creamos un archivo … Leer más