120

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".

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?

1
  • 4
    As far as snappiness is concerned... outputting anything to console.log slows down scene transitions considerably. I'm just getting started in react native and was somewhat un-impressed of the speed while developing my first components. I removed all console.log commands (including disabling redux logger) and built for release target and the speed blew me away. This is coming from developing Cordova apps. Aug 25, 2016 at 0:45

4 Answers 4

156

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.

2
  • Thank you! I had read this article since, but couldn't find it anymore to answer my own question. It is exactly what I was looking for.
    – damusnet
    Sep 7, 2017 at 15:42
  • 1
    when using TouchableNativeFeedback, it has this square background (i dont mean ripple) How do we customize that (e.g. increase its size, make it round, or maybe remove it and just have ripple alone) ?
    – Yasir
    Nov 14, 2017 at 12:01
13

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
1
  • 2
    This answer is a helpful start… but I was hoping to find more solid technical and/or design related reasons for why to use one vs another.
    – Beau Smith
    Mar 27, 2017 at 21:41
4

I think the main essential difference as stated in Docs:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.link

TouchableHighlight

TouchableHighlight A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.

The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.

TouchableOpacity

TouchableOpacity # A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.

-2

If you want to

  • highlight button on press — use TouchableHighlight
  • change button's opacity on press — use TouchableOpacity
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.