or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdhooks.mdindex.mdnetwork-state.md
tile.json

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

React Native Network Info API for iOS & Android

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-native-community/netinfo@11.4.x

To install, run

npx @tessl/cli install tessl/npm-react-native-community--netinfo@11.4.0

index.mddocs/

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