跳到主要内容

Click Events - Buttons

A surface on the screen that is clicked as an event that triggers a response from the associated action.

Button​

A basic button component that should render well on any platform. Maintains the minimum level of customization.

If this button is not suitable for your application, you can create your own button using TouchableOpacity or TouchableWithoutFeedback. Check out the source code for this button component for inspiration. Or take a look at the wide range of community made button components .

Props​

onPress​

A handler to be called when the user clicks the button.

Type
function(PressEvent)

title​

The text to display inside the button. On Android, this title will be converted to uppercase.

Type
string

For other optional properties see here

Pressable​

Since React Native 0.63, introduced a new Pressable component. A main component that detects various steps of press interaction on any of its child components. A component that responds to touch from any of its child components.

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

Touchable components: Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback

The Pressable and Touchable components are very similar. Their main functions are the same for creating interactive text / image and user interaction. Let's compare them!

Touchable component:​

  1. It includes styles and effects that do not match platform interactions.
  2. It does not support high-quality cross-platform interaction.

Pressable component:​

  1. It detects different types of interactions.
  2. Its API provides direct access to the current state of the interaction.
  3. Its capabilities can be expanded, including hover, blur, focus and more.

Pressable contains many new props and interesting features such as:

  1. delayLongPress: duration in milliseconds from onPressIn to the time onLongPress was called.
  2. Hitlop: sets an extra distance outside the element at which the press can be detected.
  3. onLongPress: Called if the time after onPressIn is more than 370 milliseconds.
  4. pressRetentionOffset: Additional distance outside the viewport at which a touch is considered a press, before onPressOut is triggered.
  5. android_disableSound (Android): If true, no android sound will play when clicked.
  6. android_ripple (Android): enables Android ripple effect and configures its properties.

According to the official React Native docs, Pressable is preferred over Touchable components. The Pressable component offers a more extensive and promising way of handling touch input. The Pressable component is intended to replace the Touchable components. It's time to start using the Pressable component for future applications.

On a Pressable- wrapped element:

  • onPressIn is called when the press is activated.
  • onPressOut is called when the press gesture is deactivated.

After clicking onPressIn, one of two things will happen:

The person will take their finger off by running onPressOut and then onPress. If the person leaves the finger longer than 500 milliseconds before removing it, onLongPress is triggered. onPressOut will still fire when they remove their finger.

Pressable

Fingers are not the most accurate tools, and users often accidentally activate the wrong item or miss an activation area. To help, Pressable has an additional HitRect that you can use to determine how far a touch can be registered from the wrapped element. Presses can be run anywhere on HitRect.

PressRect allows the press to move outside the element and its HitRect, while still being activated and having the right to "press" —imagine slowly moving your finger away from the button you are pressing.

The touch area never goes beyond the bounds of the parent view, and the Z-index of sibling views always takes precedence when touching two overlapping views.

Pressable

Example​

According to the official React Native docs, Pressable is preferred over Touchable components. A compressible component offers a more expansive and future-proof way to handle touch input. The Pressable component is intended to replace the Touchable components. It's time to start using the Pressable component for future applications.

Questions​

What is the name of the basic button component that should render well on any platform?

  1. Pressable
  2. Touchable
  3. Button

Which component is preferred according to the official React Native docs?

  1. Pressable
  2. Touchable
  3. Button

What is the name of the handler that will be called when the user clicks the button?

  1. Touchable
  2. onPress
  3. press

To see how well you learned this lesson, take the test in the mobile application of our school on this topic or in the telegram bot.

EnglishMoji!

  1. React Native
  2. Pressable vs. Touchable in React Native

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!