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;

@nandorojo If you look closely at the gist, you will see that the hover is accomplished using the same approach. Only instead of appending the onMouseEnter and onMouseLeave props to the child and rendering the child using the render props pattern, the example I shared adds onMouseEnter and onMouseLeave explicitly.