mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 03:26:07 +00:00
01d5eff425
Summary: **Motivation** Whenever a user changes the system font size to its maximum allowable setting, React Native apps that allow font scaling can become unusable because the text gets too big. Experimenting with a native app like iMessage on iOS, the font size used for non-body text (e.g. header, navigational elements) is capped while the body text (e.g. text in the message bubbles) is allowed to grow. This PR introduces a new prop on `<Text>` and `<TextInput>` called `maxFontSizeMultiplier`. This enables devs to set the maximum allowed text scale factor on a Text/TextInput. The default is 0 which means no limit. Another PR will add this feature to Android. **Test Plan** I created a test app which utilizes all categories of values of `maxFontSizeMultiplier`: - `undefined`: inherit from parent - `0`: no limit - `1`, `1.2`: fixed limits I tried this with `Text`, `TextInput` with `value`, and `TextInput` with children. For `Text`, I also verified that nesting works properly (if a child `Text` doesn't specify `maxFontSizeMultiplier`, it inherits it from its parent). Lastly, we've been using a version of this in Skype for several months. **Release Notes** [GENERAL] [ENHANCEMENT] [Text/TextInput] - Added maxFontSizeMultiplier prop to prevent some text from getting unusably large as user increases OS's font scale setting (iOS) Adam Comella Microsoft Corp. Pull Request resolved: https://github.com/facebook/react-native/pull/20915 Differential Revision: D9646739 Pulled By: shergin fbshipit-source-id: c823f59c1e342c22d6297b88b2cb11c5a1f10310
136 lines
4.1 KiB
JavaScript
136 lines
4.1 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const ColorPropType = require('ColorPropType');
|
|
const EdgeInsetsPropType = require('EdgeInsetsPropType');
|
|
const PropTypes = require('prop-types');
|
|
const StyleSheetPropType = require('StyleSheetPropType');
|
|
const TextStylePropTypes = require('TextStylePropTypes');
|
|
|
|
const stylePropType = StyleSheetPropType(TextStylePropTypes);
|
|
|
|
module.exports = {
|
|
/**
|
|
* When `numberOfLines` is set, this prop defines how text will be
|
|
* truncated.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#ellipsizemode
|
|
*/
|
|
ellipsizeMode: PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
|
|
/**
|
|
* Used to truncate the text with an ellipsis.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#numberoflines
|
|
*/
|
|
numberOfLines: PropTypes.number,
|
|
/**
|
|
* Set text break strategy on Android.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#textbreakstrategy
|
|
*/
|
|
textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
|
|
/**
|
|
* Invoked on mount and layout changes.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#onlayout
|
|
*/
|
|
onLayout: PropTypes.func,
|
|
/**
|
|
* This function is called on press.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#onpress
|
|
*/
|
|
onPress: PropTypes.func,
|
|
/**
|
|
* This function is called on long press.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#onlongpress
|
|
*/
|
|
onLongPress: PropTypes.func,
|
|
/**
|
|
* Defines how far your touch may move off of the button, before
|
|
* deactivating the button.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#pressretentionoffset
|
|
*/
|
|
pressRetentionOffset: EdgeInsetsPropType,
|
|
/**
|
|
* Lets the user select text.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#selectable
|
|
*/
|
|
selectable: PropTypes.bool,
|
|
/**
|
|
* The highlight color of the text.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#selectioncolor
|
|
*/
|
|
selectionColor: ColorPropType,
|
|
/**
|
|
* When `true`, no visual change is made when text is pressed down.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#supperhighlighting
|
|
*/
|
|
suppressHighlighting: PropTypes.bool,
|
|
style: stylePropType,
|
|
/**
|
|
* Used to locate this view in end-to-end tests.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#testid
|
|
*/
|
|
testID: PropTypes.string,
|
|
/**
|
|
* Used to locate this view from native code.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#nativeid
|
|
*/
|
|
nativeID: PropTypes.string,
|
|
/**
|
|
* Whether fonts should scale to respect Text Size accessibility settings.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#allowfontscaling
|
|
*/
|
|
allowFontScaling: PropTypes.bool,
|
|
/**
|
|
* 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: PropTypes.number,
|
|
/**
|
|
* Indicates whether the view is an accessibility element.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#accessible
|
|
*/
|
|
accessible: PropTypes.bool,
|
|
/**
|
|
* Whether font should be scaled down automatically.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#adjustsfontsizetofit
|
|
*/
|
|
adjustsFontSizeToFit: PropTypes.bool,
|
|
/**
|
|
* Smallest possible scale a font can reach.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#minimumfontscale
|
|
*/
|
|
minimumFontScale: PropTypes.number,
|
|
/**
|
|
* Specifies the disabled state of the text view for testing purposes.
|
|
*
|
|
* See https://facebook.github.io/react-native/docs/text.html#disabled
|
|
*/
|
|
disabled: PropTypes.bool,
|
|
};
|