You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This function measures the text like RN does when the text does not have embedded images or text with different sizes. It take a subset of the properties used by [`<Text>`](https://facebook.github.io/react-native/docs/text) to describe the font to use.
73
+
This function measures the text as RN does and its result is consistent\* with that of `Text`'s onLayout event. It take a subset of the properties used by [`<Text>`](https://facebook.github.io/react-native/docs/text#props) to describe the font and other options to use.
74
74
75
-
If you provide the `width`, the measurement will apply the restriction and take into account the automatic line breaks, in addition to the explicit ones.
75
+
If you provide the `width`, the measurement will apply automatic wrapping in addition to the explicit line breaks.
76
+
77
+
\*_On iOS, RN takes into account the absolute position on the screen to calculate the dimensions. rnTextSize can't do that but adds 1 pixel to both width and height avoid overflow._
76
78
77
79
**NOTE:**
78
80
79
-
Although this function is accurate and provides complete information, it can be heavy if the text is a lot, like the one that can be displayed in a FlatList. For these cases, it is better to use `flatHeights` which is much faster.
81
+
Although this function is accurate and provides complete information, it can be heavy if the text is a lot, like the one that can be displayed in a FlatList. For these cases, it is better to use [`flatHeights`](#flatheights), which is optimized fotr those cases.
80
82
81
83
<aname="tsmeasureparams"></a>**TSMeasureParams**
82
84
83
-
JS object with the text to measure, the maximum width, and properties like ones in the react-native [`<Text>`](https://facebook.github.io/react-native/docs/text) component.
85
+
Plain JS object with this properties:
84
86
85
87
Property | Type | Default | Notes
86
88
---------- | ------ | -------- | ------
87
89
text | string | (none) | This is the only required parameter and may include _emojis_ or be empty, but it can not be `null`. If this is an empty string the resulting `width` will be zero.
88
90
width | number | Infinity | Restrict the width. The resulting height will vary depending on the automatic flow of the text.
89
-
usePreciseWidth | boolean | false | If `true`, request an exact `width` and the value of `lastWidth`. Used only in Android, iOS always returns both.<br>You can see the effect of this flag in the [sample App](https://github.com/aMarCruz/react-native-text-size/tree/master/example).
90
-
fontFamily | string | OS dependent | The default is the same applied by React Native: Roboto in Android, San Francisco in iOS.<br>Note: Device manufacturer or custom ROM can change this
91
+
usePreciseWidth | boolean | false | If `true`, request an exact `width` and the value of `lastLineWidth` (iOS always returns the exact width).<br>You can see the effect of this flag in the [sample App](https://github.com/aMarCruz/react-native-text-size/tree/master/example).
92
+
fontFamily | string | OS dependent | The default is the same applied by React Native: Roboto in Android, San Francisco in iOS.<br>**Note:** Device manufacturer or custom ROM can change the default font.
91
93
fontWeight | string | 'normal' | On android, numeric ranges has no granularity and '500' to '900' becomes 'bold', but you can use fonts of specific weights, like "sans-serif-medium".
92
-
fontSize | number | 14 | The default value is that used by RN and is provided in the `.FontSize.default` constant.
94
+
fontSize | number | 14 | The default value comes from RN.
93
95
fontStyle | string | 'normal' | One of "normal" or "italic".
94
96
fontVariant | array | (none) | _iOS only_
95
97
allowFontScaling | boolean | true | To respect the user' setting of large fonts (i.e. use SP units).
96
-
letterSpacing | number | (none) | Additional spacing between characters (a.k.a. `tracking`).<br>NOTE: In iOS a zero cancels automatic kerning.<br>_All iOS, Android with API 21+ and RN 0.55+_
98
+
letterSpacing | number | (none) | Additional spacing between characters (a.k.a. `tracking`).<br>**Note:** In iOS a zero cancels automatic kerning.<br>_All iOS, Android with API 21+ and RN 0.55+_
97
99
includeFontPadding | boolean | true | Include additional top and bottom padding, to avoid clipping certain characters.<br>_Android only_
98
100
textBreakStrategy | string | 'highQuality' | One of 'simple', 'balanced', or 'highQuality'.<br>_Android only, with API 23+_
99
101
@@ -105,7 +107,7 @@ The [sample App](https://github.com/aMarCruz/react-native-text-size/tree/master/
105
107
106
108
Property | Type | Notes
107
109
--------- | ------ | ------
108
-
width | number | Total used width. It may be less or equal to the given width and, in Andoid, its value may vary depending on the `usePreciseWidth` flag.
110
+
width | number | Total used width. It may be less or equal to the given width. On Android this value may vary depending on the `usePreciseWidth` flag.
109
111
height | number | Total height, including top and bottom padding if `includingFontPadding` was set (the default).
110
112
lastLineWidth | number | Width of the last line, without trailing blanks.<br>__Note:__ If `usePreciseWidth` is `false` (the default), this field is undefined.
111
113
lineCount | number | Number of lines, taking into account hard and automatic line breaks.
@@ -191,7 +193,6 @@ I did tests on 5,000 random text blocks and these were the results (ms):
191
193
Android | 49,624 | 1,091
192
194
iOS | 1,949 | 732
193
195
194
-
195
196
In the future I will prepare an example of its use with FlatList and multiple styles on the same card.
196
197
197
198
**TSHeightsParams**
@@ -204,7 +205,7 @@ This is an object similar to the one received by `measure`, but the `text` prope
The result is a Promise that resolves to an array with the height of each block (_SP_), in the same order in which they were received.
220
221
222
+
Unlike measure, `null` elements returns 0 without generating error, and empty strings returns the same height that RN assigns to empty `<Text>` components.
223
+
221
224
---
222
225
223
226
## `specsForTextStyles`
@@ -294,7 +297,7 @@ leading | number | The recommended additional space to add between lines of
294
297
lineHeight | number | The recommended line height (remember, _SP_ in Android). It should be greater if text contain Unicode symbols, such as emojis.
295
298
_hash | number | Hash code, maybe useful for debugging.
296
299
297
-
> \*Using floats is more accurate than integers and allows you to use your preferred rounding method, but consider no more than 5 digits of precision in this values. Also, remember RN doesn't work with subpixels in Android and will truncate this values.
300
+
\*_Using floats is more accurate than integers and allows you to use your preferred rounding method, but consider no more than 5 digits of precision in this values. Also, remember RN doesn't work with subpixels in Android and will truncate this values._
0 commit comments