Skip to main content
Version: 0.61

TouchableOpacity

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:

renderButton: function() {
return (
<TouchableOpacity onPress={this._onPressButton}>
<Image
style={styles.button}
source={require('./myButton.png')}
/>
</TouchableOpacity>
);
},

Exampleโ€‹


Reference

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
boolNoAndroid

nextFocusForwardโ€‹

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

TypeRequiredPlatform
boolNoAndroid

nextFocusLeftโ€‹

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

TypeRequiredPlatform
boolNoAndroid

nextFocusRightโ€‹

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

TypeRequiredPlatform
boolNoAndroid

nextFocusUpโ€‹

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

TypeRequiredPlatform
boolNoiOS

Methodsโ€‹

setOpacityTo()โ€‹

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

Animate the touchable to a new opacity.