Skip to main content

Hover Styles

When a view is dragged, a floating copy (the "hover view") follows your finger. Hover styles let you change its appearance based on the drag state.

The 5 Hover Styles​

<DraxView
  hoverStyle={{ opacity: 0.9, transform: [{ scale: 1.05 }] }}
  hoverDraggingStyle={{ borderColor: 'blue', borderWidth: 2 }}
  hoverDraggingWithReceiverStyle={{ borderColor: 'green', borderWidth: 2 }}
  hoverDraggingWithoutReceiverStyle={{ opacity: 0.5 }}
  hoverDragReleasedStyle={{ opacity: 0.3 }}
/>
PropWhen Applied
hoverStyleAlways on the hover view
hoverDraggingStyleWhile actively dragging
hoverDraggingWithReceiverStyleDragging over a receptive view
hoverDraggingWithoutReceiverStyleDragging but not over any receiver
hoverDragReleasedStyleAfter release, during snap-back animation

Styles are applied additively — hoverStyle is always applied, then the phase-specific style is merged on top.

How It Works​

Hover styles are applied via useAnimatedStyle in the HoverLayer component. They react to:

  • dragPhaseSV — idle, dragging, or releasing
  • receiverIdSV — which receiver (if any) is under the hover

The styles are set once per drag in handleDragStart and captured by the worklet.

info

Hover styles use AnimatedViewStylePropWithoutLayout — you can use opacity, transform, border, shadow, and other non-layout properties. Layout properties (width, height, flex, padding, margin) are not supported because the hover view is positioned via translateX/translateY.

View Styles (non-hover)​

The original view (not the hover copy) can also be styled per drag state:

<DraxView
  style={styles.default}
  dragInactiveStyle={styles.inactive}
  draggingStyle={{ opacity: 0 }}           // Hide original while dragging
  draggingWithReceiverStyle={styles.overTarget}
  draggingWithoutReceiverStyle={styles.noTarget}
  dragReleasedStyle={{ opacity: 0.5 }}
  receiverInactiveStyle={styles.receiverDefault}
  receivingStyle={{ backgroundColor: 'lightgreen' }}
/>

Next Steps​