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} />
<TextInput value={name} onValueChange={setName} />

Vue

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

<Pressable @press="count++" />
<Switch v-model="enabled" />
<TextInput v-model="name" />

Angular

Real @Output() EventEmitters carry the event across the boundary.

template: `
  <Pressable (press)="count = count + 1" />
  <Switch [value]="enabled" (valueChange)="setEnabled($event)" />
  <TextInput [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)} />
<TextInput value={name} onValueChange={(next) => (name = next)} />

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.