Nested Text with onPress / TouchableOpacity Bug

Hey there. I found an issue when rendering nested Text elements. It's almost the exact same as this ticket: https://github.com/facebook/react-native/issues/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

Commencez par reproduire l’exemple imbriqué de Text et TouchableOpacity de l’issue, puis lisez l’issue référencée #1030 pour comprendre le comportement attendu de retour à la ligne du texte. C’est terminé lorsque le texte tactile imbriqué s’affiche correctement, qu’une pression fournit le retour attendu et que TypeScript accepte l’utilisation prise en charge de Text onPress.