react native - NetInfo crash in android

Question

I'm using NetInfo to get the connection but some devices android crash with that

LOG:

Error Tag: Mini App Bundle Message: null Stack: android.net.ConnectivityManager$TooManyRequestsException at android.net.ConnectivityManager.convertServiceException(ConnectivityManager.java:3687) at android.net.ConnectivityManager.sendRequestForNetwork(ConnectivityManager.java:3924) at android.net.ConnectivityManager.registerDefaultNetworkCallback(ConnectivityManager.java:4334) at android.net.ConnectivityManager.registerDefaultNetworkCallback(ConnectivityManager.java:4311) at com.reactnativecommunity.netinfo.NetworkCallbackConnectivityReceiver.register(NetworkCallbackConnectivityReceiver.java:42) at com.reactnativecommunity.netinfo.NetInfoModule.initialize(NetInfoModule.java:38) at com.facebook.react.bridge.ModuleHolder.doInitialize(ModuleHolder.java:222) at com.facebook.react.bridge.ModuleHolder.markInitializable(ModuleHolder..java:97) at com.facebook.react.bridge.NativeModuleRegistry.notifyJSInstanceInitialized(NativeModuleRegistry.java:102) at com.facebook.react.bridge.CatalystInstanceImpl$2.run(CatalystInstanceImpl.java:441) at android.os.Handler.handleCallback(Handler.java:883) at android.os.Handler.dispatchMessage(Handler.java:100) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26) at android.os.Looper.loop(Looper.java:237) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225) at java.lang.Thread.run(Thread.java:919)

In my code:

import MaxApiManager from '@common/MaxApiManager';
import { throttle } from 'lodash';
import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Image, StyleSheet, Text } from 'react-native';
import ChatImages from 'src/screens/Chat/img';
import { mapNameWithLocalContact } from 'src/screens/Chat/utils/ChatUtils';
import { Avatar, Skeleton } from '@momo-platform/component-kits';
import NetInfo from '@react-native-community/netinfo';

export function HeaderConversation({
    relationShip,
    relationshipText,
    friendInfo = {},
    goToProfile = () => {},
}) {
    const [isConnected, setIsConnected] = useState(true);

    useEffect(() => {
        NetInfo?.fetch()?.then(state => {
            setIsConnected(state.isConnected);
        });
    }, []);

    return (
        <View style={styles.headerLeft}>
            <TouchableOpacity
                style={styles.buttonBack}
                onPress={throttle(() => MaxApiManager.dismiss(), 1000, {
                    leading: true,
                    trailing: false,
                })}
            >
                <Image source={ChatImages.ic_back} style={styles.icBack} />
            </TouchableOpacity>
            {relationShip || isConnected === false ? (
                <TouchableOpacity onPress={goToProfile} style={styles.info}>
                    <Avatar
                        size="small"
                        name={friendInfo?.name}
                        source={{ uri: friendInfo?.avatar }}
                    />

                    <View style={{ marginLeft: 12 }}>
                        <Text style={styles.txtRoomName}>
                            {mapNameWithLocalContact({
                                phone: friendInfo?.phone,
                                name: friendInfo?.name,
                            })}
                        </Text>
                        {relationShip && <Text>{relationshipText}</Text>}
                    </View>
                </TouchableOpacity>
            ) : (
                <View style={{ paddingTop: 12 }}>
                    <Skeleton.Custom
                        left={<Skeleton.Media size={35} />}
                        style={styles.skeletonItem}
                    >
                        <Skeleton.Line style={styles.width_1_9} />
                        <Skeleton.Line style={styles.width_1_10} />
                    </Skeleton.Custom>
                </View>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    headerLeft: {
        paddingLeft: 8,
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonBack: { padding: 8, marginRight: 4 },
    width_1_9: { width: 150, height: 16 },
    width_1_10: { width: 100, height: 12, marginTop: -6 },
    skeletonItem: {
        marginVertical: 5,
    },
    info: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    txtRoomName: { fontSize: 16, fontWeight: 'bold' },
    icBack: { width: 24, height: 24 },
});

AnalyticsModule.js

const AnalyticModule = {
    netInfoSub: null,

    initialize(deviceInfo) {
        UserProfile.getInstance().getData().then((profile) => {
            Storage.getItem("", (ipAddress) => {
                StorageCache.get("").then(location => {
                    if (!this.netInfoSub) {
                        this.netInfoSub = NetInfo.addEventListener((state) => {
                            let netInfo = getNetworkInfo(state);
                            this.TRACKING_NETWORK_INFO = JSON.stringify(netInfo);
                        })
                    }
                })
            })
        })
    },
}

More infor: @react-native-community/netinfo: ^5.9.9 react-native: 0.61.5

Answer 1

The easiest way to obtain network status information in your functional component is by using useNetInfo hook

import {useNetInfo} from '@react-native-community/netinfo';

const YourComponent = () => {
  const netInfo = useNetInfo();

  return (
    <View>
      <Text>Type: {netInfo.type}</Text>
      <Text>Is Connected? {netInfo.isConnected.toString()}</Text>
    </View>
  );
};

for more details on property object: netinfo Docs