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:
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 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:
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:
## 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
-->
This PR aims to migrate the RNTester App to `packages` directory. But is currently, open to inspect the CI issues and resolve the merge conflicts.
Currently done
- Working on iOS
- Working on Android
- Detox Tests working on iOS
Need to work on
- Errors generated by the CI builds
[General] [Changed] - Migrated the RNTester App to the packages directory.
Pull Request resolved: https://github.com/facebook/react-native/pull/29567
Test Plan: It runs on both ios and android for now and the detox iOS builds are working.
Reviewed By: cpojer
Differential Revision: D23034761
Pulled By: rickhanlonii
fbshipit-source-id: e04bb06e1c7ef15d340206090d1575a871b9e6f5
Nick Gerleman
Jorge Cabiedes Acosta
Jakub Piasecki
Fabrizio Cucci
Gijs Weterings
Ruslan Shestopalyuk
Moti Zilberman
Sam Zhou
Ana Margarida Silva
Gabriel Donadel Dall'Agnol
ankit-tailor
Daksh Bhardwaj
Pieter Vanderwerff
Genki Kondo
MaeIg
Andres Suarez
Tim Yung
Valentin Shergin
Luna Wei
fabriziobertoglio1987
Ankit Tiwari
stealthanthrax
