React-pdf: Bold, Italics specific word in Text

[VrajSolanki]

Hello @diegomura
I wanted to certain word to be made bold in the block, but was unsuccessful.
Approaches I tried:

1. <Text><Text>this line contains </Text> <Text styles ={boldStyle}bold words </Text> </Text>
   error: > Cannot read property 'getAbsoluteLayout' of null

1. doesn't work.
   Is there a way that it can be done? Please Suggest.

[diegomura]

There is currently no way of doing something like this. The main reason is because of the difficulty of rendering text on the document. You would have to calculate where to stop rendering a text, and where to start the next one with different styles. In addition, there are issues like line splitting and more that I'm not even taking into account for the moment

[VrajSolanki]

@diegomura true that was the issue I was facing, okay let me pull and try to figure this out, if I can I will send a PR.

[diegomura]

That would be awesome! Thanks @VrajSolanki

[diegomura]

Now you can do this by creating inline texts. The only thing to take into account is that provide the fonts for each particular style you want to apply. If you want to use the built-in fonts, you should also change the font-family to each particular part of the text. These are:

'Courier',
'Courier-Bold',
'Courier-Oblique',
'Courier-BoldOblique',
'Helvetica',
'Helvetica-Bold',
'Helvetica-Oblique',
'Helvetica-BoldOblique',
'Times-Roman',
'Times-Bold',
'Times-Italic',
'Times-BoldItalic',
'Symbol',
'ZapfDingbats',

[rajit]

@diegomura Do you have an example of using "inline texts"? Is it just a matter of:

<View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
  <Text style={{ ... }}>This is </Text>
  <Text style={{ ... }}>emphasised</Text>
  <Text style={{ ... }}> text</Text
</View>

If the text is very long, does it wrap and still inline correctly with the next <Text/>?

[rajit]

For future visitors, this is how you can achieve inline styling:

<Text>
  This is some text. Some of it is <Text style={{ fontFamily: 'italic font' }}>
  italicised</Text>, some made <Text style={{ fontFamily: 'bold font' }}>bold</Text>.
</Text>

This will look something like this:

This is some text. Some of it is _italicised_, some made __bold__.

[liron-navon]

@rajit As a visitor from the future, I appreciate this =)

[ReenanCampos]

As a visitor from the future. I appreciate this too, thanks 😄