Wrap text in TouchableOpacity nested within text
Enabling onPress
inside a component Text
will cause an ugly gray highlight (within a second) of the text to appear when pressed.
Instead of having a grayed out selection, I want the text to be slightly transparent when clicked. This can be easily accomplished by wrapping the component Text
in TouchableOpacity
. However, incorporating this into another component Text
is a different story. According to this and the fact that it TouchableOpacity
returns View
, I have to specify the width and height to accomplish this ... and this is only possible on iOS.
How can I include a "squeeze" component Text
- which undergoes an opacity change when clicked - inside another component Text
?
<Text/>
Click <TouchableOpacity onPress={...}><Text>Here</Text></TouchableOpacity>
<Text/>
source to share
Touchable Opacity
must be a parent component i.e. a component Text
can be wrapped inside Touchable Opacity
just like a tag button
in html
allows you to have a tag p
inside it.
This is a rough snippet of how your code should look to achieve the desired effect.
<TouchableOpacity style={...} onPress={() => console.log('clicked')}>
<Text style={...}>Buy Now</Text>
</TouchableOpacity>
Why do you want to wrap this in another component Text
? How about wrapping it in a component View
. Wrapping with a component Text
makes the code useless.
source to share