Pressable Stable WINMACLNX

The standard interaction primitive. Use Pressable anywhere you need a tappable or clickable element.

Import

import { Pressable } from '@glyx-dev/react'

Basic usage

<Pressable onPress={() => console.log('pressed!')}>
  <Text>Click me</Text>
</Pressable>

Dynamic style on state

style accepts a function that receives the current interaction state — only pressed and hovered exist, there's no focused state tracked:

<Pressable
  style={({ pressed, hovered }) => ({
    padding: '10px 20px',
    borderRadius: 8,
    background: pressed
      ? '#D97706'
      : hovered
      ? '#FBBF24'
      : '#F59E0B',
    transform: pressed ? [{ scale: 0.97 }] : [],
  })}
  onPress={handleSubmit}
>
  <Text style={{ color: '#131318', fontWeight: 600 }}>Submit</Text>
</Pressable>

A function style handles its own visual feedback (as above). A plain object style instead gets automatic opacity feedback — dimmed on hover, darker on press — unless feedback={false} is passed.

Props

Prop	Type	Description
`onPress`	`(e) => void`	Called on tap/click release
`onPressIn`	`() => void`	Called on pointer/touch down
`onPressOut`	`() => void`	Called on pointer/touch up
`onHoverIn`	`() => void`	Called on pointer enter
`onHoverOut`	`() => void`	Called on pointer leave
`onRightPress`	`(e) => void`	Called on right-click / secondary press
`disabled`	`boolean`	Disables all interactions
`feedback`	`boolean`	Automatic opacity feedback on press/hover (default `true`); ignored when `style` is a function
`style`	`ViewStyle \| (state: {pressed, hovered}) => ViewStyle`	Static or dynamic style

⚠️

onLongPress, onFocus, onBlur, hitSlop, and delayLongPress do not exist on Pressable — none of these are wired up in the component. Long-press and focus/blur handling aren't implemented at all today.

Right-click / context menu

Use onRightPress to handle secondary clicks. Combine with @glyx-dev/context-menu to show a positioned menu:

import { ContextMenu } from '@glyx-dev/context-menu'
 
<Pressable
  onPress={openItem}
  onRightPress={() => showContextMenu(item)}
>
  <Text>{item.name}</Text>
</Pressable>

Keyboard interaction

Pressable is keyboard-accessible by default. Space and Enter trigger onPress when focused.

Pressable does not render any visual appearance on its own. Apply styles to communicate interactivity to users — at minimum, a hovered style change.

Text ScrollView