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

Comienza reproduciendo el ejemplo anidado de Text y TouchableOpacity del issue y, después, lee el issue referenciado #1030 para conocer el comportamiento esperado del ajuste de texto. Se considera terminado cuando el texto táctil anidado se renderiza correctamente, al pulsarlo proporciona el feedback esperado y TypeScript acepta el uso compatible de Text onPress.