question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:18 (5 by maintainers)

github_iconTop GitHub Comments

22reactions
lelandrichardsoncommented, Apr 28, 2017

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.

5reactions
ngocht143commented, Aug 1, 2019

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}

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add text style to some characters in between a 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...
Read more >
Change the spaces between text - Microsoft Support
Find the style you're using in the Styles gallery on the Home tab. Right-click the style you want to change and select Modify....
Read more >
3 Easy Ways to Make Any Text Bold in React - Coding Beauty
To make text bold in React, wrap the text with a span element, and set the fontWeight style property of the span to...
Read more >
Fundamental text and font styling - Learn web development
In this article we'll start you on your journey towards mastering text styling with CSS. Here we'll go through all the basic fundamentals...
Read more >
Basics of paragraph and character styles - Adobe Support
Create styles · Select text. · Select Type > Paragraph styles to open Paragraph styles panel. · Click Create a New Style to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found