How can I wrap a TouchableOpacity around Text within Text?

Question

I am trying to perform something like the following, which React Native does not like.

I want to wrap clickable text in a TouchableOpacity, and with its own styles.

By wrapping it in a parent Text component, all of the text sits perfectly side by side. However, I can't put a TouchableOpacity inside of a Text component.

<View>
  <Text>
    <Text>Hello my name is</Text>
    <TouchableOpacity onPress={this.openProfile}>
      <Text style={styles.clickable}>{ name }</Text>
    </TouchableOpacity>
    <Text>, I am currently working at </Text>
    <TouchableOpacity onPress={this.openCompanyPage}>
      <Text style={styles.clickable}>{ company }</Text>
    </TouchableOpacity>
  </Text>
</View>

I get the error: Views nested within a <Text> must have a width and height. I am unable to set those measurements as I want them to be dynamic and be dependant on the content.

For example name could be John Smith or Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.

As per comment, I want to render portions of the text with custom styles. I can do that effortlessly by placing Text within Text. Now I want to add a clickable area to those portions of text ("Dan", "Google"). But I cannot embed a TouchableOpacity inside of a Text element.

Can you please tell me why do you want to do this? What exactly you want to achieve? — Bilal Hussain, May 15 '18 at 13:45
Possible duplicate of [How to include TouchableOpacity within Text ReactNative](https://stackoverflow.com/questions/52168451/how-to-include-touchableopacity-within-text-reactnative) — David Schumann, Dec 18 '18 at 12:49

score 27 · Answer 1 · answered Dec 18 '18 at 13:12

Actually the solution of Bilal Hussain did not work for me. I got an error saying Nesting of <View> within <Text> is not supported on Android.

What worked for me was the solution described in this SO answer. Just using <Text> elements only and applying a onPress property to them like so:

<Text>
        Hello my name is
        <Text style={{color: 'red'}} onPress={function1}>Dan, </Text>
        I am currently working at
        <Text style={{color: 'red'}} onPress={function2}>Google</Text>
</Text>

Nesting of within is supported on Android – Ado Jul 02 '21 at 08:31 — Ado, Jul 02 '21 at 08:31

score 18 · Accepted Answer · answered May 16 '18 at 05:29

Dan. You need to achieve this by wrapping everything inside <View> tag and add style accordingly.

try this:

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
        <Text>Hello my name is </Text>
        <TouchableOpacity>
          <Text style={{color: 'red'}}>Dan, </Text>
        </TouchableOpacity>
        <Text>I am currently working at </Text>
        <TouchableOpacity>
          <Text style={{color: 'red'}}>Google</Text>
        </TouchableOpacity>
      </View>

Let me know. Thanks

Ref for more style : https://facebook.github.io/react-native/docs/style.html

Doesn't work if the text is wrapped, i.e. flows onto more than one line — dan674, Jan 07 '20 at 17:04

How can I wrap a TouchableOpacity around Text within Text?

2 Answers2

Linked