CODEWITHSUNDEEP
react-native
Bram Vanbilsen
Bram Vanbilsen

Reputation: 6505

Display Text components inline and wrapped inside Views

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:

enter image description here

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)

Upvotes: 2

Views: 1025

Answers (5)

Mahdi khodabandelu
Mahdi khodabandelu

Reputation: 152

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'
    }
});

enter image description here 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'
     }
});

enter image description here

Upvotes: 0

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

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>

Upvotes: 0

Andriy Klitsuk
Andriy Klitsuk

Reputation: 564

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.

Upvotes: 0

Nima
Nima

Reputation: 1932

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>

Upvotes: 1

Debabrata
Debabrata

Reputation: 122

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

Upvotes: 0

Related Questions