How to include TouchableOpacity within Text ReactNative

Question

Hi I want to wrap TouchableOpacity within a Text as I want to make some of the text clickable. When I wrap everything within a Text it looks perfect and that is how I want it to look.

 <Text 
   style={{color: colors.black,
           fontSize: 12,
           fontWeight: 'normal',
           marginTop: 10,
           lineHeight: 18}}>
      {strings.loginPrivacyTermsCondOne} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal',}}>
          {strings.loginPrivacyTermsCondTwo}
        </Text>
          {strings.loginPrivacyTermsCondThree} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal'}}>
          {strings.loginPrivacyTermsCondFour}
        </Text>

          {/* <TouchableOpacity onPress={ this.termsOfService }>
            <Text style={{color: colors.primaryColor,
                          fontSize: 12,
                          fontWeight: 'normal',}}>
              {strings.loginPrivacyTermsCondFour}
            </Text>
          </TouchableOpacity> */}
      </Text>

When I add TouchableOpacity it does not work.

I tried adding it in a view then it works fine and I am able to add TouchableOpacity but from UI perspective, they are not aligned properly.

Here is the screenshot showing just with Text where TouchableOpacity does not work and second bit is within the View where TouchableOpacity does work but does not look right.

How can make it look right as the first bit. any suggestions much appreciated.

Thanks R

Answer 1

You can nest Text elements, and assign onPress handlers on each nested Text element you want to make pressable (a link).

See below. There is an outer text element, and inside is another text element, the child text element has an onPress handler, if you run this, you'll see 'But this is!' executes the onPress handler when you press it, no need for a Touchable* element.

<Text style={{color: '#000'}}> 
     This part is not clickable 
     <Text onPress={() =>
           {alert('but this is');}}
           style={{color: '#00F'}}>
     But this is!
     </Text> 
     but this isn't
</Text>

You could make a style to place on any Text elements which have the/a onPress handler, to make them a different colour, as in your example image.

Note, this is much like HTML, where you would nest anchor tags inside a p element, for example;

<p>
    This part is not clickable 
    <a href="https://google.com"> but this is</a>
    but this isn't
</p>

In your example, it'd be something like this (untested):

<Text style={{color: colors.black,
              fontSize: 12,
              fontWeight: 'normal', 
              marginTop: 10,
              lineHeight: 18}}>
        {strings.loginPrivacyTermsCondOne} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal',}}>
          {strings.loginPrivacyTermsCondTwo}
        </Text>
          {strings.loginPrivacyTermsCondThree} 
        <Text style={{color: colors.primaryColor, 
                      fontSize: 12,
                      fontWeight: 'normal'}}>
          {strings.loginPrivacyTermsCondFour}
        </Text>

          <Text onPress={ this.termsOfService } 
                style={{color: colors.primaryColor,
                        fontSize: 12, 
                        fontWeight: 'normal'}}>
              {strings.loginPrivacyTermsCondFour}
          </Text> 
      </Text>

In response to your comment, here's a knock-up example of changing the colour, after the link has been clicked.

In short, I've added a boolean field on state, once the text gets pressed, I update that state variable to be true, the text element's style value then has a ternary operator, which decides what colour to render the text in, in my example it will show as 'colors.primaryColor' if it's not been pressed yet, and 'red' once it has been clicked.

class Foo extends Component {

    constructor (props) {
        super(props);

        this.state = {
            privacyClicked: false //Track if they have clicked privacy
        };
    }

    render () {

        return (
             <Text onPress={ () =>{
    this.setState({
        privacyClicked: true
    });
}} style={{color: (this.state.privacyClicked ? colors.primaryColor : 'red'), 
           fontSize: 12,
           fontWeight: 'normal'}}>
    {strings.loginPrivacyTermsCondFour}
</Text> 
        );
    }
}

PS, formatting on the example Text isn't great.