Javatpoint Logo
Javatpoint Logo

React Native Touchables

Touchable components provide the capability to capture the tapping functionality. If the basic button does not look right for your app, you can use touchables components as there alternative. Using these components, you build your own button. Tapping on these components, you can display the feedback.

The touchables components do not provide any default styling, so you will need to do your style for presenting nicely in your app.

Types of Touchable Components

There are four touchable components provided by React Native. Selection of this component depends on what kind of feedback you want to provide:

  • TouchableHighlight
  • TouchableNativeFeedback
  • TouchableOpacity
  • TouchableWithoutFeedback.

React Native TouchableHighlight

The TouchableHighlight can be used anywhere you would use a button or link on the web. The background becomes dark on pressing this component.

Props

Props Type Required Platform Description
activeOpacity number no Determines the opacity of wrapped view when it is touched.
onHideUnderlay function no Calls instantly after the underlay is hidden.
onShowUnderlay function no Calls instantly after the underlay is shown.
style View.style no
underlayColor color no Show the underlay color when the touch is active.
hasTVPreferredFocus bool no iOS It focuses TV preferred, work only for iOS.
tvParallaxProperties object no iOS It is an object with properties the control the Apple TV parallax effects.

React Native TouchableNativeFeedback

The TouchableNativeFeedback makes a view to response properly to touch. This component works only on Android operating system. It uses native state drawable to display the touch feedback.

It supports only a single View instance as a child node. It is implemented by replacing that View with another instance of RCTView node.

Props

Props Type Required Description
background backgroundPropType no It determines the background drawable that is going to be displayed as feedback.
useForeground bool no It adds the ripple effect to the foreground of the view, instead of the background.

React Native TouchableOpacity

The TouchableOpacity wrapper is used to reduce the opacity of the button. It allows the background to be seen while the user presses down. The opacity of button will be controlled by wrapping the children in an Animation.

Props

Props Type Required Platform Description
activeOpacity number no It determines the opacity of wrapped view when it is touched.
tvParallaxProperties object no iOS It is an object with property that controls the Apple TV parallax effects.
hasTVPreferredFocus bool no iOS It focuses TV preferred, works on Apple TV only.

Methods

Method Description
setOpacityTo() It animates the touchable to a new opacity.

React Native TouchableWithoutFeedback

The TouchableWithoutFeedback is used when the user wants to handle the tap functionality but doesn't want to display any feedback.

Props

Props Type Required Description
hitSlop object no This defines how far your touch can start away from the button.
onAccessibilityTap function no If accessible is set to true, the system invokes this function when the user performs accessibility tap gesture.
accessibilityHint string no It helps the user to understand what will happen when they perform an action on the accessibility element.
accessibilityLabel node no It overrides the text, which is ridden by the screen reader when users interact with the element.
delayLongPress number no It delays the onLongPress in milli-second calling onPressIn.

Some time user presses a view and holds it for the set of time. This long press is handled by the function using onLongPress props of any of the above "Touchable" components.

React Native Touchables Example

Output:

React Native Touchables React Native Touchables
React Native Touchables




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA