Touchables

Touchables

TouchableOpacity, TouchableHighlight and TouchableWithoutFeedback

Before Pressable there were the Touchables, and older codebases are full of them. Each bakes in one kind of feedback:

TouchableOpacity fades the child to activeOpacity (default 0.2) while pressed.
TouchableHighlight shows an underlayColor behind its one child.
TouchableWithoutFeedback shows nothing, and its one child must accept the responder props it receives.

The three classic Touchables sharing one counter (Touchables.js, excerpt)XML

      <TouchableOpacity style={box} activeOpacity={0.4} onPress={onPress}>
        <Text>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableHighlight style={box} underlayColor="#90caf9" onPress={onPress}>
        <Text>TouchableHighlight</Text>
      </TouchableHighlight>
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={box}><Text>TouchableWithoutFeedback</Text></View>
      </TouchableWithoutFeedback>

All three accept Pressable's event props (onPressIn, onPressOut, onPress, onLongPress, delayLongPress, hitSlop), so migration is mechanical. The docs are blunt about the third: do not use TouchableWithoutFeedback unless you have a very good reason, because everything that responds to a press should show that it did.

MENU