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
– Bilal Hussain, Commented May 15, 2018 at 13:45
Possible duplicate of How to include TouchableOpacity within Text ReactNative — David Schumann
– David Schumann, Commented Dec 18, 2018 at 12:49

David Schumann · Accepted Answer · 2018-12-18 13:12:17Z

31

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>

answered Dec 18, 2018 at 13:12

David Schumann

15k13 gold badges83 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ado Over a year ago

Nesting of <View> within <Text> is supported on Android

Богуслав Павлишинець Over a year ago

For most use cases, using onPress on the Text is completely enough.

Bilal Hussain · Accepted Answer · 2018-05-16 05:29:34Z

20

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

answered May 16, 2018 at 5:29

Bilal Hussain

1,0111 gold badge10 silver badges25 bronze badges

2 Comments

Dan Over a year ago

Works fantastically. Thanks!

dan674 Over a year ago

Doesn't work if the text is wrapped, i.e. flows onto more than one line

Collectives™ on Stack Overflow

How can I wrap a TouchableOpacity around Text within Text?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related