React native text like span

Question

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...

<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: {

},

score 83 · Accepted Answer · edited Aug 31 '20 at 11:03

83

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>

edited Aug 31 '20 at 11:03

Adrian Mole

49,934
160
51
83

answered Oct 03 '17 at 06:46

Ryan Turnbull

3,766
1
25
35

How about I add "TouchableOpacity" to username? – Wayne Tang Oct 03 '17 at 07:38
1

you can use the `Text` component a similar way, by using the `onPress` prop. Note you will have a seperate the `Text` components now. Ive editted my answer to show this – Ryan Turnbull Oct 03 '17 at 08:26
Is there a difference between using as a parent or – Dror Bar Jul 09 '19 at 14:21
2

Using to wrap other components causes the child elements to be treated as inline - things like margin are ignored in these children, and positioning will be thrown off compared to wrapping the text elements in a which treats its children as block components. – Wige Aug 08 '19 at 18:22

score 9 · Answer 2 · answered Oct 03 '17 at 09:14

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: {

},

React native text like span

2 Answers2

Linked