CODEWITHSUNDEEP
react-native
Ling Qiang
Ling Qiang

Reputation: 21

How to make a textAlign center in a paragraph

I have some text paragraph like this:

<Text>
    <Text>1111</Text>
    <Text>2222</Text>
    <Text style={{textAlign:"center"}}>
        <Text>3333</Text>
    </Text>
    <Text>4444</Text>
    <Text>5555</Text>
</Text>

It shows like:

11112222333344445555

While I want it to show like:

11112222
       3333
44445555

in which 3333 is textAlign Center

how can I do this?

I tried to set flexDirection, but it did not work.

The data stuct is a little complicated, such as

{
    { text : 'aaaa'}
    { text: [
        {
            text: [
                { text: 'bbbb' },
                { text: 'cccc', style:'bold' },
                {
                    text : '3333',
                    style: 'center'
                },
                { text: 'dddd'},
            ], style: 'bold'
        },
        { text: 'eeee' }
    ]},
    { text: 'ffff', style:'i' },
    { text: 'gggg' }
}

Because View Component cannot be nested in Text Component, so I can not change the Text wrapped 3333 to View.

Upvotes: 2

Views: 73

Answers (4)

Vinil Prabhu
Vinil Prabhu

Reputation: 1289

this is working for me 

<View style={{ width: '100%', flexDirection: 'column' }}>
    <Text style={{ width: '100%' }}>1111</Text>
    <Text style={{ width: '100%' }}>2222</Text>
    <Text style={{ textAlign: "center", width: '100%' }}>
        <Text>3333</Text>
    </Text>
    <Text style={{ width: '100%' }}>4444</Text>
    <Text style={{ width: '100%' }}>5555</Text>
</View>

Upvotes: 0

ManBearPig
ManBearPig

Reputation: 45

Use a View component as a container then wrap the items you want inline in a Text component. example here

Edit 1:

estructure exampe:

<View>
  <text>
    <Text>1111</Text>
    <Text>2222</Text>
  </text>
  <Text style={{textAlign:"center"}}>
    <Text>3333</Text>
  </Text>
  <text>
    <Text>4444</Text>
    <Text>5555</Text>
  </text>
</View>

working example here

Upvotes: 1

Ankit Dubey
Ankit Dubey

Reputation: 243

try this.

<Text>
    <Text>1111</Text>
    <Text>2222</Text>
    <Text style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>3333</Text>
    </Text>
    <Text>4444</Text>
    <Text>5555</Text>
</Text>

Upvotes: 0

N Fard
N Fard

Reputation: 1099

You can use View as I mentioned here.

  <View style={{alignItems:'flex-start'}}>
    <Text>111111</Text>
  </View>
  <View style={{alignItems:'center'}}>
  <Text>2222222</Text>
  </View>
  <View style={{alignItems:'flex-start'}}>
  <Text>333333</Text>
  </View>

Upvotes: 0

Related Questions