---
name: HoverableTouchHighlight
route: /Hoverables/HoverableTouchHighlight
menu: Hoverables
---

import { Playground, PropsTable } from 'docz'
import { Alert, View } from 'react-native'
import { BaseText, NavIcon, HoverableTouchHighlight } from '../../src'
import { colors } from '@barcard/functions'

## HoverableTouchHighlight

## About

By default, `react-native` does not contain any logic for listenting to hover
events (_it's for phones, remember!_).

This implementation taps into the `onMouseEnter` and `onMouseLeave` events to
implement 'hover' styles for the web.

## Basic Usage

<Playground>
  <View
    style={{
      display: 'flex',
      flexDirection: 'row',
      flex: 1,
      marginBottom: 40,
      justifyContent: 'space-around',
    }}
  >
    {[
      {
        quickActionLabel: 'Venue',
        iconName: 'places-home-4',
        iconType: 'custom',
        iconColor: '#5E5EFF',
      },
      {
        quickActionLabel: 'Specials',
        iconName: 'specials',
        iconType: 'custom',
        iconColor: '#98FF5E',
      },
      {
        quickActionLabel: 'Events',
        iconName: 'flash',
        iconType: 'custom',
        iconColor: '#FFD45E',
      },
    ].map(x => (
      <HoverableTouchHighlight
        key={x.quickActionLabel}
        underlayColor={colors.primary3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 87,
          height: 87,
          borderRadius: 20,
          backgroundColor: colors.opaque,
        }}
        hoverStyle={{ backgroundColor: colors.primary3 }}
        onPress={() => alert('A button was pressed !')}
      >
        <NavIcon
          iconName={x.iconName}
          iconType={x.iconType}
          size={x.customIconSize ? x.customIconSize : 24}
          color={x.iconColor ? x.iconColor : '#fff'}
        />
        <BaseText
          fs={14}
          lh={19}
          mt={15}
          ta={'center'}
          children={x.quickActionLabel}
        />
      </HoverableTouchHighlight>
    ))}
  </View>
</Playground>

## Implementation Notes

These props are embedded in the `style`|`hoverStyle` style objects, and can be
overrided as such.

## Properties

<PropsTable of={HoverableTouchHighlight} includeDescription={true} />
