CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-community--netinfo

React Native Network Info API for iOS & Android

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

React Native NetInfo

React Native NetInfo provides a comprehensive API for accessing network information on iOS, Android, macOS, Windows, and Web platforms. It enables developers to retrieve connection type and connection quality information through a unified API across all supported platforms with both global singleton and isolated instance patterns.

Package Information

  • Package Name: @react-native-community/netinfo
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @react-native-community/netinfo

Core Imports

import NetInfo from "@react-native-community/netinfo";

Or use named imports:

import { 
  configure, 
  fetch, 
  addEventListener, 
  useNetInfo, 
  NetInfoState, 
  NetInfoStateType 
} from "@react-native-community/netinfo";

For CommonJS:

const NetInfo = require("@react-native-community/netinfo");

Basic Usage

import NetInfo from "@react-native-community/netinfo";

// Get network state once
const state = await NetInfo.fetch();
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);

// Subscribe to network state updates
const unsubscribe = NetInfo.addEventListener(state => {
  console.log("Connection type", state.type);
  console.log("Is connected?", state.isConnected);
});

// Unsubscribe
unsubscribe();

Architecture

React Native NetInfo is built around several key components:

  • Global Singleton: Shared network state manager accessible through static methods
  • Isolated Instances: Independent network state managers for specific use cases
  • Native Platform Bridges: Native implementations for iOS, Android, macOS, Windows
  • Web Fallback: Browser-based implementation using Network Information API
  • React Integration: Hooks for seamless React component integration
  • Configuration System: Flexible reachability testing with customizable endpoints

Capabilities

Network State Management

Core network information functionality for retrieving connection status, connection type, and internet reachability. Supports both one-time queries and continuous monitoring.

function fetch(requestedInterface?: string): Promise<NetInfoState>;
function refresh(): Promise<NetInfoState>;
function addEventListener(listener: NetInfoChangeHandler): NetInfoSubscription;
function configure(configuration: Partial<NetInfoConfiguration>): void;

Network State Management

React Hooks

React hooks for integrating network state into components with automatic re-rendering on network changes. Includes both global singleton and isolated instance patterns.

function useNetInfo(
  configuration?: Partial<NetInfoConfiguration>
): NetInfoState;

function useNetInfoInstance(
  isPaused?: boolean,
  configuration?: Partial<NetInfoConfiguration>
): {
  netInfo: NetInfoState;
  refresh: () => void;
};

React Hooks

Configuration

Configuration system for customizing network reachability testing, including custom endpoints, timeout settings, and platform-specific options.

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

Configuration

Core Types

enum NetInfoStateType {
  unknown = 'unknown',
  none = 'none',
  cellular = 'cellular',
  wifi = 'wifi',
  bluetooth = 'bluetooth',
  ethernet = 'ethernet',
  wimax = 'wimax',
  vpn = 'vpn',
  other = 'other'
}

enum NetInfoCellularGeneration {
  '2g' = '2g',
  '3g' = '3g',
  '4g' = '4g',
  '5g' = '5g'
}

type NetInfoState = NetInfoDisconnectedStates | NetInfoConnectedStates;

type NetInfoChangeHandler = (state: NetInfoState) => void;
type NetInfoSubscription = () => void;
type NetInfoMethodType = 'HEAD' | 'GET';
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-native-community/netinfo@11.4.x
Publish Source
CLI
Badge
tessl/npm-react-native-community--netinfo badge