-
-
Notifications
You must be signed in to change notification settings - Fork 66
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
base: master
Are you sure you want to change the base?
Conversation
vonovak#260 Allow font scaling to be disabled for header button text.
There was a problem hiding this 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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
allowFontScaling?: boolean; |
There was a problem hiding this comment.
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
}}
/>
);
There was a problem hiding this comment.
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).
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
allowFontScaling, | |
allowFontScaling, |
@@ -92,7 +100,12 @@ export function defaultRenderVisibleButton( | |||
style={buttonStyle} | |||
/> | |||
) : ( | |||
<Text style={[styles.text, { color }, buttonStyle]}>{title}</Text> | |||
<Text | |||
allowFontScaling={allowFontScaling} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
allowFontScaling={allowFontScaling} | |
allowFontScaling={false} // to fix #260 |
#260
Allow font scaling to be disabled for header button text.