Skip to main content

Documentation Index

Fetch the complete documentation index at: https://wiki.vivla.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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.
ComponenteProps principalesVariantes
BackButtononPress?, color?—
Buttontitle, onPress, variant?, loading?, disabled?primary, secondary, outline, ghost, danger
CloseButtononPress, color?, size?—
HelpButtononPress?—
ScrollToTopButtonscrollRef, visible—

​
Layout

ComponenteDescripciónProps principales
DividerLínea separadora horizontalcolor?, margin?
HeaderHeader con navegación, título y accionestitle?, leftAction?, rightAction?, transparent?
ImageGalleryCarousel multi-imagen con zoom y paginaciónimages, initialIndex?, onClose
VideoPlayerReproductor de video con controles nativossource, autoPlay?, loop?
WebViewModalModal con WebView embebido para contenido externourl, visible, onClose, title?

​
Feedback

Componentes para comunicar estados de carga, errores y notificaciones al usuario.
| 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. |

​
Version Gate

Componentes para gestionar actualizaciones obligatorias y recomendadas de la app.
ComponenteDescripciónProps principales
ForceUpdateModalModal de pantalla completa, no dismissible. Para actualizaciones obligatorias.visible, onUpdate
RecommendedUpdateBannerBanner slide-down animado con react-native-reanimated. Dismissible.visible, onUpdate, onDismiss
VersionGateOverlayOrquestador 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)
ComponenteDescripciónProps principales
TabBarItemItem del tab bar inferior con icono, label y badgeicon, label, focused, badgeCount?
NavigationAppSelectorSelector 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

ComponenteDescripciónProps principales
ReviewStarsDisplay read-only de estrellas (1-5)rating, size?, color?
InteractiveStarRatingInput de 5 estrellas con interacción táctilvalue, onChange, size?, disabled?
SelectableOptionBoxSelector con estado activo/inactivo y contenido personalizableselected, onPress, children
StarRatingTutorialOverlayOverlay de onboarding que explica cómo usar el rating de estrellasvisible, onDismiss
QueryClientProviderSetup de React Query con configuración globalchildren
KeyboardHeightTrackerObservador del teclado que reporta su altura actualComponente 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.