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

[backmeupplz]

Not fixed yet!

[aprilmintacpineda]

It’s 2022 and we still can’t make a proper clickable text that’s inside a paragraph.

<Text
  style={{
    marginTop: 45,
    width: 167,
    textAlign: 'center'
  }}
>
  Don’t have an account yet?{' '}
  <TouchableOpacity
    onPress={() => {
      console.log('fuck');
    }}
  >
    <Text style={{ color: 'red' }}>Create account</Text>
  </TouchableOpacity>{' '}
  now!
</Text>

The code above, you be able to render a paragraph, but the touchable text is not properly aligned. It will be pushed up by a few pixels and I can’t find a workaround to fix it.

We have self driving cars but can’t do a proper touchable text, ironic.