How to Use TouchableOpacity in React Native: Simple Guide

In React Native, use TouchableOpacity to create a button that changes its opacity when pressed, giving visual feedback. Wrap your content inside TouchableOpacity and use the onPress prop to handle taps.

Syntax

The TouchableOpacity component wraps any child component to make it respond to touch with an opacity change. Use the onPress prop to specify what happens when the user taps it.

• onPress: Function called when pressed.
• Children: The content inside the button (text, icons, etc.).
• Optional styling can be added via style.

javascript

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

export default function MyButton() {
  return (
    <TouchableOpacity onPress={() => alert('Pressed!')} style={{padding: 10, backgroundColor: '#2196F3'}}>
      <Text style={{color: 'white'}}>Press Me</Text>
    </TouchableOpacity>
  );
}

Output

A blue button with white text 'Press Me' that shows an alert 'Pressed!' when tapped.

Example

This example shows a simple button using TouchableOpacity. When you tap the button, it shows an alert message. The button changes opacity to show it is pressed.

javascript

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

export default function App() {
  const handlePress = () => {
    Alert.alert('Button pressed!');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handlePress} style={styles.button} activeOpacity={0.6}>
        <Text style={styles.text}>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 25,
    borderRadius: 8
  },
  text: {
    color: 'white',
    fontSize: 16
  }
});

Output

Centered blue rounded button with white text 'Click Me'. On tap, an alert 'Button pressed!' appears and the button briefly becomes semi-transparent.

Common Pitfalls

Common mistakes when using TouchableOpacity include:

• Not setting onPress, so the button does nothing.
• Wrapping too many nested views causing unexpected layout or touch issues.
• Forgetting to style the button, making it hard to see or tap.
• Not using activeOpacity to control the opacity feedback.

Always test on a real device or emulator to ensure touch feedback works as expected.

javascript

/* Wrong: No onPress handler */
<TouchableOpacity style={{padding: 10}}>
  <Text>Tap me</Text>
</TouchableOpacity>

/* Right: With onPress handler */
<TouchableOpacity onPress={() => console.log('Tapped')} style={{padding: 10}}>
  <Text>Tap me</Text>
</TouchableOpacity>

Quick Reference

Here is a quick summary of key props for TouchableOpacity:

Prop	Description	Default
onPress	Function called when pressed	Required
activeOpacity	Opacity value when pressed (0 to 1)	0.2
style	Custom styles for the button	None
disabled	Disables touch events if true	false
children	Content inside the button	None

Key Takeaways

Use TouchableOpacity to create buttons that show opacity feedback on press.

Always provide an onPress function to handle taps.

Style your TouchableOpacity for good visibility and touch area.

Use activeOpacity to control how transparent the button becomes when pressed.

Test touch feedback on real devices or emulators for best results.