Skip to content

Commit e031f59

Browse files
sgnyMoOx
sgny
authored and
MoOx
committed
@reason-react-native/netinfo: bindings for @react-native-community/netinfo (#582)
1 parent 86f7c43 commit e031f59

File tree

6 files changed

+625
-0
lines changed

6 files changed

+625
-0
lines changed

‎@reason-react-native/netinfo/README.md‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
# BuckleScript bindings to React Native NetInfo
2+
3+
[![Version](https://img.shields.io/npm/v/@reason-react-native/netinfo.svg)](https://www.npmjs.com/@reason-react-native/netinfo)
4+
5+
These are BuckleScript bindings to
6+
[`React Native NetInfo`](https://github.com/react-native-community/react-native-netinfo),
7+
in Reason syntax. `NetInfo` has been removed from the React Native core with
8+
version 0.60, but as that release has breaking changes, this package is intended
9+
to work with React Native 0.59.x releases as well. Accordingly, to avoid
10+
namespace clashes with the `NetInfo` module in `reason-react-native` (as would
11+
happen with `open React Native`) and for consistency with other projects, the
12+
module has been named `ReactNativeNetInfo`.
13+
14+
Version of these bindings follow that of the `React Native NetInfo` package.
15+
React Native versions 0.59.x and 0.60.x are supported, however
16+
[jetifier](https://github.com/mikehardy/jetifier) is required to support
17+
versions 0.59.x.
18+
19+
| Version | React Native version | `npm` package for Reason bindings |
20+
| ------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
21+
| 4.1.x | 0.60 or 0.59.x with [jetifier](https://github.com/mikehardy/jetifier) | [`@reason-react-native/netinfo`](https://www.npmjs.com/@reason-react-native/netinfo) |
22+
| 3.2.x | 0.59.x | [`reason-react-native-netinfo`](https://www.npmjs.com/package/reason-react-native-netinfo) |
23+
24+
You may update your existing code using the `NetInfo` module of
25+
`reason-react-native` by replacing references to the `ReactNative.NetInfo`
26+
module with `ReactNativeNetInfo.Legacy`. However, do note that the new API is
27+
more straightforward.
28+
29+
## Breaking Changes
30+
31+
- Moved from
32+
[sgny/reason-react-native-netinfo](https://github.com/sgny/reason-react-native-netinfo#readme).
33+
`npm` package was previously named `reason-react-native-netinfo`. Please
34+
update your dependencies accordingly.
35+
36+
- The module is renamed to `ReactNativeNetInfo` (previously`CommunityNetInfo`).
37+
38+
- Releases require use of [jetifier](https://github.com/mikehardy/jetifier) for
39+
versions 0.59.x of React Native. You may continue to use
40+
[`reason-react-native-netinfo`](https://www.npmjs.com/package/reason-react-native-netinfo)
41+
version 3.2.x if you do not wish to use `jetifier`.
42+
43+
## Installation
44+
45+
With `yarn`:
46+
47+
```shell
48+
yarn add @reason-react-native/netinfo
49+
```
50+
51+
With `npm`:
52+
53+
```shell
54+
npm install @reason-react-native/netinfo
55+
```
56+
57+
Once package installation completes, `@react-native-community/netinfo` should be
58+
linked to your project. You may use the CLI as below:
59+
60+
```shell
61+
react-native link @react-native-community/netinfo
62+
```
63+
64+
Finally, `@reason-react-native/netinfo` should be added to `bs-dependencies` in
65+
`BuckleScript` configuration of the project (`bsconfig.json`). For example:
66+
67+
```json
68+
{
69+
...
70+
"bs-dependencies": ["reason-react", "reason-react-native", "@reason-react-native/netinfo"],
71+
...
72+
}
73+
```
74+
75+
## Types
76+
77+
### `netInfoStateType`
78+
79+
Kind of the current network connection. Valid values are:
80+
81+
| Value | Platforms | Connection State |
82+
| ----------- | --------------------- | ---------------- |
83+
| `none` | Android, iOS, Windows | Not active |
84+
| `unknown` | Android, iOS, Windows | Undetermined |
85+
| `cellular` | Android, iOS, Windows | Active |
86+
| `wifi` | Android, iOS, Windows | Active |
87+
| `bluetooth` | Android | Active |
88+
| `ethernet` | Android, Windows | Active |
89+
| `wimax` | Android | Active |
90+
| `vpn` | Android | Active |
91+
| `other` | Android, iOS, Windows | Active |
92+
93+
### `netInfoCellularGeneration`
94+
95+
Cellular generation of the current network connection. Valid values are:
96+
97+
| Value | Notes |
98+
| ------- | ----------------------------------------------------------------------------------- |
99+
| `net2g` | Inlined as "2g". Returned for CDMA, EDGE, GPRS and IDEN connections |
100+
| `net3g` | Inlined as "3g". Returned for EHRPD, EVDO, HSPA, HSUPA, HSDPA and UTMS connections. |
101+
| `net4g` | Inlined as "4g". Returned for HSPAP and LTE connections |
102+
103+
### `details`
104+
105+
```reason
106+
type details = {
107+
.
108+
"isConnectionExpensive": bool,
109+
"cellularGeneration": Js.Nullable.t(netInfoCellularGeneration),
110+
};
111+
```
112+
113+
### `netInfoState`
114+
115+
```reason
116+
type netInfoState = {
117+
.
118+
"_type": netInfoStateType,
119+
"isConnected": bool,
120+
"details": Js.Null.t(details),
121+
};
122+
```
123+
124+
`details` key will have value `Js.Null.empty` (`null`) when `_type` is `null` or
125+
`unknown`.
126+
127+
If the `details` objects is not `null`, the `cellularGeneration` key within will
128+
129+
- have value `Js.Nullable.undefined` when `_type` is `wifi`, `bluetooth`,
130+
`ethernet`, `wimax`, `vpn` or `other`.
131+
- have value `Js.Nullable.null` if the connection is not cellular or its
132+
generation cannot be determined.
133+
- be of type `netInfoCellularGeneration` only when `_type` is `cellular` and its
134+
generation can be determined.
135+
136+
## Methods
137+
138+
### `fetch`
139+
140+
To query the connection state, returns `netInfoState` wrapped in a `Promise`.
141+
142+
```reason
143+
fetch: unit => Js.Promise.t(netInfoState) = "";
144+
```
145+
146+
Below example demonstrates determination of the cellular connection generation,
147+
using this method.
148+
149+
```reason
150+
React.useEffect0(() => {
151+
Js.Promise.(
152+
ReactNativeNetInfo.fetch()
153+
|> then_(w =>
154+
{
155+
switch (w##details->Js.Null.toOption) {
156+
| None => "Connection type is none or unknown"->Js.Console.warn
157+
| Some(x) =>
158+
let y = x##cellularGeneration;
159+
switch (y->Js.Nullable.toOption) {
160+
| None =>
161+
if (y == Js.Nullable.undefined) {
162+
"Connection type is wifi, bluetooth, ethernet, wimax, vpn or other"
163+
->Js.Console.warn;
164+
} else {
165+
"Connection generation unknown"->Js.Console.warn;
166+
}
167+
| Some(z) =>
168+
if (z == ReactNativeNetInfo.net2G) {
169+
"2G connection"->Js.Console.warn;
170+
} else if (z == ReactNativeNetInfo.net3G) {
171+
"3G connection"->Js.Console.warn;
172+
} else {
173+
"4G connection"->Js.Console.warn;
174+
}
175+
};
176+
};
177+
}
178+
->resolve
179+
)
180+
|> catch(err => "error"->Js.Console.warn->resolve)
181+
|> ignore
182+
);
183+
None;
184+
});
185+
```
186+
187+
### `addEventListener`
188+
189+
To subscribe to the connection state; accepts a listener of type
190+
`netInfoState => unit` and returns an unsubscribe method of type `unit => unit`.
191+
The listener will be called once following subscription and each time connection
192+
state changes.
193+
194+
```reason
195+
addEventListener: (netInfoState => unit) => t;
196+
```
197+
198+
where
199+
200+
```reason
201+
type t = unit => unit
202+
```
203+
204+
Below example demonstrates subscribing to changes in connection state:
205+
206+
```reason
207+
React.useEffect0(() => {
208+
let remove =
209+
ReactNativeNetInfo.addEventListener(w =>
210+
(
211+
switch (w##details->Js.Null.toOption) {
212+
| None => "Connection type is none or unknown"
213+
| Some(x) =>
214+
let y = x##cellularGeneration;
215+
switch (y->Js.Nullable.toOption) {
216+
| None =>
217+
if (y == Js.Nullable.undefined) {
218+
"Connection type is wifi, bluetooth, ethernet, wimax, vpn or other";
219+
} else {
220+
"Connection generation unknown";
221+
}
222+
| Some(z) =>
223+
if (z == ReactNativeNetInfo.net2G) {
224+
"2G connection";
225+
} else if (z == ReactNativeNetInfo.net3G) {
226+
"3G connection";
227+
} else {
228+
"4G connection";
229+
}
230+
};
231+
}
232+
)
233+
->Js.Console.warn
234+
);
235+
Js.Console.warn(remove);
236+
Some(() => remove());
237+
});
238+
```
239+
240+
### `useNetInfo`
241+
242+
This method returns a React Hook with type `netInfoState`
243+
244+
```reason
245+
useNetInfo: unit => netInfoState
246+
```
247+
248+
Below example demonstrates its use within a `Text` component:
249+
250+
```reason
251+
<Text>
252+
(
253+
switch (ReactNativeNetInfo.useNetInfo()##details->Js.Null.toOption) {
254+
| None => "Connection type is none or unknown"
255+
| Some(x) =>
256+
let y = x##cellularGeneration;
257+
switch (y->Js.Nullable.toOption) {
258+
| None =>
259+
if (y == Js.Nullable.undefined) {
260+
"Connection type is wifi, bluetooth, ethernet, wimax, vpn or other";
261+
} else {
262+
"Connection generation unknown";
263+
}
264+
| Some(z) =>
265+
if (z == ReactNativeNetInfo.net2G) {
266+
"2G connection";
267+
} else if (z == ReactNativeNetInfo.net3G) {
268+
"3G connection";
269+
} else {
270+
"4G connection";
271+
}
272+
};
273+
}
274+
)
275+
->React.string
276+
</Text>
277+
```

‎@reason-react-native/netinfo/bsconfig.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "@reason-react-native/netinfo",
3+
"refmt": 3,
4+
"reason": {
5+
"react-jsx": 3
6+
},
7+
"package-specs": {
8+
"module": "commonjs",
9+
"in-source": true
10+
},
11+
"suffix": ".bs.js",
12+
"sources": [
13+
{
14+
"dir": "src",
15+
"subdirs": false
16+
}
17+
],
18+
"bsc-flags": ["-bs-no-version-header", "-warn-error @a"],
19+
"bs-dependencies": []
20+
}

‎@reason-react-native/netinfo/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "@reason-react-native/netinfo",
3+
"version": "4.1.0",
4+
"author": "sgny (https://github.com/sgny)",
5+
"repository": "https://github.com/reasonml-community/reason-react-native.git",
6+
"license": "MIT",
7+
"keywords": [
8+
"reason",
9+
"reasonml",
10+
"bucklescript",
11+
"react-native",
12+
"react-native-netinfo"
13+
],
14+
"scripts": {
15+
"clean": "bsb -clean-world",
16+
"start": "bsb -make-world -w",
17+
"build": "bsb -make-world",
18+
"clean-build": "bsb -clean-world -make-world"
19+
},
20+
"peerDependencies": {
21+
"bs-platform": "~5.0.4",
22+
"react-native": "~0.59.9",
23+
"reason-react": "^0.7.0",
24+
"reason-react-native": "^0.60.0"
25+
},
26+
"dependencies": {
27+
"@react-native-community/netinfo": "~4.1.0"
28+
}
29+
}

‎@reason-react-native/netinfo/src/ReactNativeNetInfo.bs.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
'use strict';
2+
3+
4+
var ConnectionType = /* module */[];
5+
6+
var EffectiveConnectionType = /* module */[];
7+
8+
var IsConnected = /* module */[];
9+
10+
var Legacy = /* module */[/* IsConnected */IsConnected];
11+
12+
exports.ConnectionType = ConnectionType;
13+
exports.EffectiveConnectionType = EffectiveConnectionType;
14+
exports.Legacy = Legacy;
15+
/* No side effect */

0 commit comments

Comments
 (0)