Estoy desarrollando una app móvil para pacientes post-alta hospitalaria usando React Native con Expo, TypeScript y NativeWind.
Quiero que me ayudes a crear la experiencia inicial del usuario, que consta de varias pantallas con navegación y conexión al backend.
Estas son las pantallas que necesito:
Carrusel de introducción que muestre las funcionalidades clave de la app (crear tratamientos médicos, citas médicas, chatbot, botón S.O.S, calendario con recordatorios y citas).
Pantalla de verificación de DNI, donde el usuario ingresa su número de DNI para validar que existe en la base de datos.
Pantalla de ingreso de código de verificación de 6 dígitos (enviado al usuario).
Pantalla de inicio de sesión, donde ingresará DNI y contraseña.
Quiero un diseño minimalista y moderno, utilizando la siguiente paleta de colores:
#4C4DDC (azul violáceo)
#EDEFFC (blanco azulado muy claro)
#101010 (negro)
#C8C8F4 (lavanda claro)
#D4D4D8 (gris claro)
Requisitos:
Implementa navegación entre pantallas.
Usa componentes funcionales con hooks.
Conecta con el backend en las pantallas de verificación de DNI y de código.
Valida correctamente los inputs (por ejemplo, que el DNI tenga 8 dígitos numéricos).
Usa NativeWind para los estilos.
Usa buenas prácticas con separación de componentes o hooks reutilizables si es necesario.
Sugerencia: puedes usar librerías como react-navigation, react-hook-form, zod para validaciones y axios para la conexión HTTP si lo ves conveniente.
Voy a crear una aplicación móvil para pacientes post-alta hospitalaria usando React Native con Expo, TypeScript y NativeWind. Implementaré la experiencia inicial del usuario con las pantallas solicitadas, navegación y conexión al backend.
He creado una aplicación móvil para pacientes post-alta hospitalaria con React Native, Expo, TypeScript y NativeWind, siguiendo tus requisitos. La aplicación incluye las siguientes pantallas:
He creado una aplicación móvil para pacientes post-alta hospitalaria con React Native, Expo, TypeScript y NativeWind, siguiendo tus requisitos. La aplicación incluye las siguientes pantallas:
La aplicación sigue un diseño minimalista y moderno utilizando la paleta de colores especificada, con énfasis en la experiencia de usuario y la accesibilidad.
Voy a reemplazar todos los componentes TouchableOpacity por Pressable en la aplicación. El componente Pressable es más moderno y ofrece mayor flexibilidad para manejar diferentes estados de interacción.
He reemplazado todos los componentes TouchableOpacity por Pressable en la aplicación. El componente Pressable ofrece varias ventajas:
hitSlop, pressRetentionOffset y android_rippleTouchableOpacity por PressableclassName, onPress y disabledSi deseas aprovechar más características de Pressable, podríamos implementar efectos visuales adicionales cuando los botones están presionados, utilizando la propiedad style como una función que recibe el estado de interacción.