Componentes Compartidos

Ubicación: src/shared/components/ Estos componentes son reutilizables en cualquier módulo de la aplicación. Están organizados por categoría funcional.

Buttons

BackButton

Botón de retroceso con icono de flecha. Se integra con la navegación de Expo Router.

Button

Botón principal con variantes: primary, secondary, outline, ghost, danger. Soporta estado de carga y deshabilitado.

CloseButton

Botón de cierre (X) para modales y sheets.

HelpButton

Botón de ayuda (?) que abre el canal de soporte o información contextual.

ScrollToTopButton

Botón flotante que aparece al hacer scroll hacia abajo. Retorna al inicio de la lista.

Componente	Props principales	Variantes
`BackButton`	`onPress?`, `color?`	—
`Button`	`title`, `onPress`, `variant?`, `loading?`, `disabled?`	`primary`, `secondary`, `outline`, `ghost`, `danger`
`CloseButton`	`onPress`, `color?`, `size?`	—
`HelpButton`	`onPress?`	—
`ScrollToTopButton`	`scrollRef`, `visible`	—

Layout

Componente	Descripción	Props principales
`Divider`	Línea separadora horizontal	`color?`, `margin?`
`Header`	Header con navegación, título y acciones	`title?`, `leftAction?`, `rightAction?`, `transparent?`
`ImageGallery`	Carousel multi-imagen con zoom y paginación	`images`, `initialIndex?`, `onClose`
`VideoPlayer`	Reproductor de video con controles nativos	`source`, `autoPlay?`, `loop?`
`WebViewModal`	Modal con WebView embebido para contenido externo	`url`, `visible`, `onClose`, `title?`

Feedback

Componentes para comunicar estados de carga, errores y notificaciones al usuario.

Loading
Error
Toast

| Componente | Uso | |------------|-----| | LoadingIndicator | Spinner inline para secciones de la pantalla | | LoadingScreen | Pantalla completa de carga con logo. Usado durante inicialización. | | LoadingOverlay | Overlay semitransparente sobre contenido existente. Para operaciones que bloquean UI. |

| Componente | Uso | |------------|-----| | ErrorDisplay | Mensaje de error inline con icono y botón de retry opcional | | AppErrorScreen | Pantalla de error completa con acción de recuperación. Para errores fatales. |

| Componente | Uso | |------------|-----| | ToastManager | Cola de toasts temporales (éxito, error, info). Se muestra en la parte superior. | | ProgressToast | Toast individual con barra de progreso para operaciones largas. | | ProgressToastManager | Gestor de múltiples ProgressToasts simultáneos. |

Version Gate

Componentes para gestionar actualizaciones obligatorias y recomendadas de la app.

Componente	Descripción	Props principales
`ForceUpdateModal`	Modal de pantalla completa, no dismissible. Para actualizaciones obligatorias.	`visible`, `onUpdate`
`RecommendedUpdateBanner`	Banner slide-down animado con `react-native-reanimated`. Dismissible.	`visible`, `onUpdate`, `onDismiss`
`VersionGateOverlay`	Orquestador que consume `useVersionCheck` y renderiza el componente correcto.	`appIsReady`

VersionGateOverlay se monta en app/_layout.tsx como sibling de RootLayoutNav
ForceUpdateModal usa <Modal> nativo con onRequestClose no-op para bloquear el botón back de Android
RecommendedUpdateBanner usa la misma paleta de colores que ForceUpdateModal (bgNeutral fondo, textPrimary texto)

Componente	Descripción	Props principales
`TabBarItem`	Item del tab bar inferior con icono, label y badge	`icon`, `label`, `focused`, `badgeCount?`
`NavigationAppSelector`	Selector de apps de navegación (Google Maps, Apple Maps, Waze)	`latitude`, `longitude`, `label?`

Icons

Más de 90 iconos SVG disponibles como componentes React Native, organizados por categoría.

Navegación

Home, Calendar, Stays, Profile, Search, Map, Inbox, Bell

Amenidades

Bed, Bathtub, Wifi, Door, Kitchen, Parking, Pool, Garden, AC, Heating, etc.

UI

ChevronRight, ChevronDown, ChevronLeft, ChevronUp, ArrowRight, ArrowLeft, ArrowUp, Plus, Minus, Close, etc.

Reviews

ReviewHouse, ReviewHeadphones, StarFilled, StarEmpty, StarHalf

Chat

ChatMic, ChatCamera, ChatFile, ChatSend, ChatTickSingle, ChatTickRead, ChatTickDelivered, etc.

Funcionales

Lock, Key, Doc, Image, Delete, CheckTick, Edit, Share, Copy, Download, Upload, Filter, Sort, etc.

Todos los iconos aceptan las props width, height y color para personalizar su apariencia. El tamaño por defecto es 24x24.

Uso de iconos

import { HomeIcon, CalendarIcon, StarFilled } from '@/shared/components/icons';

<HomeIcon width={28} height={28} color="#333" />
<StarFilled color="#FFD700" />

Otros componentes

Componente	Descripción	Props principales
`ReviewStars`	Display read-only de estrellas (1-5)	`rating`, `size?`, `color?`
`InteractiveStarRating`	Input de 5 estrellas con interacción táctil	`value`, `onChange`, `size?`, `disabled?`
`SelectableOptionBox`	Selector con estado activo/inactivo y contenido personalizable	`selected`, `onPress`, `children`
`StarRatingTutorialOverlay`	Overlay de onboarding que explica cómo usar el rating de estrellas	`visible`, `onDismiss`
`QueryClientProvider`	Setup de React Query con configuración global	`children`
`KeyboardHeightTracker`	Observador del teclado que reporta su altura actual	Componente sin UI visible

InteractiveStarRating

import { InteractiveStarRating } from '@/shared/components';

const [rating, setRating] = useState(0);

<InteractiveStarRating value={rating} onChange={setRating} size={32} />;

QueryClientProvider debe envolver toda la aplicación. Ya está configurado en el layout raíz; no lo agregues manualmente en componentes individuales.

Overview

Architecture

Modules

Shared

Integrations

Guides

Componentes Compartidos

Componentes Compartidos

Buttons

BackButton

Button

CloseButton

HelpButton

ScrollToTopButton

Layout

Feedback

Version Gate

Navigation

Icons

Navegación

Amenidades

UI

Reviews

Chat

Funcionales

Uso de iconos

Otros componentes

InteractiveStarRating

​Componentes Compartidos

​Buttons

BackButton

Button

CloseButton

HelpButton

ScrollToTopButton

​Layout

​Feedback

​Version Gate

​Navigation

​Icons

Navegación

Amenidades

UI

Reviews

Chat

Funcionales

​Uso de iconos

​Otros componentes

​InteractiveStarRating

Componentes Compartidos

Buttons

Layout

Feedback

Version Gate

Navigation

Icons

Uso de iconos

Otros componentes

InteractiveStarRating