TouchableHighlight underlayColor not working. The color just does not change

Question

I have a component with this:

<TouchableHighlight
    style={styles.button}
    underlayColor='red'
    onPress={() => this.bootEvent(item)}>
    <Text style={{ color: '#ffffff', fontSize: 12, fontWeight: 'bold' }}>Text</Text>
</TouchableHighlight>

This is the style:

button: {
    alignItems: 'center',
    backgroundColor: '#4267b2',
    padding: 8
}

The problem is that when I click on the button, the onPress function is called but the color of the TouchableHighlight remains the same.

I also tried with this:

underlayColor={'red'}

with brackets, but its the same.

Answer 1

In case anyone comes across this behaviour, onPress needs to be supplied in order to see the colour change or highlight effect working. See https://github.com/facebook/react-native/issues/14908