React-sketchapp: How to add text style to some characters in between a Text ?

[brijeshb42]

For adding text styles like bold, italic to whole sentences, it works great. But how can I add a style to some characters in between ?

I am trying to achieve this functionality -

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

[lelandrichardson]

Hey @brijeshb42,

Great question! You can do this by nesting Text components inside of each other:

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

Hope that helps.

[lelandrichardson]

Note that you can also use React to make these things more expressive:

const Bold = ({ children }) => <Text style={{ fontWeight: 'bold' }}>{children}</Text>

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

[brijeshb42]

I tried this previously but this is what I got

[lelandrichardson]

@brijeshb42 you're right. This is not the expected behavior and is a bug. Will see what we can do about fixing this!

[lelandrichardson]

cc @jongold i'm surprised we didn't run into this as an issue. Confirmed that it behaves this way though. We just don't have many internal components that take advantage of this.

[LincMitch]

I'm trying to think of a workaround for nested objects that are formatted. Why not 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>

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

This will work for a situation where text is on the same line.

Posted this to StackOverflow

[jongold]

I think there's a bug with our text positioning that stops ^^ from working, @LincMitch — could you try it + report back?

[mathieudutour]

Just tried

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

and it's working as expected. I'm wondering if flexDirection: 'row' shouldn't be the default style for Text? It would solve this bug

[LincMitch]

Great @mathieudutour that works for nested Text. But only if it's on the same line. In fact this code will force everything onto one line, so doesn't resolve the paragraph issue.
@jongold, not sure what you are asking me to do, was it this?

[LincMitch]

One thing I have noticed is that nested Text elements translate to seperate text blocks inside SketchApp. So, can this bug be resolved with a solution based on Text Styles. The result should be one block of text, and for a word to have a different Text Style added to it.

[mathieudutour]

this code will force everything onto one line

you can use

{
  flexDirection: 'row',
  flexWrap: 'wrap'
}

it will break between the blocks tho

[LincMitch]

I also tried Wrap, it's a step closer.

[DibPuelma]

Nesting Text components is not possible now, but you can wrap your text in a View like this:

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
    <Text>
        {'Hello '}
    </Text>
    <Text style={{fontWeight: 'bold'}}>
        {'this is a bold text '}
    </Text>
    <Text>
        and this is not
    </Text>
</View>

I used the strings inside the brackets to force the space between words, but you can also achieve it with marginRight or marginLeft. Hope it helps.

[ngocht143]

How to do in case a text which i want to bold is a value of a variable?
For example: this.state.strTest = {data-from-server}

[abdullatif422]

@ngocht143 I'm also looking for this type of scenario, ex: bold, Italic styles in between of the dynamic data for specific characters.
Any suggestions please how to achieve this..!

[abdullatif422]

How to do in case a text which i want to bold is a value of a variable?
For example: this.state.strTest = {data-from-server}
Following url may be helpful to achieve the requirment
https://github.com/taskrabbit/react-native-parsed-text

[dealmengor]

Just tried

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

and it's working as expected. I'm wondering if flexDirection: 'row' shouldn't be the default style for Text? It would solve this bug

You're a boss!

[nihp]

I need to decorate a single word in a line

<Text style={[styles.text, textStyle, {backgroundColor: "red"}]} onPress={(e) => this.onPress(message.content)}>{msg}</Text>

In the message need to change a text as link. How can I achieve this

This is a bold word