Setting allowFontScaling prop on <Text>

Hi! First off, thank you for this package.

I’m playing around with it in a React Native (Expo) app and I’m having trouble with font size. I’d like to disable font scaling but it doesn’t seem like it’s possible. I had a quick look through the code and in React Native itself and it seems like it could be related to a few things.

For example, the following code, unrelated to your package, will result in “Test” being rendered at a fixed size, regardless of your device’s font size. That is, the disabling of the font scaling is working. If, however, I put the allowFontScaling on the inner <Text> only, it doesn’t work.

<Text allowFontScaling={false}>
  <Text>Test</Text>
</Text>

So, I tried the following:

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

As this doesn’t work, I can only imagine it’s related to the issue I mentioned above (the nested <Text> components). Hopefully I’m missing something here, though, and that there’s an easy solution to disable all font scaling in my rendered markdown. If there’s not, I think it’d be a great prop for the Markdown component itself, setting the property on all rendered <Text> components.

Anyway, I hope that was clear enough. Have a nice day. ✌️

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:9 (2 by maintainers)

Top GitHub Comments

3reactions

hetmanncommented, Oct 28, 2021

@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>

2reactions

chriswaygcommented, Jun 19, 2021

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.