Setting allowFontScaling prop on <Text>

[darrylyoung]

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. ✌️

[iamacup]

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?

[darrylyoung]

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

[iamacup]

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

[darrylyoung]

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. 👍

[AdamGerthel]

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.

[pehagg]

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.

[chriswayg]

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.

[hetmann]

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

[pokhiii]

Thank you @hetmann!

[jakequade]

For anyone coming here with issues regarding their font automatically getting smaller based on views/containers, you'll want to also use adjustsFontSizeToFit={false} on the Text components.

Example of markdown rule:

textgroup: (node, children, parent, styles) => (
                <Text
                    key={node.key}
                    allowFontScaling={false}
                    style={{
                        color: colors.dark_80,
                        fontFamily: 'Barlow-Light',
                        fontWeight: '400',
                    }}
                >
                    {children}
                </Text>
            ),