React

Detectar idioma automáticamente en React Native con @react-native-localize + i18next

por
Detectar idioma automáticamente en React Native con @react-native-localize + i18next

Tiempo de lectura: 2 minutosVamos a aprender la forma más fiable para obtener el idioma del dispositivo y ademas utilizarlo junto con la libreria de idiomas i18next. Instalar dependencias Si usas TypeScript, instala también los tipos: Estructura recomendada Crear los archivos de idioma (es.ts, en.ts) src/i18n/translations/es.ts src/i18n/translations/en.ts Configurar i18next con detección automática src/i18n/index.ts Usar las traducciones en la app … Leer más

Autoincrementar versión de Expo de forma automática para tus builds en Android o iOS

por
Autoincrementar versión de Expo de forma automática para tus builds en Android o iOS

Tiempo de lectura: < 1 minutoPara incrementar automáticamente la versión visible para el usuario («version»: «1.0.0» en app.json), puedes hacerlo con eas version también, usando un modo especial: 1. Configurar eas.json para auto-incrementar Dentro de tu archivo eas.json, agrega la opción version con la opción increment configurada en el perfil correspondiente (por ejemplo, production). 2. Asegurarte de que no usas … Leer más

Ver clave SHA del certificado debug.keystore en un proyecto React Native Expo

por
Ver clave SHA del certificado debug.keystore en un proyecto React Native Expo

Tiempo de lectura: < 1 minutoHoy os voy a compartir un comando para poder ver el SHA del certificado que nos genera automáticamente el proyecto android. Para ello tendremos que utilizar este comando: Nos dará la traza del certificado en la pantalla. Si keytool no es reconocido, asegúrate de que Java está instalado y que el binario de keytool está … Leer más

Cómo Crear un Carrusel de Imágenes en React con Swiper

por
Cómo Crear un Carrusel de Imágenes en React con Swiper

Tiempo de lectura: 2 minutosLos carruseles de imágenes son una excelente manera de mostrar contenido de manera dinámica en una página web. En este tutorial, aprenderás a implementar un carrusel en React utilizando la librería Swiper. 1. Instalación de Swiper Swiper es una de las librerías más populares para crear carruseles en la web. Para instalarla en tu proyecto … Leer más

Añadiendo Notificaciones y Firebase a Nuestra App de Tareas

por
Añadiendo Notificaciones y Firebase a Nuestra App de Tareas

Tiempo de lectura: 2 minutosEn esta parte, mejoraremos aún más nuestra app de tareas de React Native con:✅ Notificaciones push con Expo Notifications.✅ Sincronización en la nube con Firebase Firestore. Requisitos previos 1. Configurar Notificaciones Push Las notificaciones push permiten recordar tareas importantes. Para ello, usaremos Expo Notifications. 1.1 Instalar dependencias Ejecutamos: Además, si usamos un dispositivo físico en … Leer más

Modo Oscuro Automático en React con Tailwind CSS

por
Modo Oscuro Automático en React con Tailwind CSS

Tiempo de lectura: 2 minutosVamos a mejorar el tutorial de modo oscuro para que el modo oscuro se active automáticamente según la configuración del sistema o la hora del día. 🔹 1. Configurar Tailwind CSS (Si aún no lo hiciste) Si aún no tienes Tailwind instalado, agrégalo: En tailwind.config.js, aseguramos que el modo oscuro se base en clases: 🔹 … Leer más

Cómo agregar un Modo Oscuro en React con Tailwind CSS de forma manual

por
Cómo agregar un Modo Oscuro en React con Tailwind CSS de forma manual

Tiempo de lectura: 2 minutosCómo añadir modo oscuro con React y Tailwind CSS de forma manual. 1️⃣ Configurar Tailwind CSS Si aún no tienes Tailwind instalado en tu proyecto, agrégalo con: Luego, en tailwind.config.js, habilita el modo oscuro basado en clases: 2️⃣ Crear un Hook para manejar el modo oscuro Creamos un hook useDarkMode.ts que guarda la preferencia en … Leer más

Cómo arrastrar elementos por la pantalla con React

por
Cómo arrastrar elementos por la pantalla con React

Tiempo de lectura: 2 minutosHoy vamos a aprender cómo podemos arrastrar elementos por la pantalla con React. 1️⃣ Instalar react-draggable Primero, instala la librería con npm o yarn: 2️⃣ Crear el componente de arrastre Ahora, crearemos un componente básico que se pueda arrastrar: 🔹 Explicación: 3️⃣ Usarlo en tu aplicación Importa y usa el componente en App.tsx o cualquier … Leer más

Mejorando la App de Tareas con SQLite y Estilos en React Native

por
Mejorando la App de Tareas con SQLite y Estilos en React Native

Tiempo de lectura: 2 minutosEn esta segunda parte, mejoraremos nuestra app de tareas de React Native con las siguientes mejoras: Requisitos previos 1. Instalando SQLite Expo proporciona un wrapper para SQLite, lo instalamos con: Creamos un archivo database.js en src/utils/ para manejar la base de datos: 2. Modificar la Pantalla para Usar SQLite Editamos HomeScreen.js: 3. Aplicando Estilos con … Leer más

Crea una App de Tareas con React Native

por
Crea una App de Tareas con React Native

Tiempo de lectura: 2 minutosEn este tutorial, vamos a construir una sencilla app de tareas con React Native, que incluya: Requisitos previos 1. Creación del Proyecto Ejecuta el siguiente comando en tu terminal para crear un nuevo proyecto Expo: Iniciamos el proyecto con: 2. Instalación de Dependencias Instalamos las librerías necesarias: 3. Configurar Navegación Creamos navigation.js dentro de src/: … Leer más