React Hooks

/**
 * A React Hook into this library's singleton which updates when the connection state changes.
 * @param configuration - Configure the isolated network checker managed by this hook
 * @returns The connection state
 */
function useNetInfo(
  configuration?: Partial<NetInfoConfiguration>
): NetInfoState;

import React from 'react';
import { useNetInfo } from "@react-native-community/netinfo";

function NetworkStatus() {
  const netInfo = useNetInfo();

  return (
    <div>
      <p>Type: {netInfo.type}</p>
      <p>Is Connected: {netInfo.isConnected ? 'Yes' : 'No'}</p>
      <p>Is Internet Reachable: {netInfo.isInternetReachable ? 'Yes' : 'No'}</p>
      
      {netInfo.type === 'wifi' && netInfo.details && (
        <div>
          <p>SSID: {netInfo.details.ssid}</p>
          <p>Signal Strength: {netInfo.details.strength}</p>
        </div>
      )}
    </div>
  );
}

// With custom configuration
function NetworkStatusWithConfig() {
  const netInfo = useNetInfo({
    reachabilityUrl: 'https://www.google.com/generate_204',
    reachabilityTest: async (response) => response.status === 204,
  });

  return <div>Connected: {netInfo.isConnected ? 'Yes' : 'No'}</div>;
}

/**
 * A React Hook which manages an isolated instance of the network info manager.
 * This is not a hook into a singleton shared state. NetInfo.configure, NetInfo.addEventListener,
 * NetInfo.fetch, NetInfo.refresh are performed on a global singleton and have no affect on this hook.
 * @param isPaused - Pause the internal network checks
 * @param configuration - Configure the isolated network checker managed by this hook
 * @returns the netInfo state and a refresh function
 */
function useNetInfoInstance(
  isPaused?: boolean,
  configuration?: Partial<NetInfoConfiguration>
): {
  netInfo: NetInfoState;
  refresh: () => void;
};

import React, { useState } from 'react';
import { useNetInfoInstance } from "@react-native-community/netinfo";

function IsolatedNetworkMonitor() {
  const [isPaused, setIsPaused] = useState(false);
  
  const { netInfo, refresh } = useNetInfoInstance(isPaused, {
    reachabilityUrl: 'https://example.com/ping',
    reachabilityShortTimeout: 3000,
  });

  return (
    <div>
      <h3>Isolated Network Monitor</h3>
      <p>Type: {netInfo.type}</p>
      <p>Connected: {netInfo.isConnected ? 'Yes' : 'No'}</p>
      
      <button onClick={() => setIsPaused(!isPaused)}>
        {isPaused ? 'Resume' : 'Pause'} Monitoring
      </button>
      
      <button onClick={refresh}>
        Refresh Now
      </button>
      
      {netInfo.type === 'cellular' && netInfo.details && (
        <div>
          <p>Generation: {netInfo.details.cellularGeneration}</p>
          <p>Carrier: {netInfo.details.carrier}</p>
        </div>
      )}
    </div>
  );
}

// Multiple isolated instances
function MultipleMonitors() {
  const monitor1 = useNetInfoInstance(false, {
    reachabilityUrl: 'https://google.com/generate_204',
  });
  
  const monitor2 = useNetInfoInstance(false, {
    reachabilityUrl: 'https://cloudflare.com',
    reachabilityTest: async (response) => response.status === 200,
  });

  return (
    <div>
      <div>
        <h4>Monitor 1 (Google)</h4>
        <p>Connected: {monitor1.netInfo.isConnected ? 'Yes' : 'No'}</p>
        <button onClick={monitor1.refresh}>Refresh</button>
      </div>
      
      <div>
        <h4>Monitor 2 (Cloudflare)</h4>
        <p>Connected: {monitor2.netInfo.isConnected ? 'Yes' : 'No'}</p>
        <button onClick={monitor2.refresh}>Refresh</button>
      </div>
    </div>
  );
}

import { useNetInfo, useNetInfoInstance, configure } from "@react-native-community/netinfo";

function NetworkComparison() {
  // This hook will be affected by configure() calls
  const globalState = useNetInfo();
  
  // This hook maintains its own state, unaffected by global configure()
  const { netInfo: isolatedState } = useNetInfoInstance();

  return (
    <div>
      <h3>Global State</h3>
      <p>Type: {globalState.type}</p>
      
      <h3>Isolated State</h3>
      <p>Type: {isolatedState.type}</p>
      
      <button onClick={() => configure({ reachabilityUrl: 'https://example.com' })}>
        Configure Global (only affects global state)
      </button>
    </div>
  );
}

interface NetInfoConfiguration {
  reachabilityUrl: string;
  reachabilityMethod?: NetInfoMethodType;
  reachabilityHeaders?: Record<string, string>;
  reachabilityTest: (response: Response) => Promise<boolean>;
  reachabilityLongTimeout: number;
  reachabilityShortTimeout: number;
  reachabilityRequestTimeout: number;
  reachabilityShouldRun: () => boolean;
  shouldFetchWiFiSSID: boolean;
  useNativeReachability: boolean;
}

type NetInfoMethodType = 'HEAD' | 'GET';