How to: handle press/change events

You need to react to a native event (a tap, a value change), and the public shape of that event differs by framework.

React

Callback props — the classic imperative style.

<pressable onPress={() => setCount(count + 1)} />
<switch value={enabled} onValueChange={setEnabled} />
<text-input value={name} onValueChange={setName} />

Vue

Typed emits, or v-model sugar on controlled components.

<pressable @press="count++" />
<switch v-model="enabled" />
<text-input v-model="name" />

Angular

Real @Output() EventEmitters carry the event across the boundary. The component’s imports: [SYMBIOTE_ELEMENTS] is what makes the lowercase tags compile.

template: `
  <pressable (press)="count = count + 1" />
  <switch [value]="enabled" (valueChange)="setEnabled($event)" />
  <text-input [value]="name" (valueChange)="setName($event)" />
`

Svelte

Callback props too — Svelte has no directive-based binding sugar for a native control (see two-way binding), so this looks just like React’s.

<pressable onPress={() => (count += 1)} />
<switch value={enabled} onValueChange={(next) => (enabled = next)} />
<text-input value={name} onValueChange={(next) => (name = next)} />

Solid

Callback props too, over signals — no directive sugar, same flat-bag naming as React and Svelte.

<pressable onPress={() => setCount(count() + 1)} />
<switch value={enabled()} onValueChange={setEnabled} />
<text-input value={name()} onValueChange={setName} />

Scroll events are the one exception

onScroll/onScrollBeginDrag/onScrollEndDrag/onMomentumScrollBegin/ onMomentumScrollEnd stay plain callback @Input()s on Angular, even on ScrollView and the lists — RN’s scroll callbacks can carry an Animated.event(...) marker, and @Output() can only bind a template listener expression, not an arbitrary value.

Same payload, different naming

TextInput’s React/Vue/Svelte callback merges what used to be two native callbacks into one onValueChange(text, event) — an EventEmitter can’t carry two values, so Angular keeps (valueChange) text-only and adds a separate (change) output for the raw event.

For the full event-naming table and why a given event became a Vue emit vs stayed a raw passthrough listener, see the Events guide and the Components API.