allowFontScaling not work in button text

[shubh17204]

Current behaviour

If a user adjusts the font size and display size on an Android device, and we utilize the React Native Paper <Button> component with a nested <Text> element, setting the fontSize and incorporating allowFontScaling, the text within the button consistently enlarges with each adjustment. Any recommendations to address this issue?

Expected behaviour

The expected outcome is that the font size inside the button should stay consistent with what we've specified in the text.

How to reproduce?

Preview

What have you tried so far?

Your Environment

software	version
ios	x
android	14
react-native	0.72.6
react-native-paper	5.10.6
node	18.16.0
npm or yarn	9.6.5
expo sdk	49.0.11

[lukewalczak]

Hey @shubh17204, could you please share some video presenting the problem? Could please also share the expo snack?

[shubh17204]

Pls check and reply with solution

On Fri, Nov 24, 2023 at 11:27 PM Shubh Garg @.***> wrote:

<Button mode="contained" buttonColor="#000" loading={loading} disabled={loading} onPress={handleSignUpClick}

<CustomText style={{ fontSize: 16, fontWeight: '600', color: '#fff', }}

Next </CustomText> </Button>

import React from 'react'; import { Text, TextProps } from 'react-native';

const CustomText = ( props: React.JSX.IntrinsicAttributes & React.JSX.IntrinsicClassAttributes<Text> & Readonly<TextProps> ) => { const defaultProps = { allowFontScaling: false, };

return <Text {...defaultProps} {...props} />; };

export default CustomText;

On Thu, Nov 23, 2023 at 6:41 PM Luke Walczak @.***> wrote:

Hey @shubh17204 https://github.com/shubh17204, could you please share some video presenting the problem? Could please also share the expo snack?

— Reply to this email directly, view it on GitHub https://github.com/callstack/react-native-paper/issues/4197#issuecomment-1824417124, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOQCCGE6CDHAN6DX7M2K46TYF5DR3AVCNFSM6AAAAAA7WSVTHWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRUGQYTOMJSGQ . You are receiving this because you were mentioned.Message ID: @.***>

[shubh17204]

<Button mode="contained" buttonColor="#000" loading={loading} disabled={loading} onPress={handleSignUpClick}

<CustomText style={{ fontSize: 16, fontWeight: '600', color: '#fff', }}

Next </CustomText> </Button>

import React from 'react'; import { Text, TextProps } from 'react-native';

const CustomText = ( props: React.JSX.IntrinsicAttributes & React.JSX.IntrinsicClassAttributes<Text> & Readonly<TextProps> ) => { const defaultProps = { allowFontScaling: false, };

return <Text {...defaultProps} {...props} />; };

export default CustomText;

On Fri, Nov 24, 2023 at 11:27 PM Shubh Garg @.***> wrote:

Pls check and reply with solution

On Fri, Nov 24, 2023 at 11:27 PM Shubh Garg @.***> wrote:

<Button mode="contained" buttonColor="#000" loading={loading} disabled={loading} onPress={handleSignUpClick}

<CustomText style={{ fontSize: 16, fontWeight: '600', color: '#fff', }}

Next </CustomText> </Button>

import React from 'react'; import { Text, TextProps } from 'react-native';

const CustomText = ( props: React.JSX.IntrinsicAttributes & React.JSX.IntrinsicClassAttributes<Text> & Readonly<TextProps> ) => { const defaultProps = { allowFontScaling: false, };

return <Text {...defaultProps} {...props} />; };

export default CustomText;

On Thu, Nov 23, 2023 at 6:41 PM Luke Walczak @.***> wrote:

Hey @shubh17204 https://github.com/shubh17204, could you please share some video presenting the problem? Could please also share the expo snack?

— Reply to this email directly, view it on GitHub https://github.com/callstack/react-native-paper/issues/4197#issuecomment-1824417124, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOQCCGE6CDHAN6DX7M2K46TYF5DR3AVCNFSM6AAAAAA7WSVTHWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRUGQYTOMJSGQ . You are receiving this because you were mentioned.Message ID: @.***>

[shubh17204]

https://github.com/callstack/react-native-paper/assets/60825880/5a8dd21b-01c3-40b5-8cb1-480323ae2d36

[lukewalczak]

Hey @shubh17204 it's correct behavior when button's text font increased along with increasing device font, however if you would like to adjust it by yourself, there is a prop maxFontSizeMultiplier which you can set to 1, so font won't change.

More: https://reactnative.dev/docs/text#maxfontsizemultiplier