react-native: [TouchableHighlight] activeOpacity not working

Description

The activeOpacity of the TouchableHighlight component is not working. By default it’s 0.85 hence the black underlayColor should not be full black. And even if I add the prop activeOpacity and set it to a custom value, nothing change, the underlay color is still full black.

jan-11-2017 13-23-40

Reproduction

<TouchableHighlight onPress={() => {}} underlayColor={/* whatever */}>
  <Text>PRESS ME</Text>
</TouchableHighlight>

Solution

A weird thing I noticed: if I use a custom component in the TouchableHighlight with a View for its root and I forward the native props with setNativeProps to this View, the activeOpacity works fine. It doesn’t work if I directly use a View in the TouchableHighlight children.

Additional Information

React Native version: 0.41.0-rc.0
Platform: iOS
Operating System: macOS

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 40
Comments: 26 (8 by maintainers)

Most upvoted comments

31 upvotes means it’s definitely an issue we should consider.

+13

Kerumen on Jan 15, 2018

I also resolved this using underlayColor prop on TouchableHighlight <TouchableHighlight underlayColor="rgba(0, 0, 0, 0)" />

+13

geekdreamzz on Nov 9, 2017

@Droppers I just had it and I have the latest version so, yes. Not yet! I just used RGBA, this worked for me: underlayColor="rgba(253,138,94,0.2)"

HideyaSwider on Sep 19, 2017

@hramos This should be reopened. The issue has 13 upvotes and is still not working on the latest React Native. Can you reconsider?

Kerumen on Jun 12, 2017

Still broken with “react-native”: “0.52.1”

rikur on Jan 27, 2018

@hramos I’ve run in to the same problem. Apparantly, activeOpacity only works if underlayColor is explicitly declared. Any idea why?

RareSecond on Jun 11, 2017

This issue can be fixed by setting a background colour on the child component of TouchableHightlight. For example, this will result in the black overlay:

<TouchableHighlight>
	<View>
		<Text>Testing</Text>
	</View>
</TouchableHighlight>

However this would work as expected:

<TouchableHighlight>
	<View style={{backgroundColor: "#fefefefe"}}>
		<Text>Testing</Text>
	</View>
</TouchableHighlight>

Actually quite a few things don’t quite work with RN when no background colour is set. I had a similarly strange issue with react-native-side-menu, which again was solved by setting a background colour.

laurent22 on Jul 21, 2017