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.

Sign up for GitHub

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
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
deed0fd
fix: fixes an issue with font scaling on iOS
wongk Jul 14, 2025
a0c1677
fix: fix a typescript issue with newer versions of react native
wongk Jul 15, 2025
362b141
fix: take two
wongk Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/HeaderButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 •
edited
Loading

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.

};

type PlatformPressableProps = ComponentProps<typeof PlatformPressable>;
Expand Down Expand Up @@ -81,8 +82,15 @@ export function HeaderButton(props: HeaderButtonProps) {
export function defaultRenderVisibleButton(
visibleButtonProps: VisibleButtonProps
): React.ReactElement {
const { IconComponent, iconSize, color, iconName, title, buttonStyle } =
visibleButtonProps;
const {
IconComponent,
iconSize,
color,
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,

} = visibleButtonProps;

return IconComponent && iconName ? (
<IconComponent
Expand All @@ -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

style={[styles.text, { color }, buttonStyle]}
>
{title}
</Text>
);
}

Expand Down
4 changes: 3 additions & 1 deletion src/overflowMenu/vendor/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ export type Props = {
/**
* Function to execute on press.
*/
onPress?: null | ((params?: GestureResponderEvent) => void) | undefined;
onPress?: (
e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
) => void;
/**
* @optional
*/
Expand Down