onPress and onPressIn

Learn onPress, onPressIn and onPressOut events.

onPress and onPressIn

A tap is not a single event but a sequence. onPressIn fires when the finger touches the screen, onPressOut when the finger lifts, and onPress when the whole tap completes. Button only exposes onPress; Pressable and TouchableOpacity support all three.

Example: <Pressable onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)} onPress={handlePress}>. You track the pressed moment with a state variable and trigger the action on release. This pattern is useful for animated buttons.

Exercise Add an onPress handler

Complete the empty component. Define handlePress. Return <Button title="Send" onPress={handlePress} />.

Show example solution

import React from 'react';
import { Button } from 'react-native';

export default function SendButton() {
  const handlePress = () => {};
  return <Button title="Send" onPress={handlePress} />;
}

onLongPress

When you want a different action for holding a button, use onLongPress. This event fires after the finger stays on the screen for about 500 milliseconds. The delayLongPress prop tunes that duration. Pressable and TouchableOpacity support it.

Example: <Pressable onLongPress={handleDelete} delayLongPress={700}>. If the user holds for 700 milliseconds, handleDelete fires. This pattern is the mobile standard for 'press and hold to choose' menus; delete, edit and share actions live there.

Test yourself

Which fires when the finger touches the screen?
```
<Pressable ???={() => setPressed(true)}>
```
- onLongPress
- onPressOut
- onPress
- onPressIn
Show answer

onPressIn — onPressIn fires when the finger touches.

Write the onPressIn prop

<Pressable ____={() => setPressed(true)} onPress={handlePress}>
  <Text>Press</Text>
</Pressable>

Show answer

<Pressable onPressIn={() => setPressed(true)} onPress={handlePress}>
  <Text>Press</Text>
</Pressable>

Match each event to when it fires

onPressIn

Finger touched
onPressOut

Finger lifted
onPress

Tap completed
onLongPress

Long hold completed

Next lesson: disabled

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies