React native text like span

user_3876143 0
Viewed 41020

I tried to follow the solution in Simulate display: inline in React Native but it's not work.

I would like to do the same thing just like in HTML

First line is short so seems like no problem, but second line content is too long and it's expected to fill all the space before go to next line.

But my output is look like... output

<View style={styles.contentView}>
    <Text style={styles.username}>{s_username}</Text>
    <Text style={styles.content}>{s_content}</Text>
</View>

contentView: {
    paddingLeft: 10,
    flex: 1,
    flexDirection:'row',
    flexWrap:'wrap'
},
username: {
    fontWeight: 'bold'
},
content: {

},
react-native
2 Answers

React Native supports nested Text components, and you must use this to get your desired result. For example, you should have your second text component nested within your second, like so:

<View style={styles.contentView}>
    <Text>
        <Text style={styles.username}
              onPress={() => {/*SOME FUNCTION*/} >
           {s_username}
        </Text>
        <Text style={styles.content}>{s_content}</Text>
    </Text>
</View>
user_55089870

you can do as nesting text as text inside will consider as span like html

<View style={styles.contentView}>
  <Text style={styles.content}><Text style={styles.username}>{s_username}</Text> {s_content}</Text>
</View>

contentView: {
  paddingLeft: 10,
  flex: 1,
},
username: {
  fontWeight: 'bold'
},
content: {

},
user_71498980
Related