Touchable Components in React Native

Why it exists

Before touchable wrappers existed, making a view respond to a tap required manually wiring gesture responders and visual feedback. The Touchable family was created to give developers drop-in components that handle the touch lifecycle and provide immediate visual confirmation, such as dimming or highlighting, without writing boilerplate animation code. This abstraction became the standard way to make any view interactive.

The mental model

Think of TouchableOpacity and its siblings as transparent electrical tape. You wrap them around any ordinary view to make it interactive, and they automatically show the user that the press registered by changing the view's appearance. The trade-off is that the tape adds an extra layer in the physical stack, which can shift what sits beneath it and alter your layout in unexpected ways.

How it works

TouchableOpacity wraps its children in an Animated.View to drive the opacity change. When a user presses down, the opacity of the wrapped view drops to the activeOpacity value, which defaults to 0.2. This means the view dims to 20 percent of its normal opacity while the finger is down. Because an extra Animated.View node is inserted into the component tree, the layout can be affected in ways that are not obvious from the JSX. TouchableHighlight and TouchableWithoutFeedback are siblings in the same family that offer different feedback styles, while TouchableNativeFeedback provides Android ripple effects. All of them abstract the underlying responder system.

When to use it

Reach for TouchableOpacity when you need a simple button or list row that gives immediate visual feedback and you do not need fine-grained control over press states. It is ideal for prototypes, internal tools, or legacy codebases where replacing every instance with Pressable is not practical. If you only care about a basic onPress callback and a dimming effect, it still works.

When not to use it

Do not use TouchableOpacity when you need to detect multiple press states, long presses, or hover interactions with a single component. Do not use it if the extra Animated.View wrapper is causing layout bugs such as unexpected flexbox behavior or sizing issues. The React Native documentation explicitly recommends Pressable for new projects because it is more extensive and future-proof. Migrating old touchables to Pressable removes the hidden layout node and gives you access to modern press callbacks.

One canonical example

A common use is wrapping a styled View to create a custom button. You import TouchableOpacity, wrap your text and icon container inside it, and set activeOpacity to 0.5 so the button dims noticeably on press. Because TouchableOpacity inserts an Animated.View, you should test that your padding and margin still behave as expected and that the parent flex layout does not shift. If you are starting a new screen today, the docs suggest using Pressable instead.