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
Copy file name to clipboardExpand all lines: CHANGELOG.md
+5Lines changed: 5 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,11 @@
2
2
3
3
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
Copy file name to clipboardExpand all lines: README.md
+38-17Lines changed: 38 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ Both, width and height, are practically the same as those received in the `onLay
31
31
32
32
In addition, the library includes functions to obtain information about the fonts visible to the App.
33
33
34
-
rnTextSize is WIP, but if it has helped you, please support my work with a star or [buy me a coffee](https://www.buymeacoffee.com/aMarCruz).
34
+
rnTextSize is WIP, but if it has helped you, please support my work with a star :star2:or [buy me a coffee](https://www.buymeacoffee.com/aMarCruz).
35
35
36
36
---
37
37
**IMPORTANT:**
@@ -45,7 +45,7 @@ rnTextSize is WIP, but if it has helped you, please support my work with a star
45
45
- React Native v0.52.0 or later
46
46
- Targets Androind API 16 and iOS 9.0
47
47
48
-
The [sample App](https://github.com/aMarCruz/react-native-text-size/tree/master/example) uses RN v0.52.0, which is the minimum version supported by rnTextSize, but you can change it (See your README before testing it).
48
+
The [sample App](https://github.com/aMarCruz/rn-text-size-sample-app) uses RN v0.52.0, which is the minimum version supported by rnTextSize, but you can change it (See your README before testing it).
49
49
50
50
To take advantage of features such as `letterSpacing`, and better support for the most modern devices, use RN v0.55 or above.
If you are using Gradle plugin 3 or later, don't forget to change the `compile` directive to `implementation` in the dependencies block of the android/app/build.gradle file.
61
+
If you are using Gradle 4 or later, don't forget to change the `compile` directive to `implementation` in the dependencies block of the android/app/build.gradle file.
62
62
63
63
See [Manual Installation](https://github.com/aMarCruz/react-native-text-size/wiki/Manual-Installation) on the Wiki as an alternative if you have problems with automatic installation.
@@ -74,7 +86,7 @@ This function measures the text as RN does and its result is consistent\* with t
74
86
75
87
If you provide the `width`, the measurement will apply automatic wrapping in addition to the explicit line breaks.
76
88
77
-
\*_On iOS, RN takes into account the absolute position on the screen to calculate the dimensions. rnTextSize can't do that and both width and height can have a difference of uo to 1 pixel (not point)._
89
+
\*_There may be some inconsistencies in iOS, see this [Know Issue](#incorrent-height-ios)to know more._
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.
90
102
width | number | Infinity | Restrict the width. The resulting height will vary depending on the automatic flow of the text.
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).
103
+
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/rn-text-size-sample-app).
92
104
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.
93
105
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".
94
106
fontSize | number | 14 | The default value comes from RN.
95
107
fontStyle | string | 'normal' | One of "normal" or "italic".
96
-
fontVariant | array | (none) | _iOS only_
108
+
fontVariant | array | (none) | _iOS only_
97
109
allowFontScaling | boolean | true | To respect the user' setting of large fonts (i.e. use SP units).
98
110
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+_
99
111
includeFontPadding | boolean | true | Include additional top and bottom padding, to avoid clipping certain characters.<br>_Android only_
100
112
textBreakStrategy | string | 'highQuality' | One of 'simple', 'balanced', or 'highQuality'.<br>_Android only, with API 23+_
101
113
102
-
The [sample App](https://github.com/aMarCruz/react-native-text-size/tree/master/example) shows interactively the effect of these parameters on the screen.
114
+
The [sample App](https://github.com/aMarCruz/rn-text-size-sample-app) shows interactively the effect of these parameters on the screen.
103
115
104
116
**TSMeasureResult**
105
117
@@ -172,8 +184,6 @@ class Test extends Component<Props, State> {
172
184
}
173
185
```
174
186
175
-
---
176
-
177
187
## `flatHeights`
178
188
179
189
```ts
@@ -221,12 +231,11 @@ The result is a Promise that resolves to an array with the height of each block
221
231
222
232
Unlike measure, `null` elements returns 0 without generating error, and empty strings returns the same height that RN assigns to empty `<Text>` components.
@@ -250,7 +259,6 @@ To know the key names, please see [Keys from specsForTextStyles](https://github.
250
259
251
260
I have not tried to normalize these keys since, with the exception of 2 or 3, they have a different interpretation in each OS. You will know how to use them to create custom styles according to your needs.
252
261
253
-
---
254
262
255
263
## `fontFromSpecs`
256
264
@@ -307,11 +315,10 @@ See more in:
307
315
308
316
**Tip**
309
317
310
-
> Avoid `allowsFontScaling: false`.
311
-
>
312
-
> When setting the `fontSize` and `lineHeight` properties of `<Text>` and `<TextInput>`, if you omit, or set `allowFontScaling:true`, React Native performs the conversion and scaling automatically.
318
+
Avoid `allowsFontScaling: false`.
319
+
320
+
When setting the `fontSize` and `lineHeight` properties of `<Text>` and `<TextInput>`, if you omit, or set `allowFontScaling:true`, React Native performs the conversion and scaling automatically.
313
321
314
-
---
315
322
316
323
## `fontFamilyNames`
317
324
@@ -327,7 +334,6 @@ On Android the result is hard-coded for the system fonts and complemented dynami
327
334
328
335
See [About Android Fonts](https://github.com/aMarCruz/react-native-text-size/wiki/About-Android-Fonts) and [Custom Fonts](https://github.com/aMarCruz/react-native-text-size/wiki/Custom-Fonts) in the Wiki to know more about this list.
329
336
330
-
---
331
337
332
338
## `fontNamesForFamilyName`
333
339
@@ -344,8 +350,22 @@ You can use the rnTextSize's `fontFamilyNames` function to get an array of the a
344
350
345
351
## Known Issues
346
352
353
+
#### Incorrent height (iOS)
354
+
355
+
On iOS, RN takes into account the absolute position on the screen to calculate the dimensions. rnTextSize can't do that and both, width and height, can have a difference of up to 1 pixel (not point).
356
+
357
+
#### letterSpacing not scaling (iOS)
358
+
359
+
RN does not support the [Dynamic Type Sizes](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography#dynamic-type-sizes), but does an excellent job imitating this feature through `allowFontScaling` ...except for `letterSpacing` that is not scaled.
360
+
361
+
I hope that a future version of RN solves this issue.
362
+
363
+
#### lineHeight Support
364
+
347
365
Although rnTextSize provides the resulting `lineHeight` in some functions, it does not support it as a parameter because RN uses a non-standard algorithm to set it. I recommend you do not use `lineHeight` unless it is strictly necessary, but if you use it, try to make it 30% or more than the font size, or use rnTextSize [`fontFromSpecs`](#fontfromspecs) method if you want more precision.
348
366
367
+
#### Nexted Text
368
+
349
369
Nested `<Text>` components (or with images inside) can be rasterized with dimensions different from those calculated, rnTextSize does not accept multiple sizes in the text.
350
370
351
371
@@ -370,6 +390,7 @@ Feedback, PRs stars, and smiles are also welcome.
0 commit comments