Tabris.js Properties: HighlightOnTouch
The highlightOnTouch property can be set on any widget. If set to true, the widget will give visual feedback when touched. On Android, a ripple animation will radiate out from the center of the widget.
By default, the highlightOnTouch
property is set to false. If you press on a TextView
, for example, there would be no indication that any “touch event” has fired on that widget. The text will just stand there, blandly.
An exception is a Button
, which by default highlights when pressed.
The example in the Tabris playground shows a Composite with its highlightOnTouch
property set to true.
highlightOnTouch
does not prevent a tap event from bubbling up to the parent widget. Take the following example:
1 2 3 4 5 6 7 8 9 10 11 |
import {TextView, contentView, Stack} from 'tabris'; contentView.append( <Stack stretch onTap={sayHi} padding={16} spacing={16} alignment='stretchX'> <TextView highlightOnTouch text='HighlightOnTouchElement'/> </Stack> ); function sayHi() { console.log('hi'); } |
We have a TextView
that highlights on touch with a Stack
widget as its parent. When we touch the TextView
, the tap event will propagate to the Stack
widget, and ‘hi’ will be logged in the console.
This is potentially confusing for users. The TextView
, not Stack
, gave visual feedback. So we might want to handle the tap event on the TextView
and stop it from propagating through.
1 2 3 4 5 6 7 |
<TextView highlightOnTouch onTap={handleEventOnTextView} text='HighlightOnTouchElement'/> function handleEventOnTextView() { console.log('just the text view is pressed'); //stop event from propagating return false; } |
Now when we tap the TextView
, only ‘just the text view is pressed’ is logged to the console.

“TextView with highlight on touch enabled”
For more information about the properties, methods, and events of the Widget base class check out the documentation.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!