TouchableOpacity
TouchableOpacity is one of the most commonly used components for creating custom tappable elements in React Native, providing a fade-out visual effect when pressed.
Basic Usage
Adjusting Opacity Level
The activeOpacity prop controls how transparent the component becomes while being pressed, with a default value of 0.2.
Building Custom Buttons
TouchableOpacity is frequently combined with View and Text to build fully custom-styled buttons that match a specific app design.
Disabling TouchableOpacity
Setting the disabled prop to true prevents interaction and stops the onPress handler from firing, useful for temporarily disabling actions like form submission.
TouchableOpacity vs Pressable
While TouchableOpacity remains widely used and well understood, Pressable offers more flexibility and finer control over press states, making it the recommended choice for new projects.
Common Use Cases
- Custom buttons with brand-specific styling
- Icon buttons in headers and toolbars
- List item interactions such as navigating to a detail screen
Conclusion
TouchableOpacity remains a reliable and widely used component for building custom touchable elements in React Native, offering simple fade feedback that enhances the perceived responsiveness of your UI.
