React Native add bold or italics to single words in field

Question

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.

score 332 · Accepted Answer · edited Apr 03 '18 at 16:02

332

You can use <Text> like a container for your other text components. This is example:

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

Here is an example.

edited Apr 03 '18 at 16:02

David Schumann

13,380
9
75
96

answered Mar 01 '16 at 09:10

Slowyn

8,663
3
18
22

9

Yes but like I said, that wouldn't work because each text element is separated onto different lines. – Hasen Mar 02 '16 at 02:30
1

If you split your ` with` into three separate lines, you will lose the leading space space, so you might want to use `{' with'}` to be sure you always have it. – Christoffer Karlsson Jun 16 '17 at 08:14
2

Just wanna point out that if you `styled-components` you can pass a bold `property`. – Yassine S. Aug 06 '17 at 10:34
4

@KonstantinYakushin Link is broken, fyi – kevlarjacket Sep 18 '17 at 19:18
@kevlarjacket Yes. Unfortunately, rnplay service is closed. I'll try and update the example. – Slowyn Sep 19 '17 at 14:31
This shows how to **bold**, but not how to *italics*. – Kenneth Reitz Jan 06 '18 at 14:19
By chance is there a way so that the style of the parent propagates to the childrens whose can override it? – Sebastien Lorber Feb 07 '18 at 10:55
@SebastienLorber, Yeah, children inherit all styles from parent, but can be easily overrided by their own styles. – Slowyn Feb 07 '18 at 11:10
ok I'll have to do another test then, because I use glamorous-native Text wrapper so maybe it only works if the parent is the original Text RN component and not a wrapper (even if a RN Text is rendered at the end) – Sebastien Lorber Feb 07 '18 at 11:33
And to make italic text use the fontStyle property. Like below: ` with` – Monero Jeanniton Sep 25 '18 at 03:29
The nested `` components will create `SpannableString` in Android and `NSAttributedString ` in iOS [docs](https://reactnative.dev/docs/text#nested-text) – MJ Studio Jul 25 '20 at 02:56
You may use bold version of the font family for better visual results. (`fontFamily: "FontnameBold"` instead of `fontWeight: "bold"`) – alpere May 07 '21 at 22:20

score 89 · Answer 2 · edited Apr 03 '18 at 17:16

89

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>

edited Apr 03 '18 at 17:16

David Schumann

13,380
9
75
96

answered Aug 12 '16 at 02:37

Nick

11,483
8
41
44

4

this does't work for variables that have a string value – Ismail Iqbal Jun 06 '17 at 09:16
6

as a web-like I'd say - use `` instead of `` :) – Adam Pietrasiak Jul 21 '17 at 07:14
1

It'll be crash on Ios and Android, You can't use tag inside – Hakan Mar 04 '19 at 06:51
Could you add `const B = this.B` to the `render` – Idan Aug 21 '19 at 08:38
@Hakan - https://reactnative.dev/docs/text - Just wanted to point out that nested tags are actually part of the spec now. – ejb Apr 10 '20 at 19:15

score 12 · Answer 3 · answered Mar 02 '18 at 15:37

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

import ParsedText from 'react-native-parsed-text';
 
class Example extends React.Component {
  static displayName = 'Example';
 
  handleUrlPress(url) {
    LinkingIOS.openURL(url);
  }
 
  handlePhonePress(phone) {
    AlertIOS.alert(`${phone} has been pressed!`);
  }
 
  handleNamePress(name) {
    AlertIOS.alert(`Hello ${name}`);
  }
 
  handleEmailPress(email) {
    AlertIOS.alert(`send email to ${email}`);
  }
 
  renderText(matchingString, matches) {
    // matches => ["[@michel:5455345]", "@michel", "5455345"]
    let pattern = /\[(@[^:]+):([^\]]+)\]/i;
    let match = matchingString.match(pattern);
    return `^^${match[1]}^^`;
  }
 
  render() {
    return (
      <View style={styles.container}>
        <ParsedText
          style={styles.text}
          parse={
            [
              {type: 'url',                       style: styles.url, onPress: this.handleUrlPress},
              {type: 'phone',                     style: styles.phone, onPress: this.handlePhonePress},
              {type: 'email',                     style: styles.email, onPress: this.handleEmailPress},
              {pattern: /Bob|David/,              style: styles.name, onPress: this.handleNamePress},
              {pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
              {pattern: /42/,                     style: styles.magicNumber},
              {pattern: /#(\w+)/,                 style: styles.hashTag},
            ]
          }
          childrenProps={{allowFontScaling: false}}
        >
          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.
          But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
          And the magic number is 42!
          #react #react-native
        </ParsedText>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 
  url: {
    color: 'red',
    textDecorationLine: 'underline',
  },
 
  email: {
    textDecorationLine: 'underline',
  },
 
  text: {
    color: 'black',
    fontSize: 15,
  },
 
  phone: {
    color: 'blue',
    textDecorationLine: 'underline',
  },
 
  name: {
    color: 'red',
  },
 
  username: {
    color: 'green',
    fontWeight: 'bold'
  },
 
  magicNumber: {
    fontSize: 42,
    color: 'pink',
  },
 
  hashTag: {
    fontStyle: 'italic',
  },
 
});

Thanks for sharing ParsedText! Brilliant – Monero Jeanniton Sep 25 '18 at 03:00 — Monero Jeanniton, Sep 25 '18 at 03:00
Welcom guys. Happy coding – Ahmad Moussa Sep 27 '18 at 11:37 — Ahmad Moussa, Sep 27 '18 at 11:37
how to do for dynamic text – Keerthieaaswar Ramachandran Dec 01 '20 at 19:24 — Keerthieaaswar Ramachandran, Dec 01 '20 at 19:24

score 11 · Answer 4 · answered May 20 '20 at 13:35

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

score 11 · Answer 5 · answered Oct 29 '20 at 20:38

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",
  }

score 7 · Answer 6 · edited Apr 03 '18 at 17:10

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

Link handling
Custom Element Rendering

View this ReadMe

score 3 · Answer 7 · answered Mar 21 '19 at 05:41

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>

score 1 · Answer 8 · answered Sep 25 '18 at 03:36

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>

score 1 · Answer 9 · answered Apr 28 '20 at 11:34

1

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()

answered Apr 28 '20 at 11:34

MJ Studio

3,947
1
26
37

1

Can we use this library to customize the placeholder of Textarea ? – Krishan Madushanka Feb 25 '22 at 12:52

score 1 · Answer 10 · edited May 15 '20 at 09:33

1

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

edited May 15 '20 at 09:33

Peyman Mohamadpour

17,954
24
89
100

answered May 15 '20 at 09:07

Naveen Jadala

25
1
8

Add some explanation for your code would be preferred – keikai May 16 '20 at 03:22

Alex Nolasco · Answer 11 · 2022-08-10T13:13:17.707

There seems to be one or two components out there like react-native-markup-text, but if you don't mind using regular expressions to parse small markup.

Snack Demo

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

/**
 * @typedef MiniMarkupTextProps
 * @type {object}
 * @property {string|null|undefined} text - a piece of mini markup text.
 * @property {object|null|undefined} itemStyle - itemStyle;
 */
export default React.memo((/** @type {MiniMarkupTextProps} */ props) => {
  const markup = props.text;
  const mappings = new Map([
    [
      'p',
      (text, index) => {
        return (
          <Text key={index} style={props.itemStyle}>
            {text}
          </Text>
        );
      },
    ],
    [
      'b',
      (text, index) => {
        return (
          <Text key={index} style={[{ fontWeight: 'bold' }, props.itemStyle]}>
            {text}
          </Text>
        );
      },
    ],
  ]);
  const keys = Array.from(mappings.keys());
  const regExp = new RegExp(
    `(${keys.map((e) => `<${e}>`).join('|')})(.*?)(${keys
      .map((e) => `<\\/${e}>`)
      .join('|')})|(\\s*)`,
    'g'
  );

  return (
    <Text>
      {markup?.match(regExp)?.map(function (tag) {
        const isEmpty = tag.trim().length === 0;
        return isEmpty ? (
          <Text>&nbsp;</Text>
        ) : (
          tag?.match(/<[a-z]>/g)?.map(function (t, index) {
            const text = tag.replace(/<[^>]+>/g, '');
            return (
              mappings.get?.(t.replace(/<|>/g, ''))?.(text, index) ?? null
            );
          })
        );
      })}
    </Text>
  );
});

Usage

  <MiniMarkupText
    text="<p>This is a simple</p> <b>test</b> <p>and it could be useful</p> <b>. Then again it all depends...</b>"
    itemStyle={{ color: 'red',  textAlign: 'center'}}
  />

Can this be made to work with line break tags? I'd also like to highlight some text to look like a blue hyperlink — Steve W, Mar 11 '23 at 13:16

score 0 · Answer 12 · answered Apr 05 '20 at 11:36

0

for example!

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

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

answered Apr 05 '20 at 11:36

Anh Tuấn Lê

149
1
3

score -1 · Answer 13 · answered Jul 18 '19 at 19:21

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.

score -6 · Answer 14 · answered Feb 21 '22 at 09:56

-6

This worked for me

<h2>
{`Step ${activeStep+1}/3 - `} <strong>{stepName}</strong>
</h2>

//output Step 1/3 - Information

answered Feb 21 '22 at 09:56

Tomka

1
1

1

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. – Tyler2P Feb 21 '22 at 10:41

React Native add bold or italics to single words in field

14 Answers14

Linked