BuckleScript bindings to React Native NetInfo

These are BuckleScript bindings to React Native NetInfo, in Reason syntax. NetInfo has been removed in RN 0.60, but as that release has breaking changes, this package is intended to work with RN 0.59.x releases as well. Accordingly, to avoid namespace clashes with the NetInfo module in reason-react-native (as would happen with open React Native), the module has been named CommunityNetInfo. In future releases, it is intended that the module be renamed NetInfo.

Version of these bindings follow that of the React Native NetInfo package.

Version	React Native version
4.00-beta	0.60 or 0.59.x with jetifier
3.2.x	0.59.x

You may update your existing code using NetInfo module of reason-react-native by replacing references to the ReactNative.NetInfo module with CommunityNetInfo.Legacy.

Installation

With yarn:

yarn add reason-react-native-netinfo

With npm:

npm install reason-react-native-netinfo

Once the package installation completes, @react-native-community/netinfo should be linked to your project. You may use the CLI as below

react-native link @react-native-community/netinfo

Finally, reason-react-native-netinfo should be added to bs-dependencies in BuckleScript configuration of the project (bsconfig.json). For example:

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

Types

netInfoStateType

Kind of the current network connection. Valid values are:

Value	Platforms	Connection State
none	Android, iOS, Windows	Not active
unknown	Android, iOS, Windows	Undetermined
cellular	Android, iOS, Windows	Active
wifi	Android, iOS, Windows	Active
bluetooth	Android	Active
ethernet	Android, Windows	Active
wimax	Android	Active
vpn	Android	Active
other	Android, iOS, Windows	Active

netInfoCellularGeneration

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

Value	Notes
net2g	Inlined as "2g". Returned for CDMA, EDGE, GPRS and IDEN connections
net3g	Inlined as "3g". Returned for EHRPD, EVDO, HSPA, HSUPA, HSDPA and UTMS connections.
net4g	Inlined as "4g". Returned for HSPAP and LTE connections

details

type details = {
  .
  "isConnectionExpensive": bool,
  "cellularGeneration": Js.Nullable.t(netInfoCellularGeneration),
};

netInfoState

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

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

If the details objects is not null, the cellularGeneration key within will

• have value Js.Nullable.undefined when _type is wifi, bluetooth, ethernet, wimax, vpn or other.
• have value Js.Nullable.null if the connection is not cellular or its generation cannot be determined.
• be of type netInfoCellularGeneration only when _type is cellular and its generation can be determined.

Methods

fetch

To query the connection state, 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.(
    CommunityNetInfo.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 == CommunityNetInfo.net2G) {
                 "2G connection"->Js.Console.warn;
               } else if (z == CommunityNetInfo.net3G) {
                 "3G connection"->Js.Console.warn;
               } else {
                 "4G connection"->Js.Console.warn;
               }
             };
           };
         }
         ->resolve
       )
    |> catch(err => "error"->Js.Console.warn->resolve)
    |> ignore
  );
  None;
});

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 =
    CommunityNetInfo.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 == CommunityNetInfo.net2G) {
              "2G connection";
            } else if (z == CommunityNetInfo.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 (CommunityNetInfo.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 == CommunityNetInfo.net2G) {
          "2G connection";
        } else if (z == CommunityNetInfo.net3G) {
          "3G connection";
        } else {
          "4G connection";
        }
      };
    }
  )
  ->React.string
</Text>