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

import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

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

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

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

isFocusableInTouchMode Vega

Determines whether the wrapped view is focusable in Touch mode

activeOpacity

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

hasTVPreferredFocus Android iOS Vega TV

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

nextFocusDown Android Vega TV

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

nextFocusForward Android Vega TV

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

nextFocusLeft Android Vega TV

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

nextFocusRight Android Vega TV

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

nextFocusUp Android Vega TV

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

ref

A ref setter that will be assigned an element node when mounted.

Last updated: May 13, 2026