Display Text components inline and wrapped inside Views - react-native

Question

I am trying to display Text components wrapped inside View components inline. With inline, I mean that the text should be displayed next to each other at all time. This is the best "solution" that I have atm:
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<View>
<Text>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>b</Text>
</View>
<View>
<Text>cccccccccccccccccccccccccccccc</Text>
</View>
{/* Possibly an icon, or text with a different lineheight...*/}
</View>
But it doesn't work all the time! This is what it renders out:
It does work when all strings are only one line long though.
Now, I know what is going on, a View is always a rectangle, thus in my example, the view that contains the first string is as wide as the first line of the letters a and as high as the two rows of letters a.
I am looking for a way around this, while still using Views. So something like this:
<Text>
<Text>...</Text>
<Text>...</Text>
</Text>
is unfortunately not the answer. It will not work in my use-case because I need to have the ability to display superscript, which appears to only be possible by changing the line height, and I would like to be able to add some inline icons (using react-native-vector-icons).
I have been struggling with this seemingly easy issue for way too long now, so at last this cry for help. Anyone has an idea? (If there is a way to display inline superscript, that'd also work, then I can nest Text components but I guess there isn't)

Answer 1

you need to put text inside each other
<View style={{ flexDirection: 'row' }}>
<Text>aaaaaaaaaaaaaaaaaaaaaaaaaasdadasdadaaaaaaaaaaaaaaaaaaaaaaaa
<Text style={{ fontWeight: 'bold' }}>asdadasdab
<Text>cccccccccccccccccccccccccccccc</Text>
</Text>
</Text>
</View>

Answer 2

Try using display: inline-block; in the style section

Answer 3

Your code is missing the flex activator. This will do the trick:
<View style={{ flex: 1, flexDirection: 'row'}}>
<Text>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
<Text style={{ fontWeight: 'bold' }}>b</Text>
<Text>cccccccccccccccccccccccccccccc</Text>
</View>
You have to specify when you're working with FlexBox layouts.

Answer 4

Unfortunately, your question was not clear. But that's what I understood from your question
<View style={{ flex: 1}}>
<Text>aaaaaaaaaaaa</Text>
<View style={{ flexDirection: 'row', justifyContent: "flex-start"}}>
<Text style={{ fontWeight: 'bold' }}>b</Text>
<Text>ccccccccccccccccccc</Text>
</View>
</View>

Answer 5

I found out your solution with define multi-row.
export default class App extends React.Component {
render() {
return <View style={styles.container}>
<View ><Text >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text></View>
<View ><Text style={{fontWeight: 'bold'}}>bbbbb</Text></View>
<View ><Text >ccccc</Text></View>
</View>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
}
});
and you can hidden overflow text with below code
export default class App extends React.Component {
constructor(){
super()
this.state = {
mytextvar :'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
maxlimit:50
};
}
render() {
return <View style={styles.container}>
<View ><Text >{((this.state.mytextvar).length > this.state.maxlimit) ?
(((this.state.mytextvar).substring(0,this.state.maxlimit-3)) + '...') :
this.state.mytextvar}</Text></View>
<View ><Text style={{fontWeight: 'bold'}}>bbbbb</Text></View>
<View ><Text >ccccc</Text></View>
</View>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
}
});