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

import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity style={styles.button} onPress={onPress}>
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
  countContainer: {
    alignItems: 'center',
    padding: 10,
  },
});

export default App;

Reference

Props

TouchableWithoutFeedback Props

Inherits TouchableWithoutFeedback Props.

style

activeOpacity

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

hasTVPreferredFocus

TV preferred focus . See the documentation for the View component.

nextFocusDown

TV next focus down. See the documentation for the View component.

nextFocusForward

TV next focus forward. See the documentation for the View component.

nextFocusLeft

TV next focus left. See the documentation for the View component.

nextFocusRight

TV next focus right. See the documentation for the View component.

nextFocusUp

TV next focus up. See the documentation for the View component.

alexaEntityType - Kepler Only

alexaEntityType represents the value for the type of object that needs to be considered by the Alexa UIController Interface. This is an optional prop and specific to Alexa UIController Interface support, it maps to the entity.type field from the Alexa UIController Interface (Alexa UIController API doc)

alexaExternalIds - Kepler Only

This is an optional prop and specific to the Alexa UIController Interface support, it maps to the entity.ExternalIds field from the Alexa UIController Interface (Alexa UIController API doc).

entity.ExternalIds are the identifiers for this entity unique within the scope of this endpoint. The entity.externalIds field is opaque to Alexa and is only used to include in directives from Alexa. The identifiers reported in entity.externalIds are required to be understood by the endpoint on all directive commands that accept an entity structure.

ariaPosInSet

The value for ariaPosInSet refers to the number of the element when the user can refer to the element by number, such as "Alexa, select number one."

This prop is required if the app wants to allow user to perform voice selection based on the number.

Note that providing the prop with a value does not result in the value being rendered automatically from the component, for a consistent user behavior, app needs to render the same ordinal value for the item.

keplerAltLabels - Kepler Only

The value for keplerAltLabels refers to the list of alternate names for the item.

Note: This property replaces keplerAtlLabels. keplerAtlLabels is deprecated and will be removed in a future release.

This prop is required if the app wants to allow user to perform voice selection on the same item with different names.

Last updated: Sep 30, 2025