? TouchableOpacity

? Quick Overview

TouchableOpacity is a React Native component used to make any view respond to touch events by reducing its opacity when pressed.

? Key Concepts

• Provides visual feedback by fading opacity
• Wraps text, views, or icons
• Supports press events like onPress
• Lightweight and commonly used

? Syntax / Theory

The component wraps child elements and triggers an action when pressed.

// Basic TouchableOpacity structure
<TouchableOpacity onPress={handlePress}>
<Text>Click Me</Text>
</TouchableOpacity>

? Code Example(s)

// Simple button using TouchableOpacity
import React from "react";
import { View, Text, TouchableOpacity } from "react-native";

export default function App() {
return (
<View>
<TouchableOpacity onPress={() => alert("Button Pressed")}>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
}

? Live Output / Explanation

? Interactive Example

Imagine a mobile button that fades when touched — this feedback improves user experience.

Click or Tap the items below to see the opacity change in action:

? Use Cases

• Custom buttons
• Clickable cards
• List items
• Icons with actions