Skip to content

fix: fixes an issue with font scaling on iOS #261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

wongk
Copy link

@wongk wongk commented Jul 14, 2025

#260

Allow font scaling to be disabled for header button text.

vonovak#260

Allow font scaling to be disabled for header button text.
Copy link
Owner

@vonovak vonovak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

I'd like to ask you for a few small changes, thank you!

@@ -32,6 +32,7 @@ export type VisibleButtonProps = {
iconSize?: number;
color?: ColorValue;
buttonStyle?: ViewStyle | TextStyle;
allowFontScaling?: boolean;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
allowFontScaling?: boolean;

Copy link
Owner

@vonovak vonovak Jul 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these are props for defaultRenderVisibleButton - I want them to stay relatively minimal. allowFontScaling prop doesn't feel like it really belongs in here.

People don't need to rely on defaultRenderVisibleButton - they can provide their own like this (taking the example from readme) - so they are not limited by this lib:

const MaterialHeaderButton = (props: HeaderButtonProps) => (
  // the `props` here come from <Item ... />
  // you may access them and pass something else to `HeaderButton` if you like
  <HeaderButton IconComponent={MaterialIcons} iconSize={23} {...props}
                renderButton={(itemProps) => {
                  // return whatever you want
                }}
  />
);

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in our case, we're using this property like so: <Item {...props} allowFontScaling={Platform.OS !== "ios"} />, because the font scaling actually looks decent on Android but not iOS. we don't want to provide our own renderButton, because that would defeat the purpose of using this library (for us).

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the comment @wongk. This is the default implementation of renderButton:

export function defaultRenderVisibleButton(
  visibleButtonProps: VisibleButtonProps
): React.ReactElement {
  const { IconComponent, iconSize, color, iconName, title, buttonStyle } =
    visibleButtonProps;

  return IconComponent && iconName ? (
    <IconComponent
      name={iconName}
      color={color}
      size={iconSize}
      style={buttonStyle}
    />
  ) : (
    <Text style={[styles.text, { color }, buttonStyle]}>{title}</Text>
  );
}

So, it's rather simple. What I'm trying to say is that rather than providing a dozen props to customize this, it's preferable users copy-paste this into their project and customize to their liking - if needed. Ideally this wouldn't be needed but the lib isn't preventing users from doing that.

Let's please change the default impl to use allowFontScaling={Platform.OS !== "ios"} - that fixes the default impl for everyone and if they're not happy with it, they'll provide their own renderButton.

iconName,
title,
buttonStyle,
allowFontScaling,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
allowFontScaling,
allowFontScaling,

@@ -92,7 +100,12 @@ export function defaultRenderVisibleButton(
style={buttonStyle}
/>
) : (
<Text style={[styles.text, { color }, buttonStyle]}>{title}</Text>
<Text
allowFontScaling={allowFontScaling}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
allowFontScaling={allowFontScaling}
allowFontScaling={false} // to fix #260

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants