Version: Next

TouchableOpacity

If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.

Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.

Example


Reference

Props

TouchableWithoutFeedback Props

Inherits TouchableWithoutFeedback Props.


style

TypeRequired
View.styleNo

activeOpacity

Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.

TypeRequired
numberNo

tvParallaxProperties

(Apple TV only) Object with properties to control Apple TV parallax effects.

  • enabled: If true, parallax effects are enabled. Defaults to true.
  • shiftDistanceX: Defaults to 2.0.
  • shiftDistanceY: Defaults to 2.0.
  • tiltAngle: Defaults to 0.05.
  • magnification: Defaults to 1.0.
  • pressMagnification: Defaults to 1.0.
  • pressDuration: Defaults to 0.3.
  • pressDelay: Defaults to 0.0.
TypeRequiredPlatform
objectNoiOS

hasTVPreferredFocus

(Apple TV only) TV preferred focus (see documentation for the View component).

TypeRequiredPlatform
boolNoiOS

nextFocusDown

TV next focus down (see documentation for the View component).

TypeRequiredPlatform
numberNoAndroid

nextFocusForward

TV next focus forward (see documentation for the View component).

TypeRequiredPlatform
numberNoAndroid

nextFocusLeft

TV next focus left (see documentation for the View component).

TypeRequiredPlatform
numberNoAndroid

nextFocusRight

TV next focus right (see documentation for the View component).

TypeRequiredPlatform
numberNoAndroid

nextFocusUp

TV next focus up (see documentation for the View component).

TypeRequiredPlatform
numberNoAndroid

Methods

setOpacityTo()

setOpacityTo((value: number), (duration: number));

Animate the touchable to a new opacity.