Setting allowFontScaling prop on <Text> about react-native-markdown-display HOT 9 CLOSED

I was just looking into the same issue and found a workaround that resolves the issue once and for all, in the entire app.

Add this line to your App.tsx:

(Text as any).defaultProps = { ...(Text as any).defaultProps, allowFontScaling: false };

Note that this is perusing an undocumented API, hence use it at your own risk.

I am using the following in App.js

Text.defaultProps = {};
Text.defaultProps.allowFontScaling = false;

My version is documented or at least commonly recommended, as well as the maxFontSizeMultiplier as an alternative . - But both approaches have the disadvantage that it applies to the whole app and not just the Markdown view, which is what I am still looking for.

from react-native-markdown-display.

@darrylyoung @chriswayg or you can use it like this:

<Markdown
  rules={{
    text: (node, children, parent, styles, inheritedStyles = {}) => (
      <Text
        allowFontScaling={false}
        maxFontSizeMultiplier={1.2} // <- add this one
        key={node.key}
        style={[inheritedStyles, styles.text]}
      >
        {node.content}
      </Text>
    ),
  }}
  style={markdownStyles}
>
  {content}
</Markdown>

from react-native-markdown-display.

I was just looking into the same issue and found a workaround that resolves the issue once and for all, in the entire app.

Add this line to your App.tsx:

(Text as any).defaultProps = { ...(Text as any).defaultProps, allowFontScaling: false };

Note that this is perusing an undocumented API, hence use it at your own risk.

from react-native-markdown-display.

I can take a look at this a little bit later, do you mind trying to see what happens if you overwrite the TextGroup rule as well and apply the scaling prop?

from react-native-markdown-display.

Yeha its a propper pain in the ass, this is why this exists in the readme, and is a hangover from the parent library this fork came from:

Be careful when styling 'text': the text rule is not applied to all rendered text, most notably list bullet points. If you want to, for instance, color all text, change the body style.

but in this case, we need to apply a prop not a style, to the text components.

I will have a little think about how best to approach this and try and commit something tomorrow, in the mean time you will need to change the list render rule, which is an ugly rule to change because of the hasParents dependency... list_item but i think its the only solution right this second - probably just copy and paste the whole thing - you can import hasParents as it is exported here: https://github.com/iamacup/react-native-markdown-display/blob/master/src/index.js

from react-native-markdown-display.

I'm looking into switching to this library from react-native-markdown-view because this specific feature is lacking there too, and that library seems less maintained than this one.

There's a two year old pull request to add support for setting textProps, which is another possible way of doing it, see Pass props to components.

from react-native-markdown-display.

Thank you @hetmann!

from react-native-markdown-display.

Hey! Thanks for the quick reply.

if you overwrite the TextGroup rule as well and apply the scaling prop?

Sure. So, that got me 99% the way there and I thought no text was changing when setting my device text size but I did notice a small shift. This was due to a list I have in my markdown. It looks like there's a Text component there, too, that would also need to inherit the allowFontScaling={true} prop.

I haven't done too much digging in the code to see how feasible this is right now but I guess, in a situation like this, it's better to be able to set allowFontScaling (or something worded similarly) at the top level and then have it apply to all rendered <Text> components as opposed to manually overriding each rule.

For context, the list I had was basically this:

Some text...

- Item 1
- Item 2

from react-native-markdown-display.

Sounds good. Thanks again!

I'm in no immediate rush for this right now (my app won't be released for a month or so I imagine) but I really appreciate the support. I've starred the repository and I'm watching for releases so I'll check back at some point. Have a good week. 👍

from react-native-markdown-display.