Skip to content

[BUG][ANDROID]: fontFamily is working only for paragraph #518

Description

@simeonbakalov

Describe the bug
The fontFamily is not being respected on for strong and em.
Please check the following cases:

  • When ONLY the paragraph has a fontFamily then strong and em inherit the style
  • When ALREADY HAVE fontFamily added to paragraph and we add fontFamily to strong or em the fontFamily disappears for the respected element
  • When we DON'T HAVE fontFamily added to paragraph and we add fontFamily to strong or em the fontFamily DOESN'T APPLY for the respected element

To Reproduce
comment and uncomment fontFamily: "CocoSharpCustom-Bold" the way i have given the examples in the Description section

import React from "react"
import { StyleSheet } from "react-native"
import { EnrichedMarkdownText } from "react-native-enriched-markdown"
import type { MarkdownStyle } from "react-native-enriched-markdown"

const markdown2 = `# Strong and em styling test

This Markdown should set the fontFamily to bold and italic elements:

**Bold text WWW** and _emphasized text_ should also be Times new roman.
`

const markdownStyle2: MarkdownStyle = {
  paragraph: {
    color: "#c03c9d",
    fontSize: 18,
    lineHeight: 26,
    marginTop: 8,
    marginBottom: 8,
    // fontFamily: "CocoSharpCustom-Bold",
  },
  strong: {
    fontFamily: "CocoSharpCustom-Bold",
    fontWeight: "bold",
  },
  em: {
    fontFamily: "CocoSharpCustom-Bold",
    fontStyle: "italic",
  },
}

export const Markdown = () => (
    <EnrichedMarkdownText
      markdown={markdown2}
      markdownStyle={markdownStyle2}
      selectable
      flavor="github"
      containerStyle={styles.markdown}
      onLinkPress={({ url }) => {
        Linking.openURL(url)
      }}
    />
)

Expected behavior
strong and em should be able to overwrite the parent fontFamily, fontSize and fontWeight and the style should be respected from the

Screenshot
the example is when paragraph ONLY has fontFamily: "CocoSharpCustom-Bold"
Image

Device (please complete the following information):

  • Device: PIXEL 9A
  • OS: ANDROID
  • Version: "react-native": "0.83.9", "react-native-enriched-markdown": "0.7.3",

Additional context
It would be much better to have support for strong and em using the following styles:

  • fontWeight: "number", NOT "normal" and "bold"
  • fontSize,
  • lineHeight
  • and more customizable styles for strong and em

EDIT:
h1,h2,h3,h4,h5,h6 do not get affected by fontFamily as well

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions