Add support for React Native's maxFontSizeMultiplier Text prop

docs/docs/components/link.md

@@ -24,6 +24,12 @@ allowFontScaling: boolean = true; // Android and iOS only
 // property.
 autoFocus: boolean = false;
 
+// Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
+//  - null / undefined (default): inherit from the parent node or the global default (0)
+//  - 0: no max, ignore parent / global default
+//  - >= 1: sets the maxFontSizeMultiplier of this node to this value
+maxFontSizeMultiplier: number = undefined; // iOS and Android only.
+
 // For non-zero values, truncates with ellipsis if necessary
 numberOfLines: number = 0;
 

docs/docs/components/text.md

@@ -54,6 +54,12 @@ accessibilityId: string = undefined;
 // callback.
 autoFocus: boolean = false;
 
+// Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
+//  - null / undefined (default): inherit from the parent node or the global default (0)
+//  - 0: no max, ignore parent / global default
+//  - >= 1: sets the maxFontSizeMultiplier of this node to this value
+maxFontSizeMultiplier: number = undefined; // iOS and Android only.
+
 // For non-zero values, truncates with ellipsis if necessary. Web platform
 // doesn't support values greater than 1. Web platform may also not truncate
 // properly if text contains line breaks, so it may be necessary to replace

docs/docs/components/textinput.md

@@ -65,6 +65,12 @@ keyboardAppearance: 'default' | 'light' | 'dark';
 // On-screen keyboard type to display
 keyboardType: 'default' | 'numeric' | 'email-address' | 'number-pad';
 
+// Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
+//  - null / undefined (default): inherit from the parent node or the global default (0)
+//  - 0: no max, ignore parent / global default
+//  - >= 1: sets the maxFontSizeMultiplier of this node to this value
+maxFontSizeMultiplier: number = undefined; // iOS and Android only.
+
 // Maximum character count
 maxLength: number = undefined;
 

src/android/Text.tsx

@@ -40,6 +40,7 @@ export class Text extends CommonText {
                 importantForAccessibility={ importantForAccessibility }
                 numberOfLines={ this.props.numberOfLines === 0 ? undefined : this.props.numberOfLines }
                 allowFontScaling={ this.props.allowFontScaling }
+                maxFontSizeMultiplier={ this.props.maxFontSizeMultiplier }
                 ellipsizeMode={ this.props.ellipsizeMode }
                 onPress={ this.props.onPress }
                 textBreakStrategy={ this.props.textBreakStrategy }

src/common/Types.ts

@@ -572,6 +572,13 @@ export interface TextPropsShared<C = React.Component> extends CommonProps<C> {
     // to true. iOS and Android only.
     allowFontScaling?: boolean;
 
+    // Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
+    //  - null / undefined (default): inherit from the parent node or the global default (0)
+    //  - 0: no max, ignore parent / global default
+    //  - >= 1: sets the maxFontSizeMultiplier of this node to this value
+    // iOS and Android only.
+    maxFontSizeMultiplier?: number | null;
+
     // iOS and Android only
     ellipsizeMode?:  'head' | 'middle' | 'tail';
 
@@ -882,6 +889,7 @@ export interface LinkProps extends CommonStyledProps<LinkStyleRuleSet, RX.Link>
     selectable?: boolean;
     numberOfLines?: number;
     allowFontScaling?: boolean;
+    maxFontSizeMultiplier?: number | null;
     tabIndex?: number;
     accessibilityId?: string;
     autoFocus?: boolean; // The component is a candidate for being autofocused.
@@ -914,6 +922,13 @@ export interface TextInputPropsShared<C = React.Component> extends CommonProps<C
     // to true. iOS and Android only.
     allowFontScaling?: boolean;
 
+    // Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
+    //  - null / undefined (default): inherit from the parent node or the global default (0)
+    //  - 0: no max, ignore parent / global default
+    //  - >= 1: sets the maxFontSizeMultiplier of this node to this value
+    // iOS and Android only.
+    maxFontSizeMultiplier?: number | null;
+
     // iOS-only prop for controlling the keyboard appearance
     keyboardAppearance?: 'default' | 'light' | 'dark';
 

src/native-common/Link.tsx

@@ -48,6 +48,7 @@ export class LinkBase<S> extends React.Component<RX.Types.LinkProps, S> {
             onPress: this._onPress,
             onLongPress: this._onLongPress,
             allowFontScaling: this.props.allowFontScaling,
+            maxFontSizeMultiplier: this.props.maxFontSizeMultiplier,
             children: this.props.children,
             tooltip: this.props.title,
             testID: this.props.testId,

src/native-common/Text.tsx

@@ -65,6 +65,7 @@ export class Text extends React.Component<Types.TextProps, Types.Stateless> impl
                 importantForAccessibility={ importantForAccessibility }
                 numberOfLines={ this.props.numberOfLines }
                 allowFontScaling={ this.props.allowFontScaling }
+                maxFontSizeMultiplier={ this.props.maxFontSizeMultiplier }
                 onPress={ onPress }
                 selectable={ this.props.selectable }
                 textBreakStrategy={ 'simple' }

src/native-common/TextInput.tsx

@@ -116,6 +116,7 @@ export class TextInput extends React.Component<Types.TextInputProps, TextInputSt
             textBreakStrategy: 'simple',
             accessibilityLabel: this.props.accessibilityLabel,
             allowFontScaling: this.props.allowFontScaling,
+            maxFontSizeMultiplier: this.props.maxFontSizeMultiplier,
             underlineColorAndroid: 'transparent',
             clearButtonMode: this.props.clearButtonMode,
             testID: this.props.testId,