CODEWITHSUNDEEP
javascriptcssreactjsreact-nativereact-sketchapp
user3500783
user3500783

Reputation: 1

How to add text style to some characters in between a Text

I am looking for a work around to this React-SketchApp bug.

At time of posting this, my solution was to use flexbox on text that's not nested and give it the appearance that it's nested.

<Text style={myStyle}>This is a </Text><Bold>word</Bold><Text> in a sentence.</Text>

With a Style of:

flex-direction: row; justify-content: flex-start;

This will work for a situation where text is on the same line. But how about if say a bolded element is within a text block and not on a simple line, what can I do then? Maybe some fancy CSS or javascript trick?

Upvotes: 0

Views: 1342

Answers (3)

Mathieu Dutour
Mathieu Dutour

Reputation: 549

You went in the right direction with flexDirection: 'row' for a workaround but you still need to nest Text elements like so:

<Text style={{flexDirection: 'row' }}>
  This is a <Text style={{fontWeight: 'bold'}}>bold word</Text> in a sentence
</Text>

Upvotes: 0

Mohamed Khalil
Mohamed Khalil

Reputation: 3136

you can achieve this by nested Text component as described in react native documentations nested text 

<Text style={myStyle}>This is a 
  <Text style={{ fontWeight: 'bold' }}> word</Text> in a sentence.
</Text>

Upvotes: 1

Adeel Imran
Adeel Imran

Reputation: 13966

Consider <Text> tag as <p>, <span> tag similar in HTML. You can use both <Text> as a block and inline level element. What you are trying to achieve you can do by,

<Text style={{ color: 'blue' }}>I am a an amazing 
  <Text style={{ fontWeight: 'bold' }}> green</Text> line. I hope you 
  like it. or you can even do multiple nesting 
  <Text style={{ fontSize: '16'}}> of 
    <Text style={{ color: 'red' }}> multiple</Text> 
    elements
  </Text>
</Text>

I hope this helps.

Upvotes: 0

Related Questions