CODEWITHSUNDEEP
cssreact-nativefontsexporeact-native-render-html
Quddus George
Quddus George

Reputation: 1352

How do I style italic or bold text with a custom font in an expo project using react-native-render-html?

I am trying to use custom fonts within the render component of react-native-render-html. I have been able to successfully style the base text following the documentation, however the italic and bold text just jump back to the default font. So I loaded in a custom font for bold and italic and bold-italic.

I tried to use the tagsStyles prop as follows without success:

tagsStyles={{
              b: {
                fontFamily: "comicneue-bold",
                color:"blue",
              },
            }}

I cannot edit the html directly:

<div>Here is an example of the html</div>
<div>
    <br>
</div>
<div><b>that i am trying</b>&nbsp;to style <i>without <b>success.</b></i>
</div>

I am using the systemFonts like this:

  const systemFonts = [...defaultSystemFonts, "Caveat", "comicneue-bold"];

<RenderHTML
  contentWidth={width}
  source={{ html: note.body }}
  systemFonts={systemFonts}
  tagsStyles={{
    b: {
      fontFamily: "comicneue-bold",
      color: "blue",
    },
  }}
  baseStyle={{ fontFamily: "comicneue-bold", fontSize: 18 }}
></RenderHTML>

The bold text does turn blue, but it does not adopt the custom font. For debugging, I'm styling the regular text with the font I am hoping to use for the bold text, and the font is styling the default text correctly.

How do I style italic or bold or bold and italic text with a custom font in an expo project using react-native-render-html?

Upvotes: 2

Views: 2630

Answers (1)

Quddus George
Quddus George

Reputation: 1352

With this snack, which contains a minimum reproduction, it became clear this is only affecting android and so likely a bug.

Upvotes: 2

Related Questions