React Native add bold or italics to single words in Text field

Question

How do I make a single word in a Text field bold or italics  Kind of like this    lt Text gt This is a sentence  lt b gt with lt  b gt  one word in bold lt  Text gt    If I create a new text field for the bold character it will separate it onto another line so that s surely not the way to do it  It would be like creating a  lt  p   tag within a  lt  p   tag just to make one word bold

User · Answer

you can use https   www npmjs com package react-native-parsed-text    x000D   x000D  import ParsedText from  react-native-parsed-text   x000D    x000D  class Example extends React Component   x000D    static displayName    Example   x000D    x000D    handleUrlPress url    x000D      LinkingIOS openURL url   x000D      x000D    x000D    handlePhonePress phone    x000D      AlertIOS alert    phone  has been pressed     x000D      x000D    x000D    handleNamePress name    x000D      AlertIOS alert  Hello   name     x000D      x000D    x000D    handleEmailPress email    x000D      AlertIOS alert  send email to   email     x000D      x000D    x000D    renderText matchingString  matches    x000D         matches   gt      michel 5455345      michel    5455345   x000D      let pattern                          i  x000D      let match   matchingString match pattern   x000D      return      match 1       x000D      x000D    x000D    render     x000D      return   x000D         lt View style  styles container  gt  x000D           lt ParsedText x000D            style  styles text  x000D            parse   x000D                x000D                 type   url                         style  styles url  onPress  this handleUrlPress   x000D                 type   phone                       style  styles phone  onPress  this handlePhonePress   x000D                 type   email                       style  styles email  onPress  this handleEmailPress   x000D                 pattern   Bob David                style  styles name  onPress  this handleNamePress   x000D                 pattern                         i  style  styles username  onPress  this handleNamePress  renderText  this renderText   x000D                 pattern   42                       style  styles magicNumber   x000D                 pattern      w                     style  styles hashTag   x000D                x000D              x000D            childrenProps   allowFontScaling  false   x000D           gt  x000D            Hello this is an example of the ParsedText  links like http   www google com or http   www facebook com are clickable and phone number 444-555-6666 can call too  x000D            But you can also do more with this package  for example Bob will change style and David too  foo gmail com x000D            And the magic number is 42  x000D             react  react-native x000D           lt  ParsedText gt  x000D         lt  View gt  x000D         x000D      x000D    x000D    x000D  const styles   StyleSheet create   x000D    container    x000D      flex  1  x000D      justifyContent   center   x000D      alignItems   center   x000D      backgroundColor    F5FCFF   x000D       x000D    x000D    url    x000D      color   red   x000D      textDecorationLine   underline   x000D       x000D    x000D    email    x000D      textDecorationLine   underline   x000D       x000D    x000D    text    x000D      color   black   x000D      fontSize  15  x000D       x000D    x000D    phone    x000D      color   blue   x000D      textDecorationLine   underline   x000D       x000D    x000D    name    x000D      color   red   x000D       x000D    x000D    username    x000D      color   green   x000D      fontWeight   bold  x000D       x000D    x000D    magicNumber    x000D      fontSize  42  x000D      color   pink   x000D       x000D    x000D    hashTag    x000D      fontStyle   italic   x000D       x000D    x000D      x000D   x000D   x000D

User · Answer

You can use  lt Text gt  like a container for your other text components  This is example        lt Text gt     lt Text gt This is a sentence lt  Text gt     lt Text style   fontWeight   bold    gt  with lt  Text gt     lt Text gt  one word in bold lt  Text gt   lt  Text gt        Here is an example

User · Answer

I am a maintainer of react-native-spannable-string  Nested  lt Text  gt  component with custom style works well but maintainability is low   I suggest you build spannable string like this with this library   SpannableBuilder getInstance   fontSize  24         append  Using         appendItalic  Italic        append   in Text        build

User · Answer

for example   const TextBold    props    gt   lt Text style   fontWeight   bold    gt Text bold lt  Text gt     lt Text gt  123 lt TextBold  gt   lt  Text gt

User · Answer

You could just nest the Text components with the required style  The style will be applied along with already defined style in the first Text component   Example     lt Text style  styles paragraph  gt     Trouble singing in   lt Text style   fontWeight   bold    gt  Resolve lt  Text gt    lt  Text gt

User · Answer

Use this react native library  To install   npm install react-native-htmlview --save  Basic Usage    import React from  react    import HTMLView from  react-native-htmlview      class App extends React Component     render        const htmlContent    This is a sentence  lt b gt with lt  b gt  one word in bold      return       lt HTMLView      value  htmlContent       gt                Supports almost all html tags   For more advanced usage like    Link handling  Custom Element Rendering   View this ReadMe

User · Answer

Bold text    lt Text gt     lt Text gt This is a sentence lt  Text gt     lt Text style   fontWeight   bold    gt  with lt  Text gt     lt Text gt  one word in bold lt  Text gt   lt  Text gt    Italic text     lt Text gt     lt Text gt This is a sentence lt  Text gt     lt Text style   fontStyle   italic    gt  with lt  Text gt     lt Text gt  one word in italic lt  Text gt   lt  Text gt

User · Answer

For a more web-like feel   const B    props    gt   lt Text style   fontWeight   bold    gt  props children  lt  Text gt     lt Text gt I am in  lt B gt bold lt  B gt  yo  lt  Text gt

User · Answer

Nesting Text components is not possible now  but you can wrap your text in a View like this    lt View style   flexDirection   row   flexWrap   wrap    gt       lt Text gt            Hello         lt  Text gt       lt Text style   fontWeight   bold    gt            this is a bold text         lt  Text gt       lt Text gt          and this is not      lt  Text gt   lt  View gt    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

User · Answer

It is not in a text field as asked but wrapping separate text elements into a view would give the desired output  This can be used if you don t want to add another library into your project just for styling a few texts    lt View style   flexDirection   row    gt    lt Text style   fontWeight   700   marginRight  5   gt Contact Type  lt  Text gt    lt Text gt  data type  lt  Text gt   lt  View gt    Would result as follows

User · Answer

You can also put a Text tag inside of another Text tag  The second text tag will inherit the styling of the first  but you maintain the ability to style it independently from its parent   lt Text style  styles bold  gt Level        lt Text style  styles normal  gt Easy lt  Text gt   lt  Text gt     in your stylesheet       bold        fontSize  25      fontWeight   quot bold quot       color   quot blue quot          normal         will inherit size and color attributes     fontWeight   quot normal quot

User · Answer

lt Text gt       lt Text style   fontWeight   bold    gt bold lt  Text gt      normal text      lt Text style   fontStyle   italic    gt  italic lt  Text gt   lt  Text gt

[react-native] React Native add bold or italics to single words in <Text> field

Examples related to react-native