Hover styles in React Native for Web

createHoverMonitor.js

import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';

/**
 * Touch devices emulate mouse events. This functions makes it possible to know
 * if the current modality supports hover (including for multi-modality
 * devices).
 */
const createHoverMonitor = () => {
  let isHoverEnabled = false;
  let lastTouchTime = 0;

  function enableHover() {
    if (isHoverEnabled || Date.now() - lastTouchTime < 500) {
      return;
    }
    isHoverEnabled = true;
  }

  function disableHover() {
    lastTouchTime = new Date();
    if (isHoverEnabled) {
      isHoverEnabled = false;
    }
  }

  if (canUseDOM) {
    document.addEventListener('touchstart', disableHover, true);
    document.addEventListener('mousemove', enableHover, true);
  }

  return {
    get isEnabled() {
      return isHoverEnabled;
    }
  };
};

export default createHoverMonitor;

Hoverable.js

import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';

const hover = createHoverMonitor();

/**
 * Use:
 * <Hoverable>
 *   {(hover) => <View style={hover && styles.hovered} />}
 * </Hoverable>
 *
 * Example: https://imaginary-lycra.glitch.me/
 * Example source: https://glitch.com/edit/#!/imaginary-lycra
 */
class Hoverable extends Component {
  static displayName = 'Hoverable';

  static propTypes = {
    children: oneOfType([func, element]).isRequired,
    onHoverIn: func,
    onHoverOut: func
  };

  state = { isHovered: false };

  _handleMouseEnter = e => {
    if (hover.isEnabled && !this.state.isHovered) {
      const { onHoverIn } = this.props;
      if (onHoverIn) {
        onHoverIn();
      }
      this.setState(() => ({ isHovered: true }));
    }
  };

  _handleMouseLeave = e => {
    if (this.state.isHovered) {
      const { onHoverOut } = this.props;
      if (onHoverOut) {
        onHoverOut();
      }
      this.setState(() => ({ isHovered: false }));
    }
  };

  render() {
    const {
      children,
      /* eslint-disable */
      onHoverIn,
      onHoverOut
      /* eslint-enable */
    } = this.props;

    const child = typeof children === 'function' ? children(this.state.isHovered) : children;

    return React.cloneElement(React.Children.only(child), {
      onMouseEnter: this._handleMouseEnter,
      onMouseLeave: this._handleMouseLeave
    });
  }
}

export default Hoverable;