Skip to content

Commit 7991b17

Browse files
rumit91berickson1
authored andcommitted
Exposing the maxContentSizeMultiplier prop for RN.Text and RN.TextInput. (#78)
* Exposed the maximumFontScale prop and updating docs
1 parent 1333bd5 commit 7991b17

File tree

12 files changed

+93
-4
lines changed

12 files changed

+93
-4
lines changed

docs/docs/apis/userinterface.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,17 @@ measureWindow(): Types.Dimensions;
4747
// can be adjusted by users on some platforms; defaults to 1.0
4848
getContentSizeMultiplier(): SyncTasks.Promise<number>;
4949

50+
// Indicates the default maximum "size multiplier" for text increase.
51+
// Defaults to 0 which indicates there is no max.
52+
// Note: Older versions of React Native don’t support this interface.
53+
getMaxContentSizeMultiplier(): SyncTasks.Promise<number>;
54+
55+
// Sets the default maximum "size multiplier" for text increase.
56+
// Values must be 0 or >=1. The default is 0 which indicates that
57+
// there is no max.
58+
// Note: Older versions of React Native don’t support this interface.
59+
setMaxContentSizeMultiplier(maxContentSizeMultiplier: number): void;
60+
5061
// Dismisses the on-screen keyboard (applies to mobile only)
5162
dismissKeyboard(): void;
5263
```

docs/docs/components/link.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,17 @@ This component displays a hyperlink. On the web, it translates to an &lt;a&gt; t
1111

1212
## Props
1313
``` javascript
14+
// Should fonts be scaled according to system setting?
15+
allowFontScaling: boolean = true; // Android and iOS only
16+
17+
// Should the scale multiplier be capped when allowFontScaling is set to true?
18+
// Possible values include the following:
19+
// null/undefined (default) - inheret from parent/global default
20+
// 0 - no max
21+
// >= 1 - sets the maxContentSizeMultiplier of this node to this value
22+
// Note: Older versions of React Native don’t support this interface.
23+
maxContentSizeMultiplier: number = null; // Android and iOS only
24+
1425
// For non-zero values, truncates with ellipsis if necessary
1526
numberOfLines: number = 0;
1627

docs/docs/components/text.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Another difference between Text and other components is that Text children are n
1818
``` javascript
1919
// Alternate text to display if the image cannot be loaded
2020
// or by screen readers
21-
accessibilityHidden: boolean = false;
21+
accessibilityLabel: string = undefined;
2222

2323
// Hide the component from screen readers?
2424
accessibilityHidden: boolean = false;
@@ -29,12 +29,17 @@ accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
2929
// Region for accessibility mechanisms
3030
accessibilityLiveRegion?: AccessibilityLiveRegion = undefined; // Android and web only
3131

32-
// Keyboard tab order
33-
tabIndex: number = undefined;
34-
3532
// Should fonts be scaled according to system setting?
3633
allowFontScaling: boolean = true; // Android and iOS only
3734

35+
// Should the scale multiplier be capped when allowFontScaling is set to true?
36+
// Possible values include the following:
37+
// null/undefined (default) - inheret from parent/global default
38+
// 0 - no max
39+
// >= 1 - sets the maxContentSizeMultiplier of this node to this value
40+
// Note: Older versions of React Native don’t support this interface.
41+
maxContentSizeMultiplier: number = null; // Android and iOS only
42+
3843
// For non-zero values, truncates with ellipsis if necessary
3944
numberOfLines: number = 0;
4045

@@ -43,6 +48,9 @@ selectable: boolean = false;
4348

4449
// See below for supported styles
4550
style: TextStyleRuleSet | TextStyleRuleSet[] = [];
51+
52+
// Keyboard tab order
53+
tabIndex: number = undefined;
4654
```
4755

4856
## Styles

docs/docs/components/textinput.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ keyboardAppearance: 'default' | 'light' | 'dark';
4343
// On-screen keyboard type to display
4444
keyboardType: 'default' | 'numeric' | 'email-address' | 'number-pad';
4545

46+
// Should the scale multiplier be capped when allowFontScaling is set to true?
47+
// Possible values include the following:
48+
// null/undefined (default) - inheret from parent/global default
49+
// 0 - no max
50+
// >= 1 - sets the maxContentSizeMultiplier of this node to this value
51+
// Note: Older versions of React Native don’t support this interface.
52+
maxContentSizeMultiplier: number = null; // Android and iOS only
53+
4654
// Maximum character count
4755
maxLength: number = undefined;
4856

src/android/Text.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export class Text extends CommonText {
4040
importantForAccessibility={ importantForAccessibility }
4141
numberOfLines={ this.props.numberOfLines === 0 ? null : this.props.numberOfLines }
4242
allowFontScaling={ this.props.allowFontScaling }
43+
maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
4344
ellipsizeMode={ this.props.ellipsizeMode }
4445
onPress={ this.props.onPress }
4546
textBreakStrategy={ this.props.textBreakStrategy }

src/common/Types.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -487,6 +487,9 @@ export interface TextPropsShared extends CommonProps {
487487
// to true. iOS and Android only.
488488
allowFontScaling?: boolean;
489489

490+
// Specifies the maximum scale factor for text size. iOS and Android only.
491+
maxContentSizeMultiplier?: number;
492+
490493
// iOS and Android only
491494
ellipsizeMode?: 'head' | 'middle'| 'tail';
492495

@@ -741,6 +744,8 @@ export interface LinkProps extends CommonStyledProps<LinkStyleRuleSet> {
741744
children?: ReactNode;
742745
selectable?: boolean;
743746
numberOfLines?: number;
747+
allowFontScaling?: boolean;
748+
maxContentSizeMultiplier?: number;
744749

745750
onPress?: (e: RX.Types.SyntheticEvent, url: string) => void;
746751
onLongPress?: (e: RX.Types.SyntheticEvent, url: string) => void;
@@ -769,6 +774,9 @@ export interface TextInputPropsShared extends CommonProps, CommonAccessibilityPr
769774
// to true. iOS and Android only.
770775
allowFontScaling?: boolean;
771776

777+
// Specifies the maximum scale factor for text size. iOS and Android only.
778+
maxContentSizeMultiplier?: number;
779+
772780
// iOS-only prop for controlling the keyboard appearance
773781
keyboardAppearance?: 'default' | 'light' | 'dark';
774782

src/native-common/Link.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export class Link extends RX.Link<{}> {
2727
numberOfLines={ this.props.numberOfLines === 0 ? null : this.props.numberOfLines }
2828
onPress={ this._onPress }
2929
onLongPress={ this._onLongPress }
30+
allowFontScaling={ this.props.allowFontScaling }
31+
maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
3032
>
3133
{ this.props.children }
3234
</RN.Text>

src/native-common/Text.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export class Text extends RX.Text<{}> {
3636
importantForAccessibility={ importantForAccessibility }
3737
numberOfLines={ this.props.numberOfLines }
3838
allowFontScaling={ this.props.allowFontScaling }
39+
maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
3940
onPress={ this.props.onPress }
4041
selectable={ this.props.selectable }
4142
textBreakStrategy={ 'simple' }

src/native-common/TextInput.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
8686
textBreakStrategy={ 'simple' }
8787
accessibilityLabel={ this.props.accessibilityLabel }
8888
allowFontScaling={ this.props.allowFontScaling }
89+
maxContentSizeMultiplier={ this.props.maxContentSizeMultiplier }
8990
underlineColorAndroid='transparent'
9091
/>
9192
);

src/native-common/UserInterface.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,28 @@ export class UserInterface extends RX.UserInterface {
9696
return deferred.promise();
9797
}
9898

99+
getMaxContentSizeMultiplier(): SyncTasks.Promise<number> {
100+
let deferred = SyncTasks.Defer<number>();
101+
102+
// TODO: #727532 Remove conditional after implementing UIManager.getContentSizeMultiplier for UWP
103+
if (RN.Platform.OS === 'windows') {
104+
deferred.resolve(1);
105+
} else {
106+
RN.NativeModules.UIManager.getMaxContentSizeMultiplier((value: number) => {
107+
deferred.resolve(value);
108+
});
109+
}
110+
111+
return deferred.promise();
112+
}
113+
114+
setMaxContentSizeMultiplier(maxContentSizeMultiplier: number): void {
115+
// TODO: #727532 Remove conditional after implementing UIManager.getContentSizeMultiplier for UWP
116+
if (RN.Platform.OS !== 'windows') {
117+
RN.NativeModules.UIManager.setMaxContentSizeMultiplier(maxContentSizeMultiplier);
118+
}
119+
}
120+
99121
useCustomScrollbars(enable = true) {
100122
// Nothing to do
101123
}

0 commit comments

Comments
 (0)