CODEWITHSUNDEEP
react-native
Adam Lagevik
Adam Lagevik

Reputation: 683

React Native Touchable Highlight

When I press on an <TouchableHighlight />, with an <Image/> component inside, a white square appears even though I have set underlayColor prop's opacity value to 0.

What is causing this and how can I fix it?

<TouchableHighlight underlayColor="rgba(255,255,255,0)" onPress={() => this.props.navigation.goBack()} style={{width: 50, height: 50, position: "absolute", top:15, left: 15, elevation: 10, zIndex: 10}}>
    <Image
        style={{ width: 50, height: 50,}}
          source={backArrow}
    />
</TouchableHighlight>

This is how it looks when I press the touchable highlight

Upvotes: 0

Views: 365

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

Perhaps you could take a different approach, by using TouchableOpacity with activeOpacity set to 0 like so:

<TouchableOpacity activeOpacity={0} onPress={() => this.props.navigation.goBack()} style={{ width: 50, height: 50, position: "absolute", top:15, left: 15, elevation: 10, zIndex: 10}}>
    <Image style={{ width: 50, height: 50 }} source={backArrow} />
</TouchableOpacity>

If I understand your requirements correctly, then you should find this use of the activeOpacity prop achieves what you want. For more information on activeOpacity, see this documentation

Upvotes: 1

Related Questions