Pressable

Learn advanced touch with Pressable.

Pressable

Pressable is React Native's next-generation touch component. It resembles TouchableOpacity but offers a wider range of events: onPressIn, onPressOut, onLongPress all in one component. The style prop can take a function that receives the { pressed } state.

Example: <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable>. Here pressed being true sets opacity to 0.5. This lets you fully customize the press feedback. New code recommends Pressable.

The pressed state

The function passed to Pressable's style is called with an object that has a { pressed } property. When pressed is true the button is being held. You can use this to render a different look during the press. The same idea works with onPressIn and onPressOut.

Example: style={({ pressed }) => ({ backgroundColor: pressed ? 'tomato' : 'steelblue' })}. The button turns reddish while pressed and steel blue when released. This pattern is the standard for press feedback in modern React Native code.

Exercise Press feedback with Pressable

Complete the empty component. Define handlePress. Return a <Pressable onPress={handlePress} style={({ pressed }) => ({ backgroundColor: pressed ? 'tomato' : 'steelblue' })}> containing <Text style={{ color: 'white' }}>Press</Text>.

Show example solution

import React from 'react';
import { Pressable, Text } from 'react-native';

export default function PressButton() {
  const handlePress = () => {};
  return (
    <Pressable onPress={handlePress} style={({ pressed }) => ({ backgroundColor: pressed ? 'tomato' : 'steelblue' })}>
      <Text style={{ color: 'white' }}>Press</Text>
    </Pressable>
  );
}

Test yourself

Match each component to its feature

Pressable

Next-generation touch
TouchableOpacity

Opacity feedback
Button

System default look
onLongPress

Long-press function
What can Pressable's style prop take?
```
<Pressable style={???}>...</Pressable>
```
- Only an object
- Only an array
- An object or a function
- Only a string
Show answer

An object or a function — Pressable style can be either an object or a function.

Write the pressed parameter

<Pressable style={({____}) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable>

Show answer

<Pressable style={({pressed}) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable>

Next lesson: onPress and onPressIn

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies