Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/facebook/react-native/llms.txt

Use this file to discover all available pages before exploring further.

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

​
activeOpacity
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>
​
underlayColor
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>
​
onPress
(event: GestureResponderEvent) => void
Called when the touch is released, but not if cancelled (e.g., by a scroll).
​
onPressIn
(event: GestureResponderEvent) => void
Called when a touch is engaged, before onPress.
​
onPressOut
(event: GestureResponderEvent) => void
Called when the touch is released or cancelled.
​
onLongPress
(event: GestureResponderEvent) => void
Called when the user holds down the press for more than delayLongPress milliseconds.
​
onShowUnderlay
() => void
Called immediately after the underlay is shown.
​
onHideUnderlay
() => void
Called immediately after the underlay is hidden.
​
disabled
boolean
default:"false"
If true, disables all interactions for this component.
​
delayPressIn
number
default:"0"
Delay in milliseconds from the start of the touch before onPressIn is called.
​
delayPressOut
number
default:"0"
Delay in milliseconds from the release of the touch before onPressOut is called.
​
delayLongPress
number
default:"500"
Delay in milliseconds from onPressIn before onLongPress is called.
​
hitSlop
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>
​
pressRetentionOffset
Insets
Defines how far the touch can move off the button before deactivating it.
​
style
ViewStyleProp
Style applied to the wrapper View.
TouchableHighlight also supports accessibility props and TV navigation props.

​
How It Works

When pressed, TouchableHighlight:
  1. Wraps your child in a View
  2. Reduces the child’s opacity to activeOpacity
  3. Shows the underlayColor through the transparent child
  4. 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us