Hanzo GUI Props

Hanzo GUI supports a superset of the React Native props. Start with:

• View, or
• Text

From there, we add style props directly onto the same object.

Finally, there are a few non-style props Hanzo GUI adds:

Event Props

All Hanzo GUI View-based components have Pressable-like functionality built in. You don't need to wrap in Pressable or TouchableOpacity - add event handlers directly:

<View
  onPress={() => console.log('pressed')}
  onHoverIn={() => console.log('hovered')}
  pressStyle={{ opacity: 0.8 }}
  hoverStyle={{ backgroundColor: '$backgroundHover' }}
/>

Use these events alongside style states like pressStyle, hoverStyle, and focusStyle to create interactive components. See the Style API for styling on interaction states.

Other Props

Event Handlers

Hanzo GUI supports all React Native events on all platforms. On web, we also support all standard DOM event handlers:

Cross-Platform Events

• onPress, onLongPress, onPressIn, onPressOut - Touch/press events that work on both native and web

Pointer Events - Modern events that unify mouse, touch, and pen input. On native, these are mapped to touch events with a normalized event shape including clientX/Y, pointerId, and pointerType:

• onPointerDown, onPointerUp, onPointerMove
• onPointerEnter, onPointerLeave, onPointerCancel

On native, e.target.setPointerCapture(pointerId) and releasePointerCapture(pointerId) are supported for drag scenarios where you need to receive move events outside the element bounds.

Web-Only Events

The following events are available on web and automatically ignored on native:

Mouse Events

• onClick, onDoubleClick, onContextMenu
• onMouseEnter, onMouseLeave, onMouseMove, onMouseOver, onMouseOut
• onMouseDown, onMouseUp
• onWheel

Keyboard Events

• onKeyDown, onKeyUp, onKeyPress

Drag and Drop

• onDrag, onDragStart, onDragEnd
• onDragEnter, onDragLeave, onDragOver
• onDrop

Input Events

• onChange, onInput, onBeforeInput

Scroll Events

• onScroll

Clipboard Events

• onCopy, onCut, onPaste

Focus Events

• onFocus, onBlur

All event handlers receive the standard React synthetic event as their argument.