TouchableHighlight

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.

The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.

function MyComponent(props: MyComponentProps) {
  return (
    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableHighlight
  activeOpacity={0.6}
  underlayColor="#DDDDDD"
  onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableHighlight>;

Example

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

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

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <TouchableHighlight onPress={onPress}>
          <View style={styles.button}>
            <Text>Touch Here</Text>
          </View>
        </TouchableHighlight>
        <View style={styles.countContainer}>
          <Text style={styles.countText}>{count || null}</Text>
        </View>
      </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,
  },
  countText: {
    color: '#FF00FF',
  },
});

export default TouchableHighlightExample;

Reference

Props

TouchableWithoutFeedback Props

Inherits TouchableWithoutFeedback Props.

activeOpacity

Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires underlayColor to be set.

onHideUnderlay

Called immediately after the underlay is hidden.

onShowUnderlay

Called immediately after the underlay is shown.

ref

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

style

isFocusableInTouchMode Vega

Determines whether the wrapped view is focusable in Touch mode

underlayColor

The color of the underlay that will show through when the touch is active.

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).

testOnly_pressed

Handy for snapshot tests.

Last updated: Jul 08, 2026