React Native iOS中使用NetInfo.isConnected时应用崩溃问题求助

Hey there, sorry to hear you're stuck with this frustrating crash when your app goes from online to offline on iOS. Let's walk through the most common causes and actionable fixes to get this sorted out.

Common Root Causes #

This issue typically boils down to one of these scenarios:

• Missing null/undefined checks in your network state listener
• Using deprecated NetInfo APIs instead of the community-maintained package
• Unhandled state changes in your UI that rely on online-only data
• Temporary null values passed from iOS's native network callback during state transitions

Step-by-Step Fixes #

1. Migrate to the Official Community NetInfo Package #

The old built-in NetInfo from react-native is deprecated and can have inconsistent behavior on iOS. Switch to @react-native-community/netinfo first:

# Install the package
npm install @react-native-community/netinfo
# Or with yarn
yarn add @react-native-community/netinfo

Then run cd ios && pod install to ensure iOS dependencies are linked correctly (critical for RN 0.60+ projects).

2. Add Null Checks to Your Listener Callback #

iOS often passes a null state briefly when switching from online to offline. If your code tries to access properties on this null value, it'll crash immediately. Update your listener to handle this:

import NetInfo from '@react-native-community/netinfo';
import { useEffect, useState } from 'react';

function NetworkStatus() {
  const [isOnline, setIsOnline] = useState(false);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((networkState) => {
      // Guard against null state before accessing properties
      if (!networkState) return;

      // Use isConnected AND isInternetReachable for accurate status
      const currentStatus = networkState.isConnected && networkState.isInternetReachable;
      setIsOnline(Boolean(currentStatus));
    });

    // Clean up the listener on unmount
    return () => unsubscribe();
  }, []);

  return <Text>{isOnline ? 'Online' : 'Offline'}</Text>;
}

The key here is the if (!networkState) return check—this prevents your code from trying to read properties on a null value.

3. Fix UI Rendering Logic #

If your crash happens when updating the UI after going offline, you're likely accessing data that only exists when the app is online. Add defensive checks using optional chaining (?.) or conditional rendering:

// Bad: Will crash if `onlineData` is null when offline
<Text>{onlineData.details.description}</Text>

// Good: Uses optional chaining to handle null/undefined
<Text>{onlineData?.details?.description || 'No data available offline'}</Text>

// Or use conditional rendering
{isOnline ? (
  <Text>{onlineData.details.description}</Text>
) : (
  <Text>Offline mode: No live data</Text>
)}

4. Check Crash Logs for Exact Details #

If the above fixes don't work, get precise crash info from Xcode:

1. Open Xcode and go to Window > Organizer
2. Select your app and find the latest crash report
3. Look at the call stack—if it's a JS crash, it'll show the exact line number and variable causing the issue; if it's native, check for NetInfo-related native code errors

Final Notes #

Make sure your React Native version is compatible with the @react-native-community/netinfo package (check the package's README for version compatibility). Also, test on a physical iOS device instead of just the simulator—network state changes can behave differently in simulators.

内容的提问来源于stack exchange，提问作者Simranjit Singh