title: How can I run a function when internet connection is established?
body: <p>The app is a quiz, and if user finishes the round he may send the points in firebase. If user is not connected to internet, I save the points in device memory, so when connection is established the points are send in firebase.</p>
  <p>The best would be to let this happen automatically and show a message...
  I'm trying to do this in <code>App.js</code> in a <code>useEffect</code>, but it checks only if I <strong>refresh</strong> the app. I tried <code>withNavigationFocus</code> and <code>useFocusEffect</code> but error: <code>the App.js is unable to get access to navigation...</code>.</p>
  <p>I could also move the code to <code>WelcomeScreen.js</code> and show a button if connection is established to add the points, but it's not that user friendly.</p>
  <p>Any ideas would be appreciated.</p>
  <p>Thanks!</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
  
      const getPoints = async () =&gt; {
        let points = await AsyncStorage.getItem(&quot;savedPoints&quot;);
        if (!!points) {
          const getEmail = async () =&gt; {
            const userData = await AsyncStorage.getItem(&quot;userData&quot;);
            if (userData) {
              const transformedData = JSON.parse(userData);
              const { userEmail } = transformedData;
              return userEmail;
            }
          };
          const email = await getEmail();
          // Give it some time to get the token and userId,
          // because saveData needs them.
          setTimeout(
            async () =&gt; await dispatch(dataActions.saveData(email, +points)),
            3000
          );
          await AsyncStorage.removeItem(&quot;savedPoints&quot;);
        }
      };
  
      NetInfo.fetch().then(state =&gt; {
        if (state.isConnected) {
          console.log(&quot;isConnected&quot;);
          getPoints();
        }
      });
    }, []);
  
  </code></pre>
  <p>The solution</p>
  <p><strong>WelcomeScreen.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>const [isConnected, setIsConnected] = useState(false);
  
    useEffect(() =&gt; {
      console.log(&quot;useEffect welcome&quot;);
      
      const unsub = NetInfo.addEventListener(state =&gt; {
        setIsConnected(state.isConnected);
      });
      
      return () =&gt; unsub();
    }, []);
    
    const getPoints = async () =&gt; {
      console.log(&quot;getPoints welcome&quot;);
      let points = await AsyncStorage.getItem(&quot;savedPoints&quot;);
      if (!!points) {
        const getEmail = async () =&gt; {
          const userData = await AsyncStorage.getItem(&quot;userData&quot;);
          if (userData) {
            // parse converts a string to an object or array
            const transformedData = JSON.parse(userData);
            const { userEmail } = transformedData;
            return userEmail;
          }
        };
        const email = await getEmail();
        // Give it some time to get the token and userId,
        // because saveData needs them.
        setTimeout(
          async () =&gt; await dispatch(dataActions.saveData(email, +points)),
          3000
        );
        await AsyncStorage.removeItem(&quot;savedPoints&quot;);
      }
    };
  
    if (isConnected) getPoints();
  </code></pre>