React Native Network Info API for iOS & Android
—
Configuration system for customizing network reachability testing, including custom endpoints, timeout settings, and platform-specific options.
The main configuration interface for customizing how network reachability is tested and network information is gathered.
interface NetInfoConfiguration {
/** The URL to call to test if the internet is reachable */
reachabilityUrl: string;
/** The HTTP request method to use for reachability testing */
reachabilityMethod?: NetInfoMethodType;
/** HTTP headers to include in reachability requests */
reachabilityHeaders?: Record<string, string>;
/** Function to determine if reachability response indicates internet access */
reachabilityTest: (response: Response) => Promise<boolean>;
/** Timeout between reachability checks when internet was previously detected */
reachabilityLongTimeout: number;
/** Timeout between reachability checks when internet was not previously detected */
reachabilityShortTimeout: number;
/** Maximum time allowed for a single reachability check */
reachabilityRequestTimeout: number;
/** Function to determine if reachability checks should run */
reachabilityShouldRun: () => boolean;
/** Whether to attempt fetching WiFi SSID on supported platforms */
shouldFetchWiFiSSID: boolean;
/** Whether to use native platform reachability checks when available */
useNativeReachability: boolean;
}
type NetInfoMethodType = 'HEAD' | 'GET';Default configuration varies by platform to optimize for each environment.
Standard Platforms (iOS, Android, macOS, Windows):
const DEFAULT_CONFIGURATION = {
reachabilityUrl: 'https://clients3.google.com/generate_204',
reachabilityMethod: 'HEAD',
reachabilityHeaders: {},
reachabilityTest: (response: Response) => Promise.resolve(response.status === 204),
reachabilityShortTimeout: 5 * 1000, // 5 seconds
reachabilityLongTimeout: 60 * 1000, // 60 seconds
reachabilityRequestTimeout: 15 * 1000, // 15 seconds
reachabilityShouldRun: () => true,
shouldFetchWiFiSSID: false,
useNativeReachability: true
};Web Platform:
const DEFAULT_WEB_CONFIGURATION = {
reachabilityUrl: '/',
reachabilityMethod: 'HEAD',
reachabilityHeaders: {},
reachabilityTest: (response: Response) => Promise.resolve(response.status === 200),
reachabilityShortTimeout: 5 * 1000, // 5 seconds
reachabilityLongTimeout: 60 * 1000, // 60 seconds
reachabilityRequestTimeout: 15 * 1000, // 15 seconds
reachabilityShouldRun: () => true,
shouldFetchWiFiSSID: true,
useNativeReachability: true
};import { configure } from "@react-native-community/netinfo";
// Use custom reachability endpoint
configure({
reachabilityUrl: 'https://www.google.com/generate_204',
reachabilityTest: async (response) => response.status === 204,
});
// Use different endpoint with GET method
configure({
reachabilityUrl: 'https://httpbin.org/status/200',
reachabilityMethod: 'GET',
reachabilityTest: async (response) => response.status === 200,
});configure({
reachabilityUrl: 'https://api.company.com/health',
reachabilityHeaders: {
'Authorization': 'Bearer token123',
'X-API-Key': 'api-key-456',
'User-Agent': 'MyApp/1.0.0',
},
reachabilityTest: async (response) => {
const data = await response.json();
return data.status === 'healthy';
},
});configure({
// Check every 30 seconds when connected
reachabilityLongTimeout: 30 * 1000,
// Check every 2 seconds when disconnected
reachabilityShortTimeout: 2 * 1000,
// Allow 10 seconds per request
reachabilityRequestTimeout: 10 * 1000,
});configure({
// Only run reachability checks during business hours
reachabilityShouldRun: () => {
const hour = new Date().getHours();
return hour >= 9 && hour <= 17;
},
});
// Or based on app state
configure({
reachabilityShouldRun: () => {
// Only test when app is in foreground
return AppState.currentState === 'active';
},
});import { Platform } from 'react-native';
configure({
// Different endpoints per platform
reachabilityUrl: Platform.select({
ios: 'https://captive.apple.com/hotspot-detect.html',
android: 'https://clients3.google.com/generate_204',
default: 'https://www.google.com/generate_204',
}),
// Enable WiFi SSID fetching on iOS (requires meeting Apple's requirements)
shouldFetchWiFiSSID: Platform.OS === 'ios',
// Use native reachability when available
useNativeReachability: Platform.OS !== 'web',
});configure({
reachabilityUrl: 'https://api.example.com/connectivity',
reachabilityMethod: 'GET',
reachabilityHeaders: {
'Accept': 'application/json',
},
reachabilityTest: async (response) => {
try {
// Custom logic for determining connectivity
if (response.status !== 200) {
return false;
}
const data = await response.json();
// Check if API is responsive and not in maintenance
return data.status === 'ok' && !data.maintenance;
} catch (error) {
// JSON parsing failed, assume no connectivity
return false;
}
},
});configure({
// Disable automatic reachability testing
reachabilityShouldRun: () => false,
// Don't attempt to fetch WiFi SSID
shouldFetchWiFiSSID: false,
// Force use of custom reachability instead of native
useNativeReachability: false,
});To fetch WiFi SSID on iOS, your app must meet at least one of Apple's requirements and set shouldFetchWiFiSSID: true:
Setting shouldFetchWiFiSSID: true without meeting requirements will cause memory leaks.
For WiFi details (SSID, BSSID) on Android, you need:
ACCESS_FINE_LOCATION permission in AndroidManifest.xml| Feature | iOS | Android | macOS | Windows | Web |
|---|---|---|---|---|---|
| Basic connectivity | ✅ | ✅ | ✅ | ✅ | ✅ |
| WiFi SSID | ✅* | ✅* | ✅ | ✅ | ❌ |
| Cellular generation | ✅ | ✅ | ❌ | ✅ | ❌ |
| Connection cost | ✅ | ✅ | ✅ | ✅ | ✅ |
| Native reachability | ✅ | ✅ | ✅ | ✅ | ❌ |
*Requires permissions/configuration
Install with Tessl CLI
npx tessl i tessl/npm-react-native-community--netinfo