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

Beginne damit, das verschachtelte Text- und TouchableOpacity-Beispiel aus dem Issue zu reproduzieren, und lies dann das referenzierte Issue #1030, um das erwartete Verhalten beim Textumbruch zu verstehen. Erledigt ist die Aufgabe, wenn verschachtelter Touchable-Text korrekt gerendert wird, das Drücken das erwartete Feedback liefert und TypeScript die unterstützte Verwendung von Text onPress akzeptiert.