In React-native, how to make multiline of more than one text?

Question

I have something like this

<View>
  <Text>By clicking this I accept </Text>
  <TouchableHighlight>
    <Text>Terms and Conditions, </Text>
  </TouchableHighlight>
  <TouchableHighlight>
    <Text>Privacy Policy</Text>
  </TouchableHighlight>
</View>

and it looks like this

By clicking this I accept 
Terms and Conditions
Privacy Policy

or if I have it in a row it looks like this (| shows border of the screen)

|                                        |          
| By clicking this I accept Terms and Con|ditions, Privacy Policy
|                                        |

and I want it to look like

|                                       | 
| By clicking this I accept Terms and   |
| Conditions, Privacy Policy            |

By that I mean, that if a word doesn't fit on the screen, it is put in a next row. Just like a multiline text but with multiple texts and touchable highlights. Is this even possible?

Answer 1

Try something like this.

<Text>
    <Text>By clicking this I accept </Text>
    <Text onPress={() => console.log('terms pressed')} style={{color: 'red'}}>Terms and Conditions</Text>
    <Text>,</Text>
    <Text onPress={() => console.log('privacy pressed')} style={{color: 'red'}}>Privacy Policy</Text>
</Text>

Just replace the console.log with a reference to whatever function you wish to handle the click.

Answer 2

You could style it:

flexWrap: 'wrap',
flexDirection: 'row',