0

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?

user3500783
  • 1
  • 3

3 Answers3

1

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>
Mohamed Khalil
  • 3,036
  • 1
  • 20
  • 26
  • 2
    Kindly make a practice of adding a descriptive description of your code, as how this work and/or the reason behind doing this. – Adeel Imran Sep 18 '17 at 08:59
0

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.

Adeel Imran
  • 13,166
  • 8
  • 62
  • 77
  • Unfortunately, nested TEXT tags don't work right now with React-SketchApp as its a known bug (see link above). However react-SketchApp have such promise that I wanted a workaround till the bug gets fixed. – user3500783 Sep 19 '17 at 03:51
0

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>
Mathieu Dutour
  • 549
  • 3
  • 13