Font family style broken when using body styling rule and others simultaneously in Android Devices

[CXZ7720]

When apply custom font using body style rule to apply globally, other rule's fontFamily broken in android device.

I think this is because nested text component styling issue related with https://github.com/facebook/react-native/issues/20398

DebugPrintTree options activated, the example result was like this.

Because of strong styled component were nested in default text styled component, fontFamily doesn't apply to children component.

[ENV] RN 0.64.3 Device : Android 11

[How To Reproduce]

1. Using custom font (like NotoSans from google fonts). In this case, I use separate font files of its weights from google fonts (NotoSans-Bold, NotoSans-Regular, NotoSans-Medium)

2. apply different styling rules using style props

                   <Markdown
                     style={{
                       body: {
                         fontFamily: Fonts.NotoSansRegular,
                         fontSize: 15,
                       },
                       strong: {
                         fontFamily: Fonts.NotoSansBold
                       }
                   >
                     {article.contents}
                   </Markdown>

3. Only body styling applied and other nested component's style ignored and followed by system default.(In my case, just fontWeight were applied by default library's option, fontFamily style were overwritten by system font)

4. It has same result when using rules prop. I tried even replace global styling option body to text, but it doesn't work.

[ohmdob]

same my workaround

<Markdown
              style={{
                body: { fontFamily: typography.medium, color: '#FAA'}
              }}
              rules={{
                strong: (node) => <Text style={{ fontFamily: typography.bold, color: '#FAA'} as ViewStyle} text={node.children[0].content} />
              }}
              >
            {md}
 </Markdown>

[isonlaxman]

is this still the way to do this? seems like annoying effort just to get bold/italics working

[dmitry-blackwave]

Guys, you can try pass node content instead `strong: (node: ASTNode, _children: ReactNode, _parent: ASTNode[], _styles: StyleProp) => (

{node?.children[0]?.content} ),` it works well for me