CODEWITHSUNDEEP
react-native
Tong
Tong

Reputation: 755

Why is TouchableHighlight starting as pressed / underlayColor?

The TouchableHighlight button appears as the underlayColor (pressed) on start up. I have to press it to have it go to its background color.

export default function ProductButton(props) {
  return (
      <TouchableHighlight
        underlayColor="#555"
        onPress={() => { 
            alert('Test');
        }}>
        <Text>
            Hello
        </Text>
      </TouchableHighlight>
  );
}

Upvotes: 0

Views: 738

Answers (2)

Usman Kazmi
Usman Kazmi

Reputation: 536

I was having the same problem. It turns out I had imported TouchableHighlight from 'react-native-gesture-handler' instead of 'react-native'. please check the import.

Upvotes: 1

HarshitMadhav
HarshitMadhav

Reputation: 5069

Try adding this underlayColor = 'none' like this to get no color on touch.

 <TouchableHighlight
 underlayColor='none'
    onPress={() => {
        alert('Test');
    }}>
    <Text>
        Hello
    </Text>
  </TouchableHighlight>

or you can also use TouchableOpacity like this: 

    <TouchableOpacity
    onPress={() => {
        alert('Test');
    }}>
    <Text>
        Hello
    </Text>
  </TouchableOpacity>

Upvotes: 1

Related Questions