0
# React Native NetInfo
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @react-native-community/netinfo
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @react-native-community/netinfo`
10

11
## Core Imports
12

13
```typescript
14
import NetInfo from "@react-native-community/netinfo";
15
```
16

17
Or use named imports:
18

19
```typescript
20
import { 
21
  configure, 
22
  fetch, 
23
  addEventListener, 
24
  useNetInfo, 
25
  NetInfoState, 
26
  NetInfoStateType 
27
} from "@react-native-community/netinfo";
28
```
29

30
For CommonJS:
31

32
```javascript
33
const NetInfo = require("@react-native-community/netinfo");
34
```
35

36
## Basic Usage
37

38
```typescript
39
import NetInfo from "@react-native-community/netinfo";
40

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

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

52
// Unsubscribe
53
unsubscribe();
54
```
55

56
## Architecture
57

58
React Native NetInfo is built around several key components:
59

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

67
## Capabilities
68

69
### Network State Management
70

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

73
```typescript { .api }
74
function fetch(requestedInterface?: string): Promise<NetInfoState>;
75
function refresh(): Promise<NetInfoState>;
76
function addEventListener(listener: NetInfoChangeHandler): NetInfoSubscription;
77
function configure(configuration: Partial<NetInfoConfiguration>): void;
78
```
79

80
[Network State Management](./network-state.md)
81

82
### React Hooks
83

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

86
```typescript { .api }
87
function useNetInfo(
88
  configuration?: Partial<NetInfoConfiguration>
89
): NetInfoState;
90

91
function useNetInfoInstance(
92
  isPaused?: boolean,
93
  configuration?: Partial<NetInfoConfiguration>
94
): {
95
  netInfo: NetInfoState;
96
  refresh: () => void;
97
};
98
```
99

100
[React Hooks](./hooks.md)
101

102
### Configuration
103

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

106
```typescript { .api }
107
interface NetInfoConfiguration {
108
  reachabilityUrl: string;
109
  reachabilityMethod?: NetInfoMethodType;
110
  reachabilityHeaders?: Record<string, string>;
111
  reachabilityTest: (response: Response) => Promise<boolean>;
112
  reachabilityLongTimeout: number;
113
  reachabilityShortTimeout: number;
114
  reachabilityRequestTimeout: number;
115
  reachabilityShouldRun: () => boolean;
116
  shouldFetchWiFiSSID: boolean;
117
  useNativeReachability: boolean;
118
}
119
```
120

121
[Configuration](./configuration.md)
122

123
## Core Types
124

125
```typescript { .api }
126
enum NetInfoStateType {
127
  unknown = 'unknown',
128
  none = 'none',
129
  cellular = 'cellular',
130
  wifi = 'wifi',
131
  bluetooth = 'bluetooth',
132
  ethernet = 'ethernet',
133
  wimax = 'wimax',
134
  vpn = 'vpn',
135
  other = 'other'
136
}
137

138
enum NetInfoCellularGeneration {
139
  '2g' = '2g',
140
  '3g' = '3g',
141
  '4g' = '4g',
142
  '5g' = '5g'
143
}
144

145
type NetInfoState = NetInfoDisconnectedStates | NetInfoConnectedStates;
146

147
type NetInfoChangeHandler = (state: NetInfoState) => void;
148
type NetInfoSubscription = () => void;
149
type NetInfoMethodType = 'HEAD' | 'GET';
150
```