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.

​
Gestion de Estado

La app utiliza un patron hibrido para la gestion de estado:
  • Zustand para estado local/cliente (UI, sesion, preferencias)
  • TanStack React Query para estado del servidor (datos remotos, cache, sincronizacion)
  • React Context para funcionalidades transversales de UI

​
Zustand Stores

Ubicados en src/shared/stores/:
StoreArchivoPropositoPersistencia
useAppStoreappStore.tsEstado de inicializacion (isInitializing, isReady, resetAllStores)No
useOnboardingStoreonboardingStore.tsEstado de onboarding (hasSeenOnboarding, isLoaded) con initialize, markComplete, markUnseen, clearAsyncStorage (manual)
useKeyboardStorekeyboardStore.tsAltura del teclado (height, isVisible) con valor por defecto de 336pxAsyncStorage (middleware persist)
usePendingDeepLinkStorependingDeepLinkStore.tsCola de deep links pendientes (pendingRoute, setPendingRoute, consumePendingRoute)No

​
Detalle: authStore (Almacenamiento Hibrido)

El authStore implementa un sistema de almacenamiento hibrido para separar datos sensibles de datos regulares: 
// Almacenados con expo-secure-store (cifrado en dispositivo)
{
  accessToken: string;
  refreshToken: string;
  tokenExpiry: number;
  user: { id, email, displayName, phone };
}
El authStore usa partialize para seleccionar que datos se persisten y un createHybridStorage personalizado que enruta automaticamente los datos sensibles a SecureStore y el resto a AsyncStorage.

​
Detalle: chatStore (Middlewares)

create<ChatStore>()(
  devtools(                    // Herramientas de desarrollo
    persist(                   // Persistencia en AsyncStorage
      (set, get) => ({ ... }),
      {
        name: 'chat-storage',
        partialize: (state) => ({
          streamToken,
          streamUserId,
          tokenExpiry,
          currentUser,
          chatAccessStatus,
        }),
      }
    ),
    { name: 'ChatStore' }
  )
);

​
TanStack React Query

La configuracion del QueryClient se define en src/shared/constants/queryClient.ts:
ParametroValorDescripcion
staleTime5 minutos (300,000ms)Tiempo antes de que los datos se consideren obsoletos
gcTime30 minutos (1,800,000ms)Tiempo que los datos inactivos permanecen en cache
retry1Numero de reintentos ante fallos
refetchOnWindowFocusfalseNo refrescar al volver a la app
El queryClient se exporta desde app/_layout.tsx y se inicializa una sola vez. El servicio queryInvalidationService se conecta al cliente para permitir invalidaciones de cache desde cualquier parte de la app.

​
React Contexts

BottomSheetContext

Ubicacion: src/shared/contexts/BottomSheetContext.tsxGestiona bottom sheets globales usando @gorhom/bottom-sheet. Provee:
  • showBottomSheet(config) - Mostrar un bottom sheet
  • hideBottomSheet() - Ocultar el bottom sheet activo
  • hideAllBottomSheets() - Ocultar todos los bottom sheets
Envuelve toda la aplicacion desde el Root Layout.

ScrollContext

Ubicacion: src/shared/contexts/ScrollContext.tsxTracking de scroll offset y viewport height. Permite a componentes hijos reaccionar a la posicion de scroll del contenedor padre.

​
Diagrama de Flujo de Estado

┌─────────────────────────────────────────────────────────┐
│                    UI Components                         │
├──────────────┬──────────────────┬───────────────────────┤
│   Zustand    │  React Query     │   React Context       │
│   Stores     │  (Server State)  │   (UI State)          │
├──────────────┼──────────────────┼───────────────────────┤
│ appStore     │  queries {       │  BottomSheetContext    │
│ authStore    │    staleTime: 5m │  ScrollContext         │
│ chatStore    │    gcTime: 30m   │                       │
│ propertyStore│    retry: 1      │                       │
│ onboarding   │  }               │                       │
│ keyboard     │                  │                       │
│ deepLinks    │                  │                       │
├──────────────┼──────────────────┼───────────────────────┤
│ AsyncStorage │  In-Memory Cache │  React Tree           │
│ SecureStore  │                  │                       │
└──────────────┴──────────────────┴───────────────────────┘

​
Middlewares de Zustand Utilizados

MiddlewareStores que lo usanFuncion
persistauthStore, chatStore, keyboardStorePersiste estado seleccionado entre sesiones
devtoolschatStoreIntegracion con React Native Debugger / Redux DevTools
createJSONStorageauthStore, chatStore, keyboardStoreAdaptador de almacenamiento para persist
El onboardingStore implementa persistencia manual con AsyncStorage directamente (sin el middleware persist), lo que le da mayor control sobre el formato de almacenamiento.