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

Bắt đầu bằng cách tái hiện ví dụ Text và TouchableOpacity lồng nhau từ issue, sau đó đọc issue được tham chiếu #1030 để hiểu hành vi ngắt dòng văn bản được mong đợi. Được xem là hoàn tất khi văn bản touchable lồng nhau được render chính xác, thao tác nhấn cung cấp phản hồi như mong đợi và TypeScript chấp nhận cách sử dụng Text onPress được hỗ trợ.