Nested <Text> clicks

Hey.

I want to render some hypertext, e.g

var hypertext = 'this is <a href="http://facebook.com">facebook.com</a> link';

I tried programmatically splitting into

<Text>
  <Text>this is </Text>
  <Text onPress={this.onLinkPress} style={{color: '#0000ff'}}>facebook.com</Text>
  <Text> link</Text>
</Text>

but obviously onPress wouldn’t work, because nested text is transformed.

1. Should a message be thrown if onPress is being set on the nested text?
2. Is there any good way to get a click handler on the link?

[breadadams]

I know this is an old issue, but stumbled across it today after getting an error:

views nested within a <Text> must have a width and height

I got this from trying to insert a <TouchableOpacity> inside a text component. Like @brentvatne suggested.

For me, the correct solution was a mix of your two answers:

<Text>
  <Text>{`This is `}</Text>
    <Text
        style={{color: '#0000ff'}}
        onPress={() => { AlertIOS.alert('hi!') }}>
        {`facebook.com`}
     </Text>
  <Text>{` link`}</Text>
</Text>

[agentcooper]

Ok, thanks everyone, this actually works fine, I was just passing wrong this 😩 Made a small module as a result https://github.com/agentcooper/react-native-hypertext