Skip to content

use-hover-gesture.mdx

Latest commit

 

History

History
182 lines (139 loc) · 5.44 KB

use-hover-gesture.mdx

File metadata and controls

182 lines (139 loc) · 5.44 KB
id use-hover-gesture
title Hover gesture
sidebar_label Hover gesture
sidebar_position 7

import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';

import useBaseUrl from '@docusaurus/useBaseUrl';

import HoverGestureBasic from '@site/static/examples/HoverGestureBasic'; import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';

import HeaderWithBadge from '@site/src/components/HeaderWithBadge';

} src={HoverGestureBasicSrc} disableMarginBottom={true} />

import BaseEventData from './_shared/base-gesture-event-data.mdx'; import BaseGestureConfig from './_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './_shared/base-gesture-callbacks.mdx'; import BaseContinuousGestureCallbacks from './_shared/base-continuous-gesture-callbacks.mdx'; import SharedValueInfo from './_shared/shared-value-info.md';

Gesture that can recognize hovering above the view it's attached to. The hover effect may be activated by moving a mouse or a stylus over the view.

On iOS additional visual effects may be configured.

:::note Don't rely on Hover gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, compose it with Pan gesture. :::

Example

<CollapsibleCode label="Show full example" expandedLabel="Hide full example" lineBounds={[7, 17]} src={` import { View, StyleSheet } from 'react-native'; import { GestureDetector, GestureHandlerRootView, useHoverGesture, } from 'react-native-gesture-handler';

export default function App() { const hoverGesture = useHoverGesture({});

return ( ); }

const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'space-around', }, box: { height: 120, width: 120, backgroundColor: '#b58df1', borderRadius: 20, marginBottom: 30, }, }); `}/>

Config

<HeaderWithBadge platforms={['iOS']}>

effect

<CollapsibleCode label="Show composed types definitions" expandedLabel="Hide composed types definitions" lineBounds={[0, 1]} collapsed={false} src={` effect: HoverEffect | SharedValue;

enum HoverEffect { NONE = 0, LIFT = 1, HIGHLIGHT = 2, } `}/>

Visual effect applied to the view while the view is hovered. Defaults to HoverEffect.None

Callbacks

<BaseGestureCallbacks gesture={"Hover"}/> <BaseContinuousGestureCallbacks gesture={"Hover"}/>

Event data

x

x: number;

X coordinate of the current position of the pointer relative to the view attached to the GestureDetector. Expressed in point units.

y

y: number;

Y coordinate of the current position of the pointer relative to the view attached to the GestureDetector. Expressed in point units.

absoluteX

absoluteX: number;

X coordinate of the current position of the pointer relative to the window. The value is expressed in point units. It is recommended to use it instead of x in cases when the original view can be transformed as an effect of the gesture.

absoluteY

absoluteY: number;

Y coordinate of the current position of the pointer relative to the window. The value is expressed in point units. It is recommended to use it instead of y in cases when the original view can be transformed as an effect of the gesture.

stylusData

stylusData: StylusData;
interface StylusData {
  tiltX: number;
  tiltY: number;
  azimuthAngle: number;
  altitudeAngle: number;
  pressure: number;
}

Object that contains additional information about stylus. It consists of the following fields:

  • tiltX - angle in degrees between the Y-Z plane of the stylus and the screen.
  • tiltY - angle in degrees between the X-Z plane of the stylus and the screen.
  • altitudeAngle - angle between stylus axis and the X-Y plane of a device screen.
  • azimuthAngle - angle between the Y-Z plane and the plane containing both the stylus axis and the Y axis.
  • pressure - indicates the normalized pressure of the stylus.