Summary:
The `maxFontSizeMultiplier` prop for `Text` and `TextInput` was not handled in Fabric / New Architecture as documented in https://github.com/facebook/react-native/issues/47499.
bypass-github-export-checks
## Changelog:
[GENERAL] [FIXED] - Fix `maxFontSizeMultiplier` prop on `Text` and `TextInput` components in Fabric / New Architecture
Pull Request resolved: https://github.com/facebook/react-native/pull/47614
Test Plan:
I have not added any automated tests for this change but try to do so if requested. I have however added examples to RN Tester for both the Text and TextInput components, as well as compared the behaviour with Paper / Old Architecture. Both on version 0.76.
Noticed now I didn't do exactly the same steps in both videos, oops! Be aware that reapplying changes made in the Settings are currently half-broken on the new architecture, thus I'm restarting the app on Android and iOS. But this issue is unrelated to my changes. I've tested on main branch and it has the same issue.
Here are comparison videos between Paper and Fabric on iOS *after* I've made my fix.
### Text
| Paper | Fabric |
| ------------- | ------------- |
| <video src="https://github.com/user-attachments/assets/f4fd009f-aa6d-41ab-92fa-8dcf1e351ba1" /> | <video src="https://github.com/user-attachments/assets/fda42cc6-34c2-42a7-a6e2-028e7c866075" /> |
### TextInput
| Paper | Fabric |
| ------------- | ------------- |
| <video src="https://github.com/user-attachments/assets/59b59f7b-25d2-4b5b-a8e2-d2054cc6390b" /> | <video src="https://github.com/user-attachments/assets/72068566-8f2a-4463-874c-45a6f5b63b0d" /> |
Reviewed By: Abbondanzo
Differential Revision: D65953019
Pulled By: cipolleschi
fbshipit-source-id: 90c3c7e236229e9ad9bd346941fafe4af8a9d9fc
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48901
## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling.
## This diff
- Updates files in `Libraries/Text`, `Libraries/Share` and `Libraries/Settings` to use `export` syntax.
- Appends `.default` to requires of the changed files.
- Updates test files.
- Updates the public API snapshot *(intented breaking change)*
Changelog:
[General][Breaking] - Files inside `Libraries/Text`, `Libraries/Share` and `Libraries/Settings` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.
Reviewed By: huntie
Differential Revision: D68562844
fbshipit-source-id: bd71a341e33d3629121aa61549139c4b1cd62c3f
Summary:
Apple introduced system font families
```
font-family: system-ui;
font-family: ui-sans-serif;
font-family: ui-serif;
font-family: ui-monospace;
font-family: ui-rounded;
```
for Safari at 2020 (see https://developer.apple.com/videos/play/wwdc2020/10663/?time=872).
This PR implementation supports above font families on iOS.
bypass-github-export-checks
## Changelog:
[IOS] [ADDED] - Support system font families (system-ui, ui-sans-serif, ui-serif, ui-monospace, and ui-rounded) on iOS
Pull Request resolved: https://github.com/facebook/react-native/pull/47544
Test Plan: Run `RNTester` and view the `Text` component where shows the usage for those font families.
Reviewed By: NickGerleman
Differential Revision: D65761307
Pulled By: cipolleschi
fbshipit-source-id: 18628160b7753b314389e887cddfe9d0ec96ee1d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47270
Lets add some screenshot tests, along with one more example, and fixing some silly typos in test IDs.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D65094482
fbshipit-source-id: a5f3e06c4737158bf6419364d05668c3feb1bd5e
Summary:
Fixes https://github.com/facebook/react-native/issues/46908
The `justificationMode` is not set for multiline text without unicode characters with known width on both architectures. This caused the issue of drawing additional empty line at the end of `TextView` because Yoga thought that text takes 5 lines and falsely calculated it's height.
Currently, on the old architecture, the `justificationMode` is set only on text that is not boring (contains unicode characters) with unknown width. I am not sure why is that, so I am opening this as a draft for now as I am still checking if it doesn't break anything.
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[ANDROID] [FIXED] - fix generating empty line at the end of multiline text view when `textAlign` is set to `justify`
Pull Request resolved: https://github.com/facebook/react-native/pull/47122
Test Plan: I've tested on both architectures on repro provided in the issue.
Reviewed By: javache
Differential Revision: D65002386
Pulled By: NickGerleman
fbshipit-source-id: 0187956c88e6eb1e637c24e82b3052cc82581a64
Summary:
Part of this: https://github.com/facebook/react-native/issues/46757
Solves:
- ME2E0017
- ME2E0018
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[ Internal ] [ Added ] - Add e2e test for button
Pull Request resolved: https://github.com/facebook/react-native/pull/46829
Test Plan:
yarn e2e-test-ios
yarn e2e-test-android
Reviewed By: rshest
Differential Revision: D63889079
Pulled By: cipolleschi
fbshipit-source-id: ca2ede3142d77170fcb4121b025eab56818ffb07
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46404
As title
Second attempt to rename the prop. BoxShadow caused no issues after renaming but it was batched with `filter` which we reverted.
Changelog: [General] [Changed] - Add official `boxShadow` CSSProperty.
Reviewed By: NickGerleman, cyan33
Differential Revision: D62400814
fbshipit-source-id: ad721f6d11d614e987048e55556b05ff74a4747d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46267
We can propagate opacity, already part of AttributedString, to alpha channel of paint used to draw text and background on canvas.
This does not support propagating to views, and contrary to the iOS example added which originated with legacy arch, does not correctly support nesting opacity. This is a limitation of new arch more generally, where an AttributedString fragment only contains inner-most opacity.
Bg and foreground are drawn separately with alpha as well, instead of rendering overlapping content offscreen to properly apply it (this is an issue on RN Android more generally, and existing color alpha support, but is pretty noticeable here).
This impl targets new arch only.
Changelog:
[Android][Added] - Support simple opacity in nested text
Reviewed By: alanleedev
Differential Revision: D61999163
fbshipit-source-id: adb99834e94e00cb84a98d56f422c15b1bd849db
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46068
This change adds some internal E2E tests to verify that the text is rendered properly on top of a solid background color when borderWidth is set
## Changelog
[Internal] - Add E2E tests
Reviewed By: cortinico
Differential Revision: D61392253
fbshipit-source-id: 76e11821eba96ac75b055c5fe94365197c0f9be2
Summary:
This diff adds an example in RNTester to verify that we can draw text on top of a colored background and non uniform border radius.
As you can see from the test plan, the current code works well when:
* There is only the background color
* There is a background color and uniform cornerRadius
* There are non uniform border radius but the background is transparent.
The current code **does not** work when:
* there is a background and non-uniform border radius
* there is a background, uniform border radius and borderwidth
The reason why this happens is because:
* `RCTParagraphComponentView` draws the text in the View's main layer in the `drawRect` method
* `RCTViewComponentView` has a method `invalidateLayer` that, when there are non-uniform border radii o there is a borderWidth, it creates an extra `CALayer` with an image as content and that layer is put on top of the base layer, covering the text.
## Changelog
[Internal] - Add example to RNTester
Reviewed By: cortinico
Differential Revision: D61389317
fbshipit-source-id: 3e0a9e6c611190f90198a1b0b5855431b9f6ed12
Summary:
D57197676 reordered the TextExample test cases, but accidentally reused the same string as the case in packages/rn-tester/js/examples/Text/TextInlineViewsExample.js
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D57279961
fbshipit-source-id: 60a41eaf13d82538ee149fe4ef5531e42c00b012
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44518
# Changelog:
[Internal] -
For some inexplicable reason, we had majority of `Text` test examples (42 out of 46) in RNTester stuffed into `<RNTesterBlock/>` components inside one huge "Basic" test case.
This was highly imbalanced, introduced extra nesting, cluttering the UI, but most importantly, none of those 42 out 46 test cases were searchable for.
This change flattens all of the corresponding nested test cases to the top level, making them into valid separate test cases, which are also searchable.
It also corresponds to the general structure we have in other test examples, such as `TextInput`.
Reviewed By: cipolleschi
Differential Revision: D57197676
fbshipit-source-id: 777eb2aa238a91bb3f52d2f0ab10edc6bfad5c85
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44505
# Changelog:
[Internal] -
The RNTester/Text tests, that are related to text wrapping (such as "wrap mode", "hyphenation", "ellipsize", "numberOfLines" ones) were written with the mobile form factor in mind, whereas the RNTester window is generally expected to be narrow and tall.
Now, that we are running on other platforms as well, there is no guarantee about the RNTester window width, in general, so these tests relying on particular window width is not practical anymore.
This makes the corresponding tests work in a useful way without making assumptions about the RNTester's window width.
Differential Revision: D57166025
fbshipit-source-id: 3305a31f7ca254d82c85d67c975c1140050adc28
Summary:
On the new architecture on Android on the new arch, `textAlign` style was ignored (`Layout.Alignment.ALIGN_NORMAL` was always used) during the measurement of text. During this phase, the positions of attachments are also calculated, which results in inline views being always positioned as if alignment to the left was set. This PR updates the measurement logic to also take `textAlign` into account during measurement.
Fixes https://github.com/facebook/react-native/issues/41008
## Changelog:
[ANDROID] [FIXED] - Fixed `textAlign` not being taken into account when positioning views inlined in text
Pull Request resolved: https://github.com/facebook/react-native/pull/44146
Test Plan:
<details>
<summary>I've been testing on the following code</summary>
```jsx
import { SafeAreaView, Text, View } from "react-native";
function InlineView(props) {
return (<View style={{margin: 10}} >
<Text style={{ textAlign: props.textAlign, backgroundColor: 'cyan' }}>
Parent Text
<Text style={{ fontWeight: 'bold' }}>Child Text</Text>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<Text style={{ fontWeight: 'bold' }}>Child Text</Text>
{props.long && <Text style={{ fontWeight: 'bold' }}>aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas</Text>}
</Text>
</View>)
}
export default function Test() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text style={{textAlign: 'center', fontSize: 20}}>BoringLayout</Text>
<InlineView textAlign="left" />
<InlineView textAlign="center" />
<InlineView textAlign="right" />
<InlineView textAlign="justify" />
<Text style={{textAlign: 'center', fontSize: 20}}>StaticLayout</Text>
<InlineView textAlign="left" long />
<InlineView textAlign="center" long />
<InlineView textAlign="right" long />
<InlineView textAlign="justify" long/>
</SafeAreaView>
);
}
```
</details>
| Old architecture | New architecture |
|------------------|------------------|
| <img width="447" alt="Screenshot 2024-04-18 at 17 08 59" src="https://github.com/facebook/react-native/assets/21055725/b21848ff-3939-4dde-9f78-03ce50c9429a"> | <img width="447" alt="Screenshot 2024-04-18 at 17 04 46" src="https://github.com/facebook/react-native/assets/21055725/fb57a3c4-09e8-4db7-abc3-79747314529b"> |
Reviewed By: NickGerleman, cipolleschi
Differential Revision: D56361169
Pulled By: cortinico
fbshipit-source-id: c3002f65541774e376e315c3076a6157aa330f8d
Summary:
Changelog:
[iOS][Fixed] - Unrecognized fontFamily values no longer trigger a redbox
## Context
We are starting to roll out a new consistent approach to style errors in React Native, where malformed or semantically invalid style values will never be treated as runtime errors. Instead, bad style values will consistently fall back to known defaults; the incorrect visual rendering will serve as the main runtime diagnostic for developers. We will advise developers to rely on static types for additional diagnostics.
This work will take place over multiple commits and possibly multiple releases of React Native.
## This diff
Here we fix this issue as it applies to the `fontFamily` style prop. The legacy (Paper) renderer on iOS is the only concrete implementation that had to change. Fabric and Android already implement the correct behaviour.
h/t EvanBacon for the report: https://twitter.com/Baconbrix/status/1623039650775371792
Reviewed By: huntie
Differential Revision: D43159284
fbshipit-source-id: 6afeef3abc5781e18671708f642073d25f2347e9
Summary:
This diff adds type parameters to all uses of `new Array`.
Changelog: [internal]
Reviewed By: SamChou19815
Differential Revision: D41746116
fbshipit-source-id: 8aa2777dd13ef4cd9f8613adaa3509d3573d4446
Summary:
iOS did not support the implementation of Korean word-wrap(line-break) before iOS14.
If the attribute applied, the word-wrap of Korean will works.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[iOS] [Added] - Line break strategy for Text and TextInput components
Pull Request resolved: https://github.com/facebook/react-native/pull/31272
Test Plan:
1. Test build and run on above iOS 14.
2. Test it does not affect existing text components when set default(none) strategy.
3. Test whether word-wrap works with Korean when set hangul-word strategy.
<img src="https://user-images.githubusercontent.com/26326015/112963967-d7f70c00-9182-11eb-9a34-8c758b80c219.png" width="300" height="" style="max-width:100%;">
Reviewed By: javache
Differential Revision: D39824809
Pulled By: lunaleaps
fbshipit-source-id: 42cb0385221a38c84e80d3494d1bfc1934ecf32b
Summary:
This adds support for the `verticalAlign` style attribute, mapping the already existing `textAlignVertical` attribute as requested on https://github.com/facebook/react-native/issues/34425. This PR also updates the TextExample.android on the RNTester in order to facilitate the manual QA of this.
## Changelog
[Android] [Added] - Add support for verticalAlign style
Pull Request resolved: https://github.com/facebook/react-native/pull/34567
Test Plan:
1. On Android open the RNTester app and navigate to the Text page
2. Check the text alignment through the `Text alignment` section
https://user-images.githubusercontent.com/11707729/188051914-bf15f7eb-e53f-4de5-8033-d1b572352935.mov
Reviewed By: jacdebug
Differential Revision: D39771237
Pulled By: cipolleschi
fbshipit-source-id: d2a81bec1edd8d49a0fcd36a42fea53734909739
Summary:
This PR adds support for number values for `fontWeight` as requested in https://github.com/facebook/react-native/issues/34425.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[General] [Added] - Added support for number values in fontWeight.
Pull Request resolved: https://github.com/facebook/react-native/pull/34598
Test Plan:
```js
<Text style={{ fontWeight: 900, color: 'red' }}>
Hello World
</Text>
```
Reviewed By: jacdebug
Differential Revision: D39268920
Pulled By: cipolleschi
fbshipit-source-id: 9bb711677bf173f9904b74f382659042856efd83
Summary:
This adds support for the `userSelect` style attribute, mapping the already existing selectable attribute as requested on https://github.com/facebook/react-native/issues/34425. This PR also updates the TextExample.android and TestExample.ios on the RNTester in order to facilitate the manual QA of this.
## Changelog
[General] [Added] - Add support for `userSelect` style
Pull Request resolved: https://github.com/facebook/react-native/pull/34575
Test Plan:
- open the RNTester app and navigate to the Text page
- Check the `Selectable Text` through the Selectable text section
<Image src="https://user-images.githubusercontent.com/22423684/188112863-65acd145-76b0-47ba-8bc6-f72298077096.png" height="600" width="300" />
Reviewed By: yungsters
Differential Revision: D39252798
Pulled By: jacdebug
fbshipit-source-id: f7fabf20ee68778d75461f511c56f94d0d756d9c
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable.
Reviewed By: bradzacher
Differential Revision: D37388949
fbshipit-source-id: cdcbc98035ce9b6994842005ea46df42de54f9b8
Summary:
Existing RNTester examples for text did not contain a case where text with color was nested inside of another with text at both ends. This would have caught T113767991
Changelog:
[Internal] - Add RNTester example for nested text
Reviewed By: mdvacca
Differential Revision: D34874080
fbshipit-source-id: cda91cde9c7449abb677ae9fa936a61e396ffbd3
Summary:
hyphenationStrategy must be one of one of Layout#HYPHENATION_FREQUENCY_NONE, Layout#HYPHENATION_FREQUENCY_NORMAL, Layout#HYPHENATION_FREQUENCY_FULL: (https://developer.android.com/reference/android/widget/TextView#setHyphenationFrequency(int))
Thus "high" and "balanced" are not only redundant, but actually don't do what the value indicates - Layout#BREAK_STRATEGY_BALANCED (constant value: 2) and Layout#BREAK_STRATEGY_HIGH_QUALITY (constant value: 1) are only meant to be used for android:breakStrategy
Changelog:
[Android][Changed] - Remove `"high"` and `"balanced"` as values for `android_hyphenationFrequency` on `Text`
Reviewed By: JoshuaGross
Differential Revision: D30531096
fbshipit-source-id: 1a0b6e733bb21ce6b2f104a2025a79c16de3cfea
Summary:
Creates a new RNTester example to verify facebook/react-native#31538 (D28631465).
Changelog:
[Android][Added] - RNTester example for adjusting text with dynamic layout.
Reviewed By: kacieb
Differential Revision: D28779870
fbshipit-source-id: 5297a823645d1e9e35d4c86b491f3c225ecc9543
Summary:
RNTester has some imports left over that operate on directory traversal, assuming it is contained within react-native sources. This change makes these imports relative to react-native, enabling usage outside of the RN repo.
Relates to https://github.com/microsoft/react-native-windows/issues/6210
## Changelog
[Internal] [Fixed] - Avoid File Structure Assumptions in RNTester Imports
Pull Request resolved: https://github.com/facebook/react-native/pull/30141
Test Plan: Validated we can bundle and flow-check both iOS + Android
Reviewed By: cpojer
Differential Revision: D24259628
Pulled By: appden
fbshipit-source-id: 0c21b5d354b01785d8402599da3b0a5be81b4c6d
Rickard Zrinski
Iwo Plaza
Dawid Małecki
Mateo Guzmán
CHEN Xian-an
Nick Gerleman
Dawid
muskan27797
Jorge Cabiedes Acosta
Riccardo Cipolleschi
Sam Zhou
Jakub Piasecki
Fabrizio Cucci
Gijs Weterings
Ruslan Shestopalyuk
Moti Zilberman
Ana Margarida Silva
Mike Vitousek
Adam Gleitman
bang9
Gabriel Donadel Dall'Agnol
ankit-tailor
Daksh Bhardwaj
Pieter Vanderwerff
Genki Kondo
MaeIg
Andres Suarez
Tim Yung
Valentin Shergin
Evan Yeung
Luna Wei
fabriziobertoglio1987
Nick Gerleman
