React-native: Nested <Text> clicks

[agentcooper]

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?

[brentvatne]

How abut this?

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

[agentcooper]

@brentvatne but then text formatting would be incorrect (multiple lines). I tried yours example with flexDirection: 'row'; flexWrap: 'wrap', but formatting is not the same.

[brentvatne]

Sorry that was silly of me, this should work just fine:

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

[vkurchatkin]

I think it's not possible currently, but could be implement with NSLinkAttributeName

[sahrens]

Yeah, we need to support this. cc @a2

On Apr 26, 2015, at 2:04 PM, Vladimir Kurchatkin [email protected] wrote:

I think it's not possible currently, but could be implement with NSLinkAttributeName

—
Reply to this email directly or view it on GitHub.

[a2]

I can look at this more tomorrow, but I was under the impression that we supported inline onPress handlers (see here).

[agentcooper]

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

[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>