Mouse and keyboard input

Desktop apps are driven by a mouse or trackpad and a keyboard. This page describes the events a view receives from them.

Mouse buttons

Mouse buttons use the W3C numbering:

button	Button
0	Left (primary)
1	Middle
2	Right (secondary)
3	Back
4	Forward

The left button is a press. It drives React Native's responder system, so Pressable, Button and the Touchable components react to it, and the touch events (onTouchStart, onTouchMove, onTouchEnd) fire.

The other buttons never start a press: a right click does not make a Pressable fire onPress. They are only reported by the pointer events below. A right click also opens a context menu, and the back button fires BackHandler.

Pointer events

View takes the pointer events of the web. Each has a capturing counterpart, such as onPointerDownCapture.

Prop	Fires
onPointerDown	A button is pressed over the view.
onPointerUp	A button is released.
onPointerMove	The pointer moves over the view.
onPointerCancel	The press is interrupted.
onPointerEnter	The pointer enters the view. It does not bubble.
onPointerLeave	The pointer leaves the view. It does not bubble.
onPointerOver	The pointer enters the view or one of its children.
onPointerOut	The pointer leaves the view or one of its children.

React TSX

<View
  onPointerEnter={() => setHovered(true)}
  onPointerLeave={() => setHovered(false)}
  onPointerDown={event => {
    if (event.nativeEvent.button === 2) openMenu();
  }}
  style={{ backgroundColor: hovered ? '#eee' : 'white' }}
/>

The event's nativeEvent has these fields:

Field	Meaning
pointerType	Always 'mouse'. Trackpads report as a mouse.
pointerId, isPrimary	One pointer exists, and it is primary.
button	The button that changed, or -1 for a move.
buttons	A mask of the buttons held: 1 left, 2 right, 4 middle, 8 back, 16 forward.
ctrlKey, shiftKey, altKey, metaKey	The modifier keys held. metaKey is Command on macOS and the Windows key elsewhere.
clientX, clientY (also x, y, pageX, pageY, screenX, screenY)	The pointer position in the window, in points.
offsetX, offsetY	The position inside the view that the event is sent to.
target	The tag of the view under the pointer.

Scrolling

The mouse wheel and the trackpad scroll a ScrollView and the lists built on it. There is no wheel event for other views. For scrolling in your own components, wrap the content in a ScrollView.

Keyboard

A view receives key events while it has keyboard focus. Make a view focusable with the focusable prop, or use a component that takes focus itself, such as TextInput.

Prop	Fires
onKeyDown	A key is pressed, and while it repeats.
onKeyUp	A key is released.
onFocus	The view gets focus.
onBlur	The view loses focus.

React TSX

<View
  focusable
  onKeyDown={event => {
    if (event.nativeEvent.key === 'Escape') close();
  }}
/>

The key event's nativeEvent has:

Field	Meaning
key	The key as the web names it: 'a', 'Enter', 'ArrowLeft'.
code	The physical key, such as 'KeyA'.
keyCode	The legacy numeric key code.
repeat	true while the key is held down.
ctrlKey, shiftKey, altKey, metaKey	The modifier keys held.

onFocus events carry focusVisible, which is true when focus arrived through the keyboard. Use it to draw a focus ring only for keyboard users.

For shortcuts that should work wherever the user is in the app, use keyboard shortcuts instead of onKeyDown. They are resolved natively, and take precedence over a text input and over menu accelerators.

Text input

TextInput handles typing, selection with the mouse and the keyboard, the clipboard, and input methods for you. See TextInput.