[TouchableOpacity] does not work well inside Text

[jtremback]

I'd like to use TouchableOpacity to implement a link-like thing in a Text element. However, there are two issues:

• The Opacity doesn't change when the element is Touched.
• Padding on the text element will offset the text inside the TouchableOpacity, but not the touch target.

Here is a demonstration of both issues: https://rnplay.org/apps/eOeLxg

[grabbou]

Maybe I am dumb, but for me the opacity works when the link is tapped/clicked?

[jtremback]

Sorry, maybe it should be clearer. The link on the top is in a text element, while the one on the bottom is normal.

[brentvatne]

@jtremback @grabbou - check out the PR that I linked to above - we should use onPress on <Text> rather than TouchableOpacity, this PR adds support for it

[dennishansen]

What if we want to apply hitslops or opacity when you touch? Both of these things currently cannot be achieved.

[gustavjf]

@dennishansen

I'd also like to know how to achieve hitSlop on text links. Have you been able to figure that out?

[gustavjf]

The best I've tried so far is something like the following: https://sketch.expo.io/SJAyOPche

I'd like to treat the touchable text the same as regular text so the copy flows correctly when it reaches the end of a parent container.

But this solution makes it so each word appears like a different link.