@actualwave/react-native-net-connected -- React Native components to use NetInfo declarative way.

README.md

@actualwave/react-native-net-connected

React Native components to use NetInfo declarative way.

index.js

export { default as Offline } from './Offline';

export { default as Online } from './Online';

export { default as withConnected } from './withConnected';

export { default as withConnectionInfo } from './withConnectionInfo';

Offline.js

import PropTypes from 'prop-types';

import callIfFunction from '@actualwave/call-if-function';

import withConnected from './withConnected';

const Offline = ({ connected, children, onlineRenderer }) => {
  if (connected) {
    return callIfFunction(onlineRenderer);
  }

  return callIfFunction(children);
};

Offline.propTypes = {
  connected: PropTypes.bool.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
  onlineRenderer: PropTypes.func,
};

Offline.defaultProps = { onlineRenderer: () => null };

export default withConnected(Offline);

Online.js

import PropTypes from 'prop-types';

import callIfFunction from '@actualwave/call-if-function';

import withConnected from './withConnected';

const Online = ({ connected, children, offlineRenderer }) => {
  if (connected) {
    return callIfFunction(children);
  }

  return callIfFunction(offlineRenderer);
};

Online.propTypes = {
  connected: PropTypes.bool.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
  offlineRenderer: PropTypes.func,
};

Online.defaultProps = { offlineRenderer: () => null };

export default withConnected(Online);

package.json

{
  "name": "@actualwave/react-native-net-connected",
  "description": "Declarative way to use NetInfo from React Native",
  "version": "0.0.1",
  "main": "index.js",
  "keywords": [
    "js",
    "javascript",
    "react",
    "react-native",
    "netinfo",
    "connection"
  ],
  "homepage": "https://github.com/burdiuz/f09905bb1180be3d9b01c658455d2d40",
  "bugs": {
    "url": "https://github.com/burdiuz/f09905bb1180be3d9b01c658455d2d40",
    "email": "burdiuz@gmail.com"
  },
  "author": {
    "name": "Oleg Galaburda",
    "email": "burdiuz@gmail.com",
    "url": "http://actualwave.com/"
  },
  "dependencies": {
    "@actualwave/call-if-function": "^0.0.1",
    "@actualwave/react-component-name": "^0.0.1"
  },
  "peerDependencies": {
    "@react-native-community/netinfo": "^5.0.1",
    "prop-types": "*",
    "react": "*"
  },
  "license": "MIT"
}

withConnected.js

import React, { Component } from 'react';
import NetInfo from '@react-native-community/netinfo';

import getComponentName from '@actualwave/react-component-name';

const withConnected = (WrappedComponent, hideWhenNotAvailable = true, displayName = '') => {
  class Wrapper extends Component {
    constructor(props) {
      super(props);

      this.state = { available: false, connected: false };

      this.init();
    }

    async init() {
      const connected = await NetInfo.isConnected.fetch();

      NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectedChange);
      this.handleConnectedChange(connected);
    }

    componentWillUnmount() {
      NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectedChange);
    }

    handleConnectedChange = (connected) => {
      this.setState({
        available: true,
        connected,
      });
    };

    render() {
      const { available, connected } = this.state;

      if (hideWhenNotAvailable && !available) {
        return null;
      }

      return <WrappedComponent {...this.props} connected={connected} />;
    }
  }

  Wrapper.displayName = displayName || `withConnected(${getComponentName(WrappedComponent)})`;

  return Wrapper;
};

export default withConnected;

withConnectionInfo.js

import React, { Component } from 'react';
import NetInfo from '@react-native-community/netinfo';

import getComponentName from '@actualwave/react-component-name';

export const OFFLINE_TYPE = 'none';

export const isOffline = ({ type } = {}) => type === OFFLINE_TYPE;

const withConnectionInfo = (WrappedComponent, hideWhenNotAvailable = true, displayName = '') => {
  class Wrapper extends Component {
    constructor(props) {
      super(props);

      this.state = { available: false, connectionInfo: null };
      this.init();
    }

    async init() {
      NetInfo.addEventListener('connectionChange', this.handleConnectionInfoChange);

      const info = await NetInfo.getConnectionInfo();

      this.handleConnectionInfoChange(info);
    }

    componentWillUnmount() {
      NetInfo.removeEventListener('connectionChange', this.handleConnectionInfoChange);
    }

    handleConnectionInfoChange = (connectionInfo) => {
      this.setState({
        available: true,
        connectionInfo,
      });
    };

    render() {
      const { available, connectionInfo } = this.state;

      if (hideWhenNotAvailable && !available) {
        return null;
      }

      return <WrappedComponent {...this.props} connectionInfo={connectionInfo} />;
    }
  }

  Wrapper.displayName = displayName || `withConnectionInfo(${getComponentName(WrappedComponent)})`;

  return Wrapper;
};

export default withConnectionInfo;