Skip to content

Commit

Permalink
feat: Add React Native Web support (react-native-netinfo#292 by @jaulz)
Browse files Browse the repository at this point in the history
  • Loading branch information
jaulz authored Feb 12, 2020
1 parent 7d50056 commit 5ce329b
Show file tree
Hide file tree
Showing 31 changed files with 3,795 additions and 201 deletions.
38 changes: 21 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@ To use this library you need to ensure you are using the correct version of Reac
| `2.x.x` | `>= 0.57` |
| `1.x.x` | `>= 0.57` |

## Browser Compatilibity
The web implementation heavily depends on the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) which is still an is an experimental technology and thus it's not supported in every browser.
If this API is not available the library will safely fallback to the old [onLine](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine) property and return basic connection information.

## Migrating from the core `react-native` module
This module was created when the NetInfo was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from:

Expand Down Expand Up @@ -232,7 +236,7 @@ The `details` value depends on the `type` value.

| Property | Platform | Type | Description |
| ----------------------- | ----------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
| `isConnectionExpensive` | Android, iOS, Windows | `boolean` | If the network connection is considered "expensive". This could be in either energy or monetary terms. |
| `isConnectionExpensive` | Android, iOS, Windows, Web | `boolean` | If the network connection is considered "expensive". This could be in either energy or monetary terms. |
| `ssid` | Android, iOS (not tvOS) | `string` | The SSID of the network. May not be present, `null`, or an empty string if it cannot be determined. **On iOS, make sure your app meets at least one of the [following requirements](https://developer.apple.com/documentation/systemconfiguration/1614126-cncopycurrentnetworkinfo?language=objc#discussion). On Android, you need to have the `ACCESS_FINE_LOCATION` permission in your `AndroidManifest.xml` and accepted by the user**. |
| `strength` | Android | `number` | An integer number from `0` to `5` for the signal strength. May not be present if the signal strength cannot be determined. |
| `ipAddress` | Android, iOS | `string` | The external IP address. Can be in IPv4 or IPv6 format. May not be present if it cannot be determined. |
Expand All @@ -242,11 +246,11 @@ The `details` value depends on the `type` value.

`details` has these properties:

| Property | Platform | Type | Description |
| ----------------------- | --------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| `isConnectionExpensive` | Android, iOS, Windows | `boolean` | If the network connection is considered "expensive". This could be in either energy or monetary terms. |
| `cellularGeneration` | Android, iOS, Windows | [`NetInfoCellularGeneration`](#netinfocellulargeneration) | The generation of the cell network the user is connected to. This can give an indication of speed, but no guarantees. |
| `carrier` | Android, iOS | `string` | The network carrier name. May not be present or may be empty if none can be determined. |
| Property | Platform | Type | Description |
| ----------------------- | -------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| `isConnectionExpensive` | Android, iOS, Windows, Web | `boolean` | If the network connection is considered "expensive". This could be in either energy or monetary terms. |
| `cellularGeneration` | Android, iOS, Windows | [`NetInfoCellularGeneration`](#netinfocellulargeneration) | The generation of the cell network the user is connected to. This can give an indication of speed, but no guarantees. |
| `carrier` | Android, iOS | `string` | The network carrier name. May not be present or may be empty if none can be determined. |

##### `type` is `bluetooth`, `ethernet`, `wimax`, `vpn`, or `other`

Expand All @@ -259,17 +263,17 @@ The `details` value depends on the `type` value.
#### `NetInfoStateType`
Describes the current type of network connection. It is an enum with these possible values:

| Value | Platform | Description |
| ----------- | --------------------- | ---------------------------------------------------------- |
| `none` | Android, iOS, Windows | No network connection is active |
| `unknown` | Android, iOS, Windows | The network state could not or has yet to be be determined |
| `cellular` | Android, iOS, Windows | Active network over cellular |
| `wifi` | Android, iOS, Windows | Active network over Wifi |
| `bluetooth` | Android | Active network over Bluetooth |
| `ethernet` | Android, Windows | Active network over wired ethernet |
| `wimax` | Android | Active network over WiMax |
| `vpn` | Android | Active network over VPN |
| `other` | Android, iOS, Windows | Active network over another type of network |
| Value | Platform | Description |
| ----------- | -------------------------- | ---------------------------------------------------------- |
| `none` | Android, iOS, Windows, Web | No network connection is active |
| `unknown` | Android, iOS, Windows, Web | The network state could not or has yet to be be determined |
| `cellular` | Android, iOS, Windows, Web | Active network over cellular |
| `wifi` | Android, iOS, Windows, Web | Active network over Wifi |
| `bluetooth` | Android, Web | Active network over Bluetooth |
| `ethernet` | Android, Windows, Web | Active network over wired ethernet |
| `wimax` | Android, Web | Active network over WiMax |
| `vpn` | Android | Active network over VPN |
| `other` | Android, iOS, Windows, Web | Active network over another type of network |

#### `NetInfoCellularGeneration`
Describes the current generation of the `cellular` connection. It is an enum with these possible values:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*
* @format
*/
/* eslint-env jest */

const {device, expect, element, by} = require('detox');

Expand Down
15 changes: 15 additions & 0 deletions example/e2e/sanityTest.spec.web.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
/* eslint-env jest */

describe('NetInfo', () => {
it('should have e2e tests in the future', async () => {
await expect(true).toEqual(true);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*
* @format
*/
/* eslint-env jest */

const {device, expect, element, by} = require('detox');

Expand Down
15 changes: 15 additions & 0 deletions example/e2e/testCases/Fetch.spec.web.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
/* eslint-env jest */

describe('Fetch', () => {
it('should have e2e tests in the future', async () => {
await expect(true).toEqual(true);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*
* @format
*/
/* eslint-env jest */

const {device, expect, element, by} = require('detox');

Expand Down
15 changes: 15 additions & 0 deletions example/e2e/testCases/HookInitialValue.spec.web.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
/* eslint-env jest */

describe('HookInitialValue', () => {
it('should have e2e tests in the future', async () => {
await expect(true).toEqual(true);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*
* @format
*/
/* eslint-env jest */

const {device, expect, element, by} = require('detox');

Expand Down
15 changes: 15 additions & 0 deletions example/e2e/testCases/emitOnListen.spec.web.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
/* eslint-env jest */

describe('EmitOnListen', () => {
it('should have e2e tests in the future', async () => {
await expect(true).toEqual(true);
});
});
11 changes: 11 additions & 0 deletions example/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>react-native-netinfo</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
7 changes: 7 additions & 0 deletions example/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -200,3 +200,10 @@ class ExampleApp extends React.Component<{}, State> {
}

AppRegistry.registerComponent('NetInfoExample', () => ExampleApp);

// Run application on web
if (typeof document !== 'undefined') {
AppRegistry.runApplication('NetInfoExample', {
rootTag: document.getElementById('root'),
});
}
97 changes: 97 additions & 0 deletions example/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/

const path = require('path');
const webpack = require('webpack');
const babelConfig = require('./../babel.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: path.resolve(__dirname, 'index.tsx'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/[name].bundle.js',
},
target: 'web',
mode: 'development',
devtool: 'source-map',
resolve: {
modules: [
path.resolve(__dirname),
path.resolve(__dirname, '..', 'node_modules'),
],
extensions: ['.web.tsx', '.tsx', '.web.ts', '.ts', '.web.js', '.js'],
alias: {
react: path.resolve(__dirname, '..', 'node_modules', 'react'),
'react-native': path.resolve(
__dirname,
'..',
'node_modules',
'react-native-web',
),
},
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
loader: 'ts-loader',
},
{
test: /\.m?js$/,
use: {
loader: 'babel-loader',
options: babelConfig,
},
},
{enforce: 'pre', test: /\.js$/, loader: 'source-map-loader'},
],
},
plugins: [
new HtmlWebpackPlugin({template: path.resolve(__dirname, 'index.html')}),
new webpack.HotModuleReplacementPlugin(),
],
};
/*
module.exports = {
context: __dirname,
entry: {
index: [
'react-native-webpack/clients/polyfills.js',
`./index.tsx`,
],
},
devServer: {
port: 8081,
quiet: false,
noInfo: true,
lazy: true,
filename: `[name].bundle`,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
publicPath: '/',
stats: { colors: true },
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
]
},
resolve: {
extensions: ['.web.tsx', ".tsx", '.web.ts', ".ts", '.web.js', ".js"]
},
};
*/
9 changes: 5 additions & 4 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ const { defaults: tsjPreset } = require('ts-jest/presets');

module.exports = {
...tsjPreset,
preset: 'react-native',
'projects': [
{ 'preset': 'jest-expo/ios' },
{ 'preset': 'jest-expo/android' },
{ 'preset': 'jest-expo/web' },
],
transform: {
...tsjPreset.transform,
'\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
Expand All @@ -14,7 +18,4 @@ module.exports = {
babelConfig: true,
},
},
setupFilesAfterEnv: [
'<rootDir>/jest.setup.js',
],
};
34 changes: 0 additions & 34 deletions jest.setup.js

This file was deleted.

10 changes: 10 additions & 0 deletions jest/netinfo-mock.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,14 @@ const RNCNetInfoMock = {
removeListeners: jest.fn(),
};

RNCNetInfoMock.getCurrentState.mockResolvedValue({
type: 'cellular',
isConnected: true,
isInternetReachable: true,
details: {
isConnectionExpensive: true,
cellularGeneration: '3g',
},
});

module.exports = RNCNetInfoMock;
15 changes: 13 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"license": "MIT",
"scripts": {
"start": "react-native start",
"start:web": "webpack-dev-server --config example/webpack.config.js",
"test": "yarn validate:eslint && yarn validate:typescript && yarn test:jest",
"validate:eslint": "eslint \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\"",
"validate:typescript": "tsc --project ./ --noEmit",
Expand Down Expand Up @@ -63,23 +64,33 @@
"@types/react-native": "^0.57.51",
"@typescript-eslint/eslint-plugin": "^1.7.0",
"@typescript-eslint/parser": "^1.7.0",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.6",
"detox": "^12.8.0",
"eslint": "5.16.0",
"eslint-config-prettier": "^4.2.0",
"eslint-plugin-prettier": "3.0.1",
"html-webpack-plugin": "^3.2.0",
"husky": "^2.3.0",
"jest": "^24.8.0",
"jest-expo": "^36.0.1",
"jest-fetch-mock": "^3.0.1",
"lint-staged": "^8.1.7",
"metro-react-native-babel-preset": "^0.56.0",
"prettier": "^1.17.0",
"react": "16.9.0",
"react-dom": "^16.12.0",
"react-native": "0.61.2",
"react-native-web": "^0.12.0",
"react-test-renderer": "16.9.0",
"rimraf": "^2.6.3",
"semantic-release": "15.13.3",
"source-map-loader": "^0.2.4",
"ts-jest": "^24.0.2",
"typescript": "^3.4.1"
"ts-loader": "^6.2.1",
"typescript": "^3.4.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.2"
},
"detox": {
"test-runner": "jest",
Expand Down
Loading

0 comments on commit 5ce329b

Please sign in to comment.