Exposing the maxContentSizeMultiplier prop for RN.Text and RN.TextInp…

…ut. (#78)

* Exposed the maximumFontScale prop and updating docs

docs/docs/apis/userinterface.md

@@ -47,6 +47,17 @@ measureWindow(): Types.Dimensions;
 // can be adjusted by users on some platforms; defaults to 1.0
 getContentSizeMultiplier(): SyncTasks.Promise<number>;
 
+// Indicates the default maximum "size multiplier" for text increase. 
+// Defaults to 0 which indicates there is no max.
+// Note: Older versions of React Native don’t support this interface. 
+getMaxContentSizeMultiplier(): SyncTasks.Promise<number>;
+
+// Sets the default maximum "size multiplier" for text increase. 
+// Values must be 0 or >=1. The default is 0 which indicates that
+// there is no max.
+// Note: Older versions of React Native don’t support this interface. 
+setMaxContentSizeMultiplier(maxContentSizeMultiplier: number): void;
+
 // Dismisses the on-screen keyboard (applies to mobile only)
 dismissKeyboard(): void;
 ```

docs/docs/components/link.md

@@ -11,6 +11,17 @@ This component displays a hyperlink. On the web, it translates to an <a> t
 
 ## Props
 ``` javascript
+// Should fonts be scaled according to system setting?
+allowFontScaling: boolean = true; // Android and iOS only
+
+// Should the scale multiplier be capped when allowFontScaling is set to true?
+// Possible values include the following:
+// null/undefined (default) - inheret from parent/global default
+// 0 - no max
+// >= 1 - sets the maxContentSizeMultiplier of this node to this value
+// Note: Older versions of React Native don’t support this interface. 
+maxContentSizeMultiplier: number = null; // Android and iOS only
+
 // For non-zero values, truncates with ellipsis if necessary
 numberOfLines: number = 0;
 

docs/docs/components/text.md

@@ -18,7 +18,7 @@ Another difference between Text and other components is that Text children are n
 ``` javascript
 // Alternate text to display if the image cannot be loaded
 // or by screen readers
-accessibilityHidden: boolean = false;
+accessibilityLabel: string = undefined;
 
 // Hide the component from screen readers?
 accessibilityHidden: boolean = false;
@@ -29,12 +29,17 @@ accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
 // Region for accessibility mechanisms
 accessibilityLiveRegion?: AccessibilityLiveRegion = undefined; // Android and web only
 
-// Keyboard tab order
-tabIndex: number = undefined;
-
 // Should fonts be scaled according to system setting?
 allowFontScaling: boolean = true; // Android and iOS only
 
+// Should the scale multiplier be capped when allowFontScaling is set to true?
+// Possible values include the following:
+// null/undefined (default) - inheret from parent/global default
+// 0 - no max
+// >= 1 - sets the maxContentSizeMultiplier of this node to this value
+// Note: Older versions of React Native don’t support this interface. 
+maxContentSizeMultiplier: number = null; // Android and iOS only
+
 // For non-zero values, truncates with ellipsis if necessary
 numberOfLines: number = 0;
 
@@ -43,6 +48,9 @@ selectable: boolean = false;
 
 // See below for supported styles
 style: TextStyleRuleSet | TextStyleRuleSet[] = [];
+
+// Keyboard tab order
+tabIndex: number = undefined;
 ```
 
 ## Styles

docs/docs/components/textinput.md

@@ -43,6 +43,14 @@ keyboardAppearance: 'default' | 'light' | 'dark';
 // On-screen keyboard type to display
 keyboardType: 'default' | 'numeric' | 'email-address' | 'number-pad';
 
+// Should the scale multiplier be capped when allowFontScaling is set to true?
+// Possible values include the following:
+// null/undefined (default) - inheret from parent/global default
+// 0 - no max
+// >= 1 - sets the maxContentSizeMultiplier of this node to this value
+// Note: Older versions of React Native don’t support this interface. 
+maxContentSizeMultiplier: number = null; // Android and iOS 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 ? null : this.props.numberOfLines }
                 allowFontScaling={ this.props.allowFontScaling }
+                maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
                 ellipsizeMode={ this.props.ellipsizeMode }
                 onPress={ this.props.onPress }
                 textBreakStrategy={ this.props.textBreakStrategy }

src/common/Types.ts

@@ -487,6 +487,9 @@ export interface TextPropsShared extends CommonProps {
     // to true. iOS and Android only.
     allowFontScaling?: boolean;
 
+    // Specifies the maximum scale factor for text size. iOS and Android only.
+    maxContentSizeMultiplier?: number;
+
     // iOS and Android only
     ellipsizeMode?:  'head' | 'middle'| 'tail';
 
@@ -741,6 +744,8 @@ export interface LinkProps extends CommonStyledProps<LinkStyleRuleSet> {
     children?: ReactNode;
     selectable?: boolean;
     numberOfLines?: number;
+    allowFontScaling?: boolean;
+    maxContentSizeMultiplier?: number;
 
     onPress?: (e: RX.Types.SyntheticEvent, url: string) => void;
     onLongPress?: (e: RX.Types.SyntheticEvent, url: string) => void;
@@ -769,6 +774,9 @@ export interface TextInputPropsShared extends CommonProps, CommonAccessibilityPr
     // to true. iOS and Android only.
     allowFontScaling?: boolean;
 
+    // Specifies the maximum scale factor for text size. iOS and Android only.
+    maxContentSizeMultiplier?: number;
+
     // iOS-only prop for controlling the keyboard appearance
     keyboardAppearance?: 'default' | 'light' | 'dark';
 

src/native-common/Link.tsx

@@ -27,6 +27,8 @@ export class Link extends RX.Link<{}> {
                 numberOfLines={ this.props.numberOfLines === 0 ? null : this.props.numberOfLines }
                 onPress={ this._onPress }
                 onLongPress={ this._onLongPress }
+                allowFontScaling={ this.props.allowFontScaling }
+                maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
             >
                 { this.props.children }
             </RN.Text>

src/native-common/Text.tsx

@@ -36,6 +36,7 @@ export class Text extends RX.Text<{}> {
                 importantForAccessibility={ importantForAccessibility }
                 numberOfLines={ this.props.numberOfLines }
                 allowFontScaling={ this.props.allowFontScaling }
+                maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
                 onPress={ this.props.onPress }
                 selectable={ this.props.selectable }
                 textBreakStrategy={ 'simple' }

src/native-common/TextInput.tsx

@@ -86,6 +86,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
                 textBreakStrategy={ 'simple' }
                 accessibilityLabel={ this.props.accessibilityLabel }
                 allowFontScaling={ this.props.allowFontScaling }
+                maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
                 underlineColorAndroid='transparent'
             />
         );

src/native-common/UserInterface.ts

@@ -96,6 +96,28 @@ export class UserInterface extends RX.UserInterface {
         return deferred.promise();
     }
 
+    getMaxContentSizeMultiplier(): SyncTasks.Promise<number> {
+        let deferred = SyncTasks.Defer<number>();
+
+        // TODO: #727532 Remove conditional after implementing UIManager.getContentSizeMultiplier for UWP
+        if (RN.Platform.OS === 'windows') {
+            deferred.resolve(1);
+        } else {
+            RN.NativeModules.UIManager.getMaxContentSizeMultiplier((value: number) => {
+                deferred.resolve(value);
+            });
+        }
+
+        return deferred.promise();
+    }
+
+    setMaxContentSizeMultiplier(maxContentSizeMultiplier: number): void {
+        // TODO: #727532 Remove conditional after implementing UIManager.getContentSizeMultiplier for UWP
+        if (RN.Platform.OS !== 'windows') {
+            RN.NativeModules.UIManager.setMaxContentSizeMultiplier(maxContentSizeMultiplier);
+        }
+    }
+
     useCustomScrollbars(enable = true) {
         // Nothing to do
     }

src/typings/react-native.d.ts

@@ -115,6 +115,7 @@ declare module 'react-native' {
     interface TextProps extends ComponentPropsStyleBase {
         importantForAccessibility?: string; // 'auto' | 'yes' | 'no' | 'no-hide-descendants';
         allowFontScaling?: boolean;
+        maxContentSizeMultiplier?: number;
         children?        : React.ReactNode;
         numberOfLines?   : number;
         ellipsizeMode?   : 'head' | 'middle' | 'tail' // There's also 'clip' but it is iOS only
@@ -343,6 +344,7 @@ declare module 'react-native' {
         testID?: string;
         textAlign?: string; // enum('auto' | 'left' | 'right' | 'center' | 'justify')
         allowFontScaling?: boolean;
+        maxContentSizeMultiplier?: number;
         selection?: { start: number, end: number };
 
         //iOS and android
@@ -816,6 +818,8 @@ declare module 'react-native' {
         dispatchViewManagerCommand: Function;
 
         getContentSizeMultiplier: Function;
+        getMaxContentSizeMultiplier: Function;
+        setMaxContentSizeMultiplier: Function;
 
         // ios
         takeSnapshot: (view: any, options?: SnapshotOptions) => Promise<string>;

src/web/UserInterface.ts

@@ -83,6 +83,18 @@ export class UserInterface extends RX.UserInterface {
         return SyncTasks.Resolved(1);
     }
 
+    getMaxContentSizeMultiplier(): SyncTasks.Promise<number> {
+        // Browsers don't support font-specific scaling. They scale all of their
+        // UI elements the same.
+        return SyncTasks.Resolved(0);
+    }
+
+    setMaxContentSizeMultiplier(maxContentSizeMultiplier: number) {
+        // Browsers don't support font-specific scaling. They scale all of their
+        // UI elements the same.
+        // No-op.
+    }
+
     isHighPixelDensityScreen(): boolean {
         return this.getPixelRatio() > 1;
     }