Nested Text with onPress / TouchableOpacity Bug

[zackify]

Hey there. I found an issue when rendering nested Text elements. It's almost the exact same as this ticket: #1030

I was able to get it to sort of work. I had to add an onPress to the Text component.

Problems:

• TypeScript says there isn't an onPress on Text elements. But it does in fact work. This should probably be fixed in the type definitons.
• Not possible to use TouchableOpacity, so it doesn't feel good when pressing on these items.

When using TouchableOpacity like this:

<Text>
  <Text>first part</Text>
  <TouchableOpacity><Text>Second part</Text></TouchableOpacity>
</Text>

Second part doesn't get rendered at all.

Before you suggest using a <View> around the <Text> instead, please look at the referenced issue. When you do that, the text runs off screen, or wraps weirdly.

TLDR; I need to add a touchable opacity inside a nested Text component. Our api returns text in blocks, the RN app needs to parse it and render an array of text elements together with different styling.

React Native version:

0.61.4

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[zackify]

Still a problem

[darrylyoung]

Yeah, it'd be great if this was possible as I just came across the same issue when trying to nest links inside a string of translated text.

Right now, I'm having to use onPress on my Text component and by using that instead of TouchableOpacity, I get no control over hitSlop, activeOpacity, etc. It just gives me an ugly grey background to the text when I press it, which I can only turn off with suppressHighlighting.

[backmeupplz]

Same issue here. I have the following setup:

<TouchableOpacity onLongPress={() => console.log('1')}>
  <Text>
    <Text>Some text </Text>
    <Text onPress={() => console.log('2')}>clickable text</Text>
    <Text> another text</Text>
  </Text>
</TouchableOpacity>

I understand that we need to use onPress in the nested Text, my example works on Android (both 1 and 2 can be logged). But it seems that on iOS TouchableOpacity hijacks all touch events and doesn't propagate events down to onPress of the Text element. Any chance we can fix it or there are workarounds? Simply using View with flexDirection: row doesn't wrap text intelligently.

[backmeupplz]

FYI: when nesting just Text tags on iOS the gestures get propagated :) So this works:

<Text onLongPress={() => console.log('1')}>
  <Text>
    <Text>Some text </Text>
    <Text onPress={() => console.log('2')}>clickable text</Text>
    <Text> another text</Text>
  </Text>
</Text>

[backmeupplz]

Any activity on it? 🤔

[vinaysharma14]

Hey @zackify, this should help you out :)

<View style={{ flexDirection: 'row' }}>
    <Text>first part </Text> // notice the empty space space after part

    <TouchableOpacity>
        <Text>second part</Text>
    </TouchableOpacity>
</View>

[backmeupplz]

@vinaysharma14 looks like the wrapping is broken when you do it like this :(