offline-sync

Manage offline-first CRUD operations with React Query, Supabase, and MMKV.

Updated Apr 21, 2026
One-click install
npx skills add https://github.com/anicca-labs/claude --skill offline-sync-anicca-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: offline-sync
Source: https://github.com/anicca-labs/claude/tree/main/plugins/expo-rn-plugin/skills/offline-sync
Command: npx skills add https://github.com/anicca-labs/claude --skill offline-sync-anicca-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, @react-native-community/netinfo, react-native-mmkv, supabase-js, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that write operations made by a user without network connectivity are never lost and are synced back to the server upon reconnection, providing offline support for React Native applications.

Core Features & Use Cases

  • Offline Write Persistence: Ensures data written offline is stored durably and syncs with the server upon reconnect.
  • React Query Integration: Leverages React Query for server state management and cache persistence.
  • Durable Outbox Pattern: Implements a durable outbox pattern for offline writes, preventing data loss.
  • Use Case: Ideal for scenarios where users might be offline for extended periods, such as during travel or in areas with poor connectivity.

Quick Start

Enable offline sync functionality in your React Native app by setting up the required configuration in queryClient.ts.

Frequently Asked Questions about offline-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync offline data automatically when network reconnects in React Native?

To sync offline data, you store write operations durably using a local outbox pattern and trigger automatic synchronization with the server upon network reconnect. This prevents data loss during offline periods in React Native apps.

What is the best way to persist offline writes with React Query and Supabase?

The best way to persist offline writes is implementing a durable outbox pattern that stores mutations locally, integrating React Query for server state management and Supabase as the backend to sync pending data on reconnect.

Do I need MMKV to manage offline data persistence in React Native?

Yes, you need react-native-mmkv for durable local storage of offline writes. It acts as the persistence layer for the outbox pattern, ensuring data integrity while the application waits for network connectivity to sync with Supabase.

How does the durable outbox pattern handle offline CRUD operations?

The durable outbox pattern handles offline CRUD operations by queuing write actions in local storage before they are sent to the server. Upon reconnection, the queue syncs with Supabase to ensure no data is lost.

Can I use React Native NetInfo to detect network connectivity for offline sync?

Yes, you use @react-native-community/netinfo to monitor network status and trigger the synchronization process. When connectivity is restored, it signals the application to flush the offline outbox and sync data with the server.

When should I implement offline sync for a React Native app?

You should implement offline sync when users might be offline for extended periods, such as during travel or in areas with poor connectivity. It ensures write operations are never lost and sync automatically upon reconnection.