@reason-react-native/netinfo v5.9.1

@reason-react-native/netinfo

ReScript / Reason bindings for @react-native-community/netinfo.

Exposed as ReactNativeNetInfo module.

@reason-react-native/netinfo X.y.* means it's compatible with @react-native-community/netinfo X.y.*

Installation

When @react-native-community/netinfo is properly installed & configured by following their installation instructions, you can install the bindings:

npm install @reason-react-native/netinfo
# or
yarn add @reason-react-native/netinfo

@reason-react-native/netinfo should be added to bs-dependencies in your bsconfig.json:

{
  //...
  "bs-dependencies": [
    "reason-react",
    "reason-react-native",
    // ...
+    "@reason-react-native/netinfo"
  ],
  //...
}

Usage

Types

netInfoConfiguration

To be used only when the platform does not natively supply information on internet reachability.

netInfoStateType

Kind of the current network connection. Valid values are:

netInfoCellularGeneration

Cellular generation of the current network connection. Valid values are:

netInfoState

type netInfoState = {
  .
  "_type": netInfoStateType,
  "isConnected": bool,
  "isInternetReachable": bool,
  "isWifiEnabled": bool,
  "details": Js.Null.t(details),
};

• isConnected will be true if there is an active connection (but not imply that the internet is necessarily reachable).
• isInternetReachable will be true if the internet can be reached using the active connection
• isWifiEnabled will be true if WiFi is enabled on the device, and false otherwise. Android only.

details key will have value Js.Null.empty (null) when _type is null or unknown.

details

details depends on _type given within netInfoState. If _type is not null or unknown, details is an object as below:

type details = {
  .
  "isConnectionExpensive": bool,
  "ssid": Js.Nullable.t(string),
  "strength": Js.Nullable.t(int),
  "ipAddress": Js.Nullable.t(string),
  "subnet": Js.Nullable.t(string),
  "cellularGeneration": Js.Nullable.t(netInfoCellularGeneration),
  "carrier": Js.Nullable.t(string),
};

Note that some keys may only exist in the JS object when _type is wifi or cellular. Accordingly, in Reason, keys may have values Js.Nullable.undefined.

• ssid, strength, ipAddress and subnet will have value Js.Nullable.undefined unless _type is wifi.
• cellularGeneration and carrier will have value Js.Nullable.undefined unless _type is cellular.

_type is wifi

type is cellular

Methods

configure

configure: netInfoConfiguration => unit

fetch

To query state of the active connection, returns netInfoState wrapped in a Promise.

fetch: unit => Js.Promise.t(netInfoState)

Below example demonstrates determination of the cellular connection generation, using this method.

React.useEffect0(() => {
  Js.Promise.(
    ReactNativeNetInfo.fetch()
    |> then_(w =>
         {
           switch (w##details->Js.Null.toOption) {
           | None => "Connection type is none or unknown"->Js.Console.warn
           | Some(x) =>
             let y = x##cellularGeneration;
             switch (y->Js.Nullable.toOption) {
             | None =>
               if (y == Js.Nullable.undefined) {
                 "Connection type is wifi, bluetooth, ethernet, wimax, vpn or other"
                 ->Js.Console.warn;
               } else {
                 "Connection generation unknown"->Js.Console.warn;
               }
             | Some(z) =>
               if (z == ReactNativeNetInfo.net2G) {
                 "2G connection"->Js.Console.warn;
               } else if (z == ReactNativeNetInfo.net3G) {
                 "3G connection"->Js.Console.warn;
               } else {
                 "4G connection"->Js.Console.warn;
               }
             };
           };
         }
         ->resolve
       )
    |> catch(err => "error"->Js.Console.warn->resolve)
    |> ignore
  );
  None;
});

fetchInterface

To query the connection state for a particular interface.

fetchInterface: [ | `cellular | `ethernet | `wifi] => Js.Promise.t(netInfoState)

addEventListener

To subscribe to the connection state; accepts a listener of type netInfoState => unit and returns an unsubscribe method of type unit => unit. The listener will be called once following subscription and each time connection state changes.

addEventListener: (netInfoState => unit) => t

where

type t = unit => unit

Below example demonstrates subscribing to changes in connection state:

React.useEffect0(() => {
  let remove =
    ReactNativeNetInfo.addEventListener(w =>
      (
        switch (w##details->Js.Null.toOption) {
        | None => "Connection type is none or unknown"
        | Some(x) =>
          let y = x##cellularGeneration;
          switch (y->Js.Nullable.toOption) {
          | None =>
            if (y == Js.Nullable.undefined) {
              "Connection type is wifi, bluetooth, ethernet, wimax, vpn or other";
            } else {
              "Connection generation unknown";
            }
          | Some(z) =>
            if (z == ReactNativeNetInfo.net2G) {
              "2G connection";
            } else if (z == ReactNativeNetInfo.net3G) {
              "3G connection";
            } else {
              "4G connection";
            }
          };
        }
      )
      ->Js.Console.warn
    );
  Js.Console.warn(remove);
  Some(() => remove());
});

useNetInfo

This method returns a React Hook with type netInfoState

useNetInfo: unit => netInfoState

Below example demonstrates its use within a Text component:

<Text>
  (
    switch (ReactNativeNetInfo.useNetInfo()##details->Js.Null.toOption) {
    | None => "Connection type is none or unknown"
    | Some(x) =>
      let y = x##cellularGeneration;
      switch (y->Js.Nullable.toOption) {
      | None =>
        if (y == Js.Nullable.undefined) {
          "Connection type is wifi, bluetooth, ethernet, wimax, vpn or other";
        } else {
          "Connection generation unknown";
        }
      | Some(z) =>
        if (z == ReactNativeNetInfo.net2G) {
          "2G connection";
        } else if (z == ReactNativeNetInfo.net3G) {
          "3G connection";
        } else {
          "4G connection";
        }
      };
    }
  )
  ->React.string
</Text>

Changelog

Check the changelog for more informations about recent releases.

Contribute

Read the contribution guidelines before contributing.

Code of Conduct

We want this community to be friendly and respectful to each other. Please read our full code of conduct so that you can understand what actions will and will not be tolerated.