React Native Academy · Lesson

Tap Handlers with TouchableOpacity and Pressable

Add tap feedback to UI elements using TouchableOpacity and the newer Pressable API, including visual feedback on press in/out states.

Making Elements Tappable

In React Native, most components like View and Text are not tappable by default — they ignore touch events. To make something respond to taps, wrap it in a touchable component. React Native provides several options: TouchableOpacity (fades the element on press), TouchableHighlight (darkens the background on press), TouchableWithoutFeedback (no visual feedback), and the newer Pressable API (most flexible). TouchableOpacity and Pressable are the two you'll use for the vast majority of UI elements.

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

export default function TapExample() {
  return (
    <View style={{ padding: 24 }}>
      <TouchableOpacity
        onPress={() => console.log('Tapped!')}
        style={{ backgroundColor: '#4f86f7', padding: 16, borderRadius: 10 }}
      >
        <Text style={{ color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>
          Tap Me
        </Text>
      </TouchableOpacity>
    </View>
  );
}

TouchableOpacity and activeOpacity

TouchableOpacity is the most commonly used touchable component. When pressed, it reduces the opacity of its children to give visual feedback that the touch was registered. The default activeOpacity is 0.2 (80% fade). Customize it with the activeOpacity prop: 0.7 for a subtle feedback, 0.9 for almost no change, or 0.1 for a strong fade. The fade animation runs on the native thread, making it smooth even when the JS thread is busy processing other events — this is what keeps it feeling responsive.

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

export default function Buttons() {
  return (
    <View style={styles.col}>
      <TouchableOpacity
        activeOpacity={0.8}  // subtle fade
        onPress={() => {}}
        style={styles.btn}
      >
        <Text style={styles.label}>Subtle (0.8)</Text>
      </TouchableOpacity>

      <TouchableOpacity
        activeOpacity={0.2}  // strong fade (default)
        onPress={() => {}}
        style={styles.btn}
      >
        <Text style={styles.label}>Strong (0.2)</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  col: { padding: 16, gap: 12 },
  btn: { backgroundColor: '#4f86f7', padding: 16, borderRadius: 10, alignItems: 'center' },
  label: { color: '#fff', fontWeight: '600', fontSize: 16 },
});

All lessons in this course

TextInput Basics and Keyboard Types
Tap Handlers with TouchableOpacity and Pressable
Toggles, Switches, and Checkboxes
Building a Simple Login Form

← Back to React Native Academy