@umituz/react-native-offline

Network connectivity state management for React Native apps - Offline detection, online/offline state tracking.

Features

• ✅ Network Detection - Real-time network connectivity monitoring
• ✅ Universal Support - Works on iOS, Android, and Web
• ✅ NetInfo Integration - Uses React Native NetInfo for accurate detection
• ✅ Zustand Store - Global state management for network state
• ✅ React Hooks - Easy integration with React components
• ✅ Type-Safe - Full TypeScript support

Installation

npm install @umituz/react-native-offline

Peer Dependencies

npm install @react-native-community/netinfo zustand

Usage

Basic Usage

import { useOffline } from '@umituz/react-native-offline';

function MyComponent() {
  const { isOnline, isOffline, connectionType } = useOffline();

  if (isOffline) {
    return <OfflineBanner />;
  }

  return <YourContent />;
}

Using Store Directly

import { useOfflineState } from '@umituz/react-native-offline';

function MyComponent() {
  const isOffline = useOfflineState((state) => state.isOffline);

  return (
    <View>
      {isOffline && <Text>You are offline</Text>}
    </View>
  );
}

With Online Callback

import { useOfflineWithMutations } from '@umituz/react-native-offline';

function MyComponent() {
  const { isOnline, isOffline } = useOfflineWithMutations(async () => {
    // Sync data when coming back online
    await syncLocalData();
  });

  if (isOffline) {
    return <OfflineBanner />;
  }

  return <YourContent />;
}

Manual State Control

import { useOfflineStore } from '@umituz/react-native-offline';

function TestComponent() {
  const store = useOfflineStore();

  const handleForceOffline = () => {
    store.setOffline();
  };

  const handleForceOnline = () => {
    store.setOnline();
  };

  return (
    <View>
      <Button onPress={handleForceOffline} title="Force Offline" />
      <Button onPress={handleForceOnline} title="Force Online" />
    </View>
  );
}

API Reference

useOffline()

Primary hook for accessing offline state. Automatically subscribes to network changes.

Returns:

• isOnline: boolean - Whether device is online
• isOffline: boolean - Whether device is offline
• connectionType: string | null - Connection type (wifi, cellular, etc.)
• isInternetReachable: boolean | null - Whether internet is reachable
• lastOnlineAt: Date | null - Last time device was online
• lastOfflineAt: Date | null - Last time device went offline
• hasConnection: boolean - Alias for isOnline
• hasInternet: boolean - Whether device has internet access

useOfflineState()

Raw store access hook. Use when you don't need automatic NetInfo subscription.

Returns: Zustand store instance

useOfflineWithMutations(onOnline)

Enhanced version of useOffline that automatically calls a callback when coming back online.

Parameters:

• onOnline: () => Promise<void> - Function to call when device comes back online (e.g., sync data)

Returns: Same as useOffline()

useOfflineStore

Zustand store for offline state management.

Methods:

• updateNetworkState(state: NetInfoState) - Update network state from NetInfo
• setOnline() - Manually set online state
• setOffline() - Manually set offline state

License

MIT

Author

Ümit UZ umit@umituz.com