When to use TouchableNativeFeedback, TouchableHighlight or TouchableOpacity?

Question

In React Native, there are at least three ways to make a button: TouchableNativeFeedback, TouchableHighlight and TouchableOpacity. There is also TouchableWithoutFeedback, which the documentation clearly states you should not use because "all the elements that respond to press should have a visual feedback when touched".

• TouchableNativeFeedback is Android only and "replaces the View with another instance of RCTView"
• TouchableHighlight "adds a view to the view hierarchy"
• TouchableOpacity works "without changing the view hierarchy"

Are there any other significant differences between the three? Is one of them the goto component? In what case should you use TouchableHighlight over TouchableOpacity? Are there any performance implications?

I am writing an application right now, and find that all three have a significant delay between tap and the action (in this case a navigation change). Is there any way to make it snappier?

Answer 1

source: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472, by Nick Wientge

TouchableHighlight

• What it does: Darkens or lightens the background of the element when pressed.

• When to use it: On iOS for touchable elements or buttons that have a solid shape or background, and on ListView items.

TouchableOpacity

• What it does: Lightens the opacity of the entire element when pressed.

• When to use it: On iOS for touchable elements that are standalone text or icons with no background color.

TouchableNativeFeedback

• What it does: Adds a ripple effect to the background when pressed.

• When to use it: On Android for almost all touchable elements.

Answer 2

Well, This is how I typically decide what to use:

• If I'm building for Android-only, and the component is large enough that the native feedback will be visibly different than using the others then I use TouchableNativeFeedback
• If I want to control the opacity on the component or I want the button to have color when touched, and I don't want to control the focused state of some element inside the Touchable, then I use TouchableHighlight. (TouchableOpacity has got some weird parts when you control opacity yourself).
• In all other cases, I use TouchableOpacity because it's more "bare" than TouchableHighlight