Question 243867 in React native Question posted in
The official React Native documentation can be found here.

React native check if there is internet connection via listener

In your opinion this is the right approach:

  const [isNetwork, setIsNetwork] = useState(true);
  const [isChangeNetwork, setIsChangeNetwork] = useState(false);



useEffect(() => {
    NetInfo.fetch().then(({ isConnected, isInternetReachable }) =>
      setIsNetwork(isConnected && isInternetReachable)
    );
    const unsubscribe = NetInfo.addEventListener(
      ({ isConnected, isInternetReachable }) => {
        setIsNetwork(isConnected && isInternetReachable);
        setIsChangeNetwork(true);
      });
    return () => unsubscribe.remove();
  }, []);


...

 <Snackbar
          visible={isChangeNetwork}
          onDismiss={() => setIsChangeNetwork(false)}
          duration={3000}
          theme={{ colors: { inverseSurface: isNetwork ? 'green' : 'red' } }}>
          {isNetwork ? "Internet" : "No Internet"}
        </Snackbar>

First I get the error: here: return () => unsubscribe.remove();
Visual studio also tells me:

Property 'remove' does not exist in type 'NetInfoSubscription'.ts(2339)

enter image description here

Can you suggest me a better method?

One problem is that when starting the app, even if there is internet, the Snackbar appears and says there is internet.

Instead I want the Snackbar to appear only in these cases:

  1. It is not there when starting the app
  2. There is a change of state, like here for example:

a) First there is internet (then nothing appears), then there is no internet (then the Snackbar appears)

b) First there is no internet (then the Snackbar appears), then there is the internet (then the Snackbar appears)

Can you give me a hand?

Tags:

2

Answers


  1. 0

    Your logic is correct, the only thing is to use unsubscribe();
    instead unsubscribe.remove();

    useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(
      ({ isInternetReachable }) => {
        if(isNetwork != isInternetReachable) {
          setIsNetwork(isInternetReachable);
          setIsChangeNetwork(true);
        }
      });
    return () => unsubscribe();
}, []);
    Login or Signup to reply.
  2. 0

    For my project I made custom hook of netInfo, it works fine for me you can try using below code with your snackBar,

    useNetInfo.js ::::::Custom Hook

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

const useNetInfo = () => {
  
  const [connectionInfo, setConnectionInfo] = useState(false);

  useEffect(() => {

    NetInfo.fetch().then(state => {
      console.log(blue(':::-> Is Internet connected '), state.isConnected);
      setConnectionInfo(state.isConnected);
    });

   let netInfoListener = NetInfo.addEventListener(state => {
      console.log(blue(':::-> Internet connection sate '), state.isConnected);
      setConnectionInfo(state.isConnected);
    });

    return () => netInfoListener  //<- Try this Instead of netInfoListener.remove();


  }, [connectionInfo]);

  return [connectionInfo];
};

export default useNetInfo;

    App.js

    const App = () => {

  const [connectionInfo] = useNetInfo(); //<- Here's how I've used netInfo customHook

  console.log(connectionInfo)

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <NavigationContainer>
          <Main />
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
};

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search