onPress and onPressIn
- React Native course
- Beginner
- Lesson 45/116
- 5 min
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.
Practice Add an onPress handler
Complete the empty component. Define handlePress. Return <Button title="Send" onPress={handlePress} />.
Starter code
import React from 'react';
import { Button } from 'react-native';
export default function SendButton() {
// Add handlePress and return a Button
return null;
}Sample 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.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which fires when the finger touches the screen?
<Pressable ???={() => setPressed(true)}>- onLongPress
- onPressOut
- onPress
- onPressIn Correct answer
Explanation: onPressIn fires when the finger touches.
2 Write the onPressIn prop
<Pressable ____={() => setPressed(true)} onPress={handlePress}>
<Text>Press</Text>
</Pressable><Pressable onPressIn={() => setPressed(true)} onPress={handlePress}>
<Text>Press</Text>
</Pressable>Explanation: onPressIn fires when the finger touches.
3 Match each event to when it fires
| Term | Meaning |
|---|---|
onPressIn |
Finger touched |
onPressOut |
Finger lifted |
onPress |
Tap completed |
onLongPress |
Long hold completed |