onPress

Learn the press event with onPress.

The onPress event

onPress fires when the user taps an element. If you want something to happen on a button press, you pass a function to the onPress prop.

You saw onPress with TouchableOpacity in the Counter project. Now we go deeper on the event side. Example: <TouchableOpacity onPress={'{() => console.log('Tapped')}'}}>. Each press logs to the console.

The function can be passed directly as {`{handlePress}`} or as an arrow function {`{() => handlePress()}`}. Use the arrow form when you need to pass parameters; otherwise the direct reference is cleaner.

Passing a function to onPress

You can pass a function to onPress in two ways. Direct reference: onPress={'{handlePress}'}. This hands the function as is.

Or inside an arrow function: onPress={'{() => handlePress()}'}. Use this when you need to pass parameters or call several things. For example {`{() => { setCount(count + 1); log(); }}`}.

Important pitfall: do not write onPress={'{handlePress()}'}. That calls the function immediately during render; it does not wait for the tap. Always pass the function itself.

Exercise A button that increments a number

Write an App component. Define count with useState(0). Put <Text>{`{count}`}</Text> inside a <TouchableOpacity>. Call setCount(count + 1) on onPress. Export the App function.

Show example solution

function App() {
  const [count, setCount] = useState(0);
  return (
    <TouchableOpacity onPress={() => setCount(count + 1)}>
      <Text>{count}</Text>
    </TouchableOpacity>
  );
}
export default App;

Test yourself

When does onPress fire?
- Every second
- When the component mounts
- Only on launch
- When the user taps
Show answer

When the user taps — Answer: when the user taps. onPress listens for the tap gesture.

Add onPress

import { TouchableOpacity, Text } from 'react-native';

function App() {
  return (
    <TouchableOpacity ____={() => console.log('Tapped')}>
      <Text>Press</Text>
    </TouchableOpacity>
  );
}

Show answer

import { TouchableOpacity, Text } from 'react-native';

function App() {
  return (
    <TouchableOpacity onPress={() => console.log('Tapped')}>
      <Text>Press</Text>
    </TouchableOpacity>
  );
}

Match the onPress parts

onPress

Tap event
handlePress

Handler function
() => ...

Arrow function
TouchableOpacity

Tappable component

Next lesson: onLongPress

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies