Ionic 4 + react and Network plugin

Ionic Native
1

Hi All,

I’m working on an Ionic app that will check the network status. I’m working with React for this example. My initial requirement is to get an alert when the network disconnects.

I’m coming from Angular and pretty new to react world.

My question is, how can I get the following code to work, I’ve got the following code (compiles and running on the device)

#Home.tsx
import {
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonButton,
  IonIcon
} from "@ionic/react";
import React from "react";
import { Network } from "@ionic-native/network";

const Home: React.FunctionComponent = () => {
  async function networkStatus() {
    Network.onDisconnect().subscribe(() => {
      alert("disconnected");
    });
  }
  return (
    <div>
      <h1>Sample network test</h1>
    </div>
  );
};

export default Home;

I’m thinking, I need to initialize networkStatus method somewhere, but I’m not sure where to do it ?

If I tried to add a constructor, it gives me a compilation error

constructor(props){
   super(this.process);
   networkStatus()

}
# error
./src/pages/Home.tsx
  Line 13:  Parsing error: ';' expecte

Can someone help me out please, thanks in advance

cheers,

Sam

± ionic info

Ionic:

   Ionic CLI       : 5.2.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 0.0.6

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v8.10.0 (/usr/local/bin/node)
   npm    : 6.10.2
   OS     : macOS Mojave

react #=>  "react": "^16.8.6"
2

Hi Bro #sameera207

install Network information plugin first
ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network

then try to do like this

import { Network } from ‘@ionic-native/network/ngx’;

constructor(private network: Network) { }

// watch network for a disconnection
let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
console.log(‘network was disconnected :-(’);
});

// stop disconnect watch
disconnectSubscription.unsubscribe();

// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
console.log(‘network connected!’);
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait.
// prior to doing any api requests as well.
setTimeout(() => {
if (this.network.type === ‘wifi’) {
console.log(‘we got a wifi connection, woohoo!’);
}
}, 3000);
});

// stop connect watch
connectSubscription.unsubscribe();

3

Hi @ishaquemujtaba, thanks for the reply, but seems like your solution is based on Angular, I’m after a solution with React.

cheers,

Sam

4

Finally got it working by reading source code for Capacitor core documentation

Following is the final working code (if anyone stumble upon the the same issue)

import React, { useEffect, useState } from "react";
import { Plugins } from "@capacitor/core";
import {
  IonContent,
  IonCard,
  IonCardHeader,
  IonCardContent
} from "@ionic/react";

const { Network } = Plugins;

const Home: React.FunctionComponent = () => {
  const [networkState, setNetworkState] = useState("offline");

  useEffect(() => {
    Network.addListener("networkStatusChange", status => {
      setNetworkState(status.connectionType);
    });
  }, []);

  return (
    <>
      <IonContent>
        <IonCard>
          <IonCardHeader>Network test</IonCardHeader>
          <IonCardContent>Network status: {networkState}</IonCardContent>
        </IonCard>
      </IonContent>
    </>
  );
};

export default Home;
2 Likes
5

I recently encountered with Skype problem in my system then I tried to Fix Skype Mic Not Working problem but could not find the exact reason behind the problem.

6

This worked for me. Thanks…