react-native-markdown-display: On web (react-native-web) styles are ignored

Some of our content has headings.

I just noticed this now, but headings font size is not changed for headings when using React-native-web

This only happens in react-native-web, in react-native this seems to work.

In react native web, I see a warning generated.


Warning: Failed prop type: Invalid props.style key `fontSize` supplied to `View`.
Bad object: {
  "flexDirection": "row",
  "fontSize": 32
}

in View (at renderRules.js:88)

I am trying to follow that code, but The comment in renderRules.js says: // applying styles.heading and styles.headingX to the view is fine here because of style rollup we do in the AstRenderer.js file for text display items

I am only guessing, but AstRender looks for styles in a <View>, and it seems like in react-native, the View component allows (at least for now), to pass through unknown style directives, but in RNW – this way of passing custom style directives does not work. Which is, perhaps, why styling is not work on the web now (it used to work before the fork).

The flexDirection and fontSize seem to be ‘defaults’ for Heading1 type.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (10 by maintainers)

Most upvoted comments

oh sorry @vladp one other thing i noticed when working with your example code - you use a custom markdownit instance.

This library exports markdownit if you dont want to include it directly in your deps:

import MarkdownIt from 'react-native-markdown-display/src/MarkdownIt';

iamacup on Dec 13, 2019

Super, I am going to do a bit more on device testing to check that 5.1.0 is all good then ill do a release

iamacup on Dec 13, 2019