TouchableOpacity and TouchableHighlight in React Native

Introduction

TouchableOpacity and TouchableHighlight let users tap on things in your app. They show feedback so users know their tap worked.

You want a button that fades a bit when tapped.

You want a button that highlights with a color when tapped.

You want to make images or text tappable with visual feedback.

You want simple touch feedback without complex animations.

Syntax

React Native

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

<TouchableOpacity onPress={() => {}} activeOpacity={0.7}>
  <Text>Press me</Text>
</TouchableOpacity>

<TouchableHighlight onPress={() => {}} underlayColor="#DDDDDD">
  <Text>Press me</Text>
</TouchableHighlight>

TouchableOpacity fades the child view's opacity when pressed.

TouchableHighlight shows a colored highlight under the child view when pressed.

Examples

This button fades out a bit when tapped and shows an alert.

React Native

<TouchableOpacity onPress={() => alert('Tapped!')}>
  <Text>Tap Opacity</Text>
</TouchableOpacity>

This button shows a red highlight color when tapped and shows an alert.

React Native

<TouchableHighlight onPress={() => alert('Tapped!')} underlayColor="#FFAAAA">
  <Text>Tap Highlight</Text>
</TouchableHighlight>

You can change how much the button fades by adjusting activeOpacity.

React Native

<TouchableOpacity activeOpacity={0.3}>
  <Text>More transparent on tap</Text>
</TouchableOpacity>

You can change the highlight color with underlayColor.

React Native

<TouchableHighlight underlayColor="blue">
  <Text>Blue highlight</Text>
</TouchableHighlight>

Sample App

This app shows two buttons stacked vertically. The first uses TouchableOpacity and fades when tapped. The second uses TouchableHighlight and shows a gray highlight when tapped. Both show alerts on press.

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        activeOpacity={0.6}
        onPress={() => Alert.alert('TouchableOpacity pressed!')}
        accessibilityLabel="Opacity button"
      >
        <Text style={styles.text}>TouchableOpacity</Text>
      </TouchableOpacity>

      <TouchableHighlight
        style={styles.button}
        underlayColor="#DDDDDD"
        onPress={() => Alert.alert('TouchableHighlight pressed!')}
        accessibilityLabel="Highlight button"
      >
        <Text style={styles.text}>TouchableHighlight</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  button: {
    backgroundColor: '#2196F3',
    paddingVertical: 12,
    paddingHorizontal: 25,
    marginVertical: 10,
    borderRadius: 5
  },
  text: {
    color: 'white',
    fontSize: 16
  }
});

Important Notes

Use accessibilityLabel to help screen reader users understand the button.

TouchableOpacity is good for subtle feedback, TouchableHighlight is good when you want a colored highlight.

Both components require a single child element.

Summary

TouchableOpacity fades the button on tap.

TouchableHighlight shows a colored highlight on tap.

Use these to give users clear tap feedback in your app.