TouchableHighlight

TouchableHighlight is a wrapper component that responds to touches by decreasing the opacity of the wrapped view and showing an underlay color, providing visual feedback that the element is being pressed.

TouchableHighlight must have exactly one child component. If you need multiple children, wrap them in a View.

Usage

import { TouchableHighlight, Text, StyleSheet, Alert } from 'react-native';

function App() {
  return (
    <TouchableHighlight
      onPress={() => Alert.alert('Pressed!')}
      underlayColor="#DDDDDD"
      style={styles.button}
    >
      <Text style={styles.text}>Press Me</Text>
    </TouchableHighlight>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 15,
    backgroundColor: '#2196F3',
    borderRadius: 8,
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Props

number

default:"0.85"

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

<TouchableHighlight activeOpacity={0.6}>
  <Text>50% opacity on press</Text>
</TouchableHighlight>

ColorValue

default:"'black'"

The color of the underlay that shows through when the touch is active. This creates the “highlight” effect.

<TouchableHighlight
  underlayColor="rgba(0, 0, 0, 0.1)"
  style={{ backgroundColor: 'white' }}
>
  <Text>Light underlay</Text>
</TouchableHighlight>

(event: GestureResponderEvent) => void

Called when the touch is released, but not if cancelled (e.g., by a scroll).

(event: GestureResponderEvent) => void

Called when a touch is engaged, before onPress.

(event: GestureResponderEvent) => void

Called when the touch is released or cancelled.

(event: GestureResponderEvent) => void

Called when the user holds down the press for more than delayLongPress milliseconds.

() => void

Called immediately after the underlay is shown.

() => void

Called immediately after the underlay is hidden.

boolean

default:"false"

If true, disables all interactions for this component.

number

default:"0"

Delay in milliseconds from the start of the touch before onPressIn is called.

number

default:"0"

Delay in milliseconds from the release of the touch before onPressOut is called.

number

default:"500"

Delay in milliseconds from onPressIn before onLongPress is called.

Insets

Defines how far the touch can start away from the button. Extends the touchable area without changing visual layout.

<TouchableHighlight hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
  <Text>Easier to tap</Text>
</TouchableHighlight>

Insets

Defines how far the touch can move off the button before deactivating it.

ViewStyleProp

Style applied to the wrapper View.

TouchableHighlight also supports accessibility props and TV navigation props.

How It Works

When pressed, TouchableHighlight:

Wraps your child in a View
Reduces the child’s opacity to activeOpacity
Shows the underlayColor through the transparent child
Restores opacity when released

Make sure your child component has an explicit backgroundColor set, otherwise the underlay effect may not be visible.

Common Patterns

Button Component

function Button({ onPress, title }) {
  return (
    <TouchableHighlight
      onPress={onPress}
      underlayColor="#1976D2"
      style={{
        backgroundColor: '#2196F3',
        padding: 12,
        borderRadius: 4,
        alignItems: 'center',
      }}
    >
      <Text style={{ color: 'white', fontWeight: 'bold' }}>
        {title}
      </Text>
    </TouchableHighlight>
  );
}

List Item

<TouchableHighlight
  onPress={() => navigation.navigate('Details')}
  underlayColor="#f0f0f0"
>
  <View style={styles.listItem}>
    <Text style={styles.title}>Item Title</Text>
    <Text style={styles.subtitle}>Tap to view details</Text>
  </View>
</TouchableHighlight>

With Image

<TouchableHighlight
  onPress={handleImagePress}
  underlayColor="transparent"
  activeOpacity={0.7}
>
  <View style={{ backgroundColor: '#fff' }}>
    <Image
      source={{ uri: 'https://example.com/image.jpg' }}
      style={{ width: 200, height: 200 }}
    />
  </View>
</TouchableHighlight>

Tracking Press State

function StatefulButton() {
  return (
    <TouchableHighlight
      onPress={() => console.log('Pressed')}
      onShowUnderlay={() => console.log('Underlay shown')}
      onHideUnderlay={() => console.log('Underlay hidden')}
      underlayColor="#ddd"
      style={{ padding: 20, backgroundColor: '#fff' }}
    >
      <Text>Press Me</Text>
    </TouchableHighlight>
  );
}

Comparison with Other Touchables

TouchableHighlight: Shows underlay color when pressed. Best for opaque backgrounds.
TouchableOpacity: Fades opacity when pressed. Simpler and more commonly used.
TouchableWithoutFeedback: No visual feedback. Should be avoided unless necessary.
Pressable: Modern replacement with more flexibility and better performance.

For new projects, consider using Pressable instead, which offers more customization and better performance.

Core Components

User Interface

List Components

Android Components

iOS Components

Usage

Props

How It Works

Common Patterns

Button Component

List Item

With Image

Tracking Press State

Comparison with Other Touchables

​Usage

​Props

​How It Works

​Common Patterns

​Button Component

​List Item

​With Image

​Tracking Press State

​Comparison with Other Touchables

Usage

Props

How It Works

Common Patterns

Button Component

List Item

With Image

Tracking Press State

Comparison with Other Touchables