Menu
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: {
},
502
To add text like an HTML span with React Native, we can nest Text components. to add 2 Text components beside each other in an outer Text component. Therefore, we see 'foobar' on the screen since they're displayed inline.
To wrap React Native text on the screen, we can set flexWrap to 'wrap' .
React Native provide textAlign style to make to make text justify but it's works in iOS, and android 8.0 ( Oreo ) or above (API level >= 26). The value will fallback to left on lower Android versions.
To truncate text component using number of lines with React Native, we can get it from the onTextLayout callback's parameter. to set numberOfLines to NUM_OF_LINES to restrict the number of lines to display. We set ellipsizeMode to 'tail' to add the ellipsis after the truncated text.
In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>. You also lose the ability to set up a default font for an entire subtree. Meanwhile, fontFamily only accepts a single font name, which is different from font-family in CSS.
React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props.
In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>. You also lose the ability to set up a default font for an entire subtree.
In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a Core Component that displays some text and View is like the <div> or <span>. So this code is defining HelloWorldApp, a new Component.
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> 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: {
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
