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

How do I make a single word in a Text field bold or italics? Kind of like this:

<Text>This is a sentence <b>with</b> one word in bold</Text>

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 < p > tag within a < p > tag just to make one word bold.

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 <b>with</b> one word in bold';

  return (
   <HTMLView
     value={htmlContent}
   />    );
  }
}

Supports almost all html tags.

For more advanced usage like

1. Link handling
2. Custom Element Rendering

View this ReadMe

you can use https://www.npmjs.com/package/react-native-parsed-text

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 => ["[@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_
      <View style={styles.container}>_x000D_
        <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_
        >_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. [email protected]_x000D_
          And the magic number is 42!_x000D_
          #react #react-native_x000D_
        </ParsedText>_x000D_
      </View>_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_
});

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.

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.

<View style={{flexDirection: 'row'}}>
 <Text style={{fontWeight: '700', marginRight: 5}}>Contact Type:</Text>
 <Text>{data.type}</Text>
</View>

Would result as follows

<Text>
    <Text style={{fontWeight: "bold"}}>bold</Text>
    normal text
    <Text style={{fontStyle: "italic"}}> italic</Text>
</Text>

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:

 <Text style={styles.paragraph}>
   Trouble singing in. <Text style={{fontWeight: "bold"}}> Resolve</Text>
 </Text>

for example!

const TextBold = (props) => <Text style={{fontWeight: 'bold'}}>Text bold</Text>

<Text> 123<TextBold/> </Text>

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.

<Text style={styles.bold}>Level: 
    <Text style={styles.normal}>Easy</Text>
</Text>

//in your stylesheet...

  bold: {
    fontSize: 25,
    fontWeight: "bold",
    color: "blue",
  },
  normal: {
  // will inherit size and color attributes
    fontWeight: "normal",
  }

Bold text:

<Text>
  <Text>This is a sentence</Text>
  <Text style={{fontWeight: "bold"}}> with</Text>
  <Text> one word in bold</Text>
</Text>

Italic text:

<Text>
  <Text>This is a sentence</Text>
  <Text style={{fontStyle: "italic"}}> with</Text>
  <Text> one word in italic</Text>
</Text>

For a more web-like feel:

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

<Text>I am in <B>bold</B> yo.</Text>

I am a maintainer of react-native-spannable-string

Nested <Text/> 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()