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

Stores Globales
Stores de Modulos

Ubicados en src/shared/stores/:

Store	Archivo	Proposito	Persistencia
`useAppStore`	`appStore.ts`	Estado de inicializacion (`isInitializing`, `isReady`, `resetAllStores`)	No
`useOnboardingStore`	`onboardingStore.ts`	Estado de onboarding (`hasSeenOnboarding`, `isLoaded`) con `initialize`, `markComplete`, `markUnseen`, `clear`	AsyncStorage (manual)
`useKeyboardStore`	`keyboardStore.ts`	Altura del teclado (`height`, `isVisible`) con valor por defecto de 336px	AsyncStorage (middleware `persist`)
`usePendingDeepLinkStore`	`pendingDeepLinkStore.ts`	Cola de deep links pendientes (`pendingRoute`, `setPendingRoute`, `consumePendingRoute`)	No

Cada modulo puede tener su propio store:

Store	Ubicacion	Proposito	Middlewares
`useAuthStore`	`src/modules/auth/store/`	Usuario, tokens (access/refresh/expiry), flags de autenticacion (`isAuthenticated`, `isVisitor`), operaciones de login/logout/register	`persist` (almacenamiento hibrido)
`useChatStore`	`src/modules/chat/store/`	Stream Chat client, estado de conexion, canal activo, contador de no leidos, token de Stream	`devtools` + `persist` (AsyncStorage)
`usePropertyStore`	`src/modules/property/store/`	Propiedad seleccionada, lista de propiedades owned, propiedades generales	Ninguno

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 };
}

// Almacenados con AsyncStorage
{
  isAuthenticated: boolean;
  isVisitor: boolean;
  // ...otros flags de estado
}

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:

Parametro	Valor	Descripcion
`staleTime`	5 minutos (300,000ms)	Tiempo antes de que los datos se consideren obsoletos
`gcTime`	30 minutos (1,800,000ms)	Tiempo que los datos inactivos permanecen en cache
`retry`	1	Numero de reintentos ante fallos
`refetchOnWindowFocus`	`false`	No 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

Middleware	Stores que lo usan	Funcion
`persist`	authStore, chatStore, keyboardStore	Persiste estado seleccionado entre sesiones
`devtools`	chatStore	Integracion con React Native Debugger / Redux DevTools
`createJSONStorage`	authStore, chatStore, keyboardStore	Adaptador 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.

Overview

Architecture

Modules

Shared

Integrations

Guides

Gestion de Estado

Gestion de Estado

Zustand Stores

Detalle: authStore (Almacenamiento Hibrido)

Detalle: chatStore (Middlewares)

TanStack React Query

React Contexts

BottomSheetContext

ScrollContext

Diagrama de Flujo de Estado

Middlewares de Zustand Utilizados

​Gestion de Estado

​Zustand Stores

​Detalle: authStore (Almacenamiento Hibrido)

​Detalle: chatStore (Middlewares)

​TanStack React Query

​React Contexts

BottomSheetContext

ScrollContext

​Diagrama de Flujo de Estado

​Middlewares de Zustand Utilizados

Gestion de Estado

Zustand Stores

Detalle: authStore (Almacenamiento Hibrido)

Detalle: chatStore (Middlewares)

TanStack React Query

React Contexts

Diagrama de Flujo de Estado

Middlewares de Zustand Utilizados