In React Native, there are at least three ways to make a button: TouchableNativeFeedback
, TouchableHighlight
and TouchableOpacity
. There i
Well, This is how I typically decide what to use:
TouchableNativeFeedback
TouchableHighlight
. (TouchableOpacity
has got some weird parts when you control opacity yourself).TouchableOpacity
because it's more "bare" than TouchableHighlight
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.
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.
If you want to
TouchableHighlight
TouchableOpacity