Summary:
Improve compatibility with web implementations of JS timers.
Fixes https://github.com/facebook/react-native/issues/45085
## Changelog:
[GENERAL] [CHANGED] - Timer functions are now throwing exceptions in less cases and are instead quiet quitting (similar to browsers)
[GENERAL] [CHANGED] - Timer functions `timeout` argument is now coerced to a number
Pull Request resolved: https://github.com/facebook/react-native/pull/45105
Test Plan: Updated RN tester
Reviewed By: christophpurrer
Differential Revision: D58952146
Pulled By: javache
fbshipit-source-id: 5b6de524f6a03f5221f0d11e0ae2a9313951c767
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44939
DropShadow is a filter so we need to add the logic for sending it to native through the same process function for the other filters.
Drop shadow can have more arguments than the other filters. I'm following a similar pattern to boxShadow D57872933.
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D58370127
fbshipit-source-id: dba06bb2e0ea2799d20e8b0b9065a5729df22bb6
Summary:
Implements `requestIdleCallback` and `cancelIdleCallback`
### Notes
Proposed implementation does yet cover all WHATWG eventloop requirements.
- Deadline computation is not implemented and is polyfilled by giving each callback `50ms`, rather than it being shared between other idle callbacks.
- The requested callbacks are called with lowest priority by the scheduler as of now, but the execution is not as described in the standard.
## Changelog:
- [GENERAL] [ADDED] - Implemented `requestIdleCallback` and `cancelIdleCallback`
Pull Request resolved: https://github.com/facebook/react-native/pull/44759
Reviewed By: javache, sammy-SC
Differential Revision: D58415077
Pulled By: rubennorte
fbshipit-source-id: 46189d4e3ca1d353fa6059a904d677c28c61b604
Summary:
When an XMLHttpRequest is performed, the `onprogress` event it is not invoked when the `Content-Length` header is missing in the response. This is the case when we are calling an endpoint that responds with `transfer-encoding: chunked` (https://tools.ietf.org/html/rfc9112#section-7.1), preventing the user to keep track of the progress while the server is sending chunks. Despite we will never know the total length of the content (because it will not be known due to the RFC specification, so it will be always `-1`), we will now be able to keep track of the loaded data.
Note that in Android, this is the current default behaviour.
To address this issue:
- I removed the condition where the `downloadProgressBlock` was dispatched only when `response.expectedContentLength` was greater than 0
- I created a new test case for `XMLHttpRequest` in the tester app to download a chunked file
## Changelog:
[IOS] [CHANGED] - fire `onprogress` event for `XMLHttpRequest` even when the `Content-Length` header is missing in the response headers
Pull Request resolved: https://github.com/facebook/react-native/pull/44899
Test Plan:
|before|after|
|----------|:-------------:|
|https://github.com/facebook/react-native/assets/37150312/6da3518f-eed3-4808-a2f8-abe26e5c7487|https://github.com/facebook/react-native/assets/37150312/ed1da300-dcf7-4874-a941-a2289f1cb777
Reviewed By: cortinico
Differential Revision: D58562088
Pulled By: NickGerleman
fbshipit-source-id: 23a1cafa49ddcd25fa0db7d04fae845126771425
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44810
Adds an example how to use the `EventEmitter` on a (C++) Turbo Module
## Changelog:
[General] [Added] - Add C++ Turbo Module Event Emitter example
Reviewed By: javache
Differential Revision: D57473949
fbshipit-source-id: 1a8d17fb83af4220ef12379e0102b5b2e233ed45
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44823
Changelog: [internal]
This modifies the example for `IntersectionObserver` in RNTester to test that the API reports changes in intersection also coming from changes in layout (previously is was only from changes in scroll position).
Reviewed By: javache
Differential Revision: D58260057
fbshipit-source-id: 305d5996148730d718da30896f6cc62991b717f7
Summary:
Add synchronous JS bindings installation for TurboModules. That would help some 3rd party JSI based modules to install JS bindings easier.
https://github.com/facebook/react-native/issues/44486 for Android
## Changelog:
[Android] [ADDED] - Add BindingsInstaller for TurboModules
Pull Request resolved: https://github.com/facebook/react-native/pull/44526
Test Plan:
Added test in RN-Tester TurboModule test case
{F1660267530}
{F1660287029}
Reviewed By: javache
Differential Revision: D57223328
Pulled By: philIip
fbshipit-source-id: d4a69a16f6ce77c0a0fd63f008bea929b1964ab8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44646
We can remove most of the code for clipping children to border radius, and recalculating paths, in ReactViewGroup, and rely on the padding box path/rect already set.
I will move this to something more generic up the stack so other native components can reuse this logic.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D57668976
fbshipit-source-id: 8b8cf956dc8689827bccba5e41751b465fd85eeb
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:
This PR adds percentage support in translate properties for new arch iOS. Isolating this PR for easier reviews.
The approach taken here introduces usage of `ValueUnit` struct for transform operations so it can support `%` in translates and delay the generation of actual transform matrix until view dimensions are known. I have tried to keep the changes minimal and reuse existing APIs, open to changes if there's an alternative approach.
## Changelog:
[IOS] [ADDED] - Percentage support in translate in new arch.
<!-- 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
Pull Request resolved: https://github.com/facebook/react-native/pull/43192
Test Plan:
- Checkout TransformExample.js -> Translate percentage example.
- Added a simple test in `processTransform-test.js`. The regex is not perfect (values like 20px%, 20%px will pass, can be improved, let me know!)
Related PRs - https://github.com/facebook/react-native/pull/43193, https://github.com/facebook/react-native/pull/43191
Reviewed By: javache
Differential Revision: D56802425
Pulled By: NickGerleman
fbshipit-source-id: 978cbbdde004afe1e68ffee9a3c7eb7d16336b46
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44558
Right now this is only exposed to RNTester on iOS, but the prop exists on both platforms.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D57281892
fbshipit-source-id: 9effc2b9c6421f8c74a2f4b933ab0fa0f15e7d70
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44525
These examples were added, but their names were duplicated. This caused our internal e2e tests to accidentally target the wrong examples.
Changelog:
[General][Fixed] RNTester examples for border percentages are now properly covered by E2E screenshot tests.
Reviewed By: NickGerleman
Differential Revision: D57207306
fbshipit-source-id: 32ed5cc6b136a8928b11afe8b824c752edcdd9e5
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/44517
# Changelog:
[Internal] -
A follow-up to https://github.com/facebook/react-native/pull/44505, turns out this is also an issue for TextInput examples, which work of assumption of some of the text input fields being of limited width, but in practice growing to occupy the parent window width, which can be quite large on platforms different from the classic mobile ones.
This diff makes the corresponding tests more practical, not expanding to the parent window anymore.
Reviewed By: christophpurrer
Differential Revision: D57196308
fbshipit-source-id: 7018e8c51adb70fe6a03e50d71eff9ba997fd07a
Summary:
Root cause of the fetch memory leak:
The fetch requests store its result inside Blob which memory is managed by BlobCollector. On the JS engine side,
the Blob is represented by an ID as JS string, and the GC don't know the size of the blob. So GC won't have interests to release the Blob.
Fix:
On iOS and Android, use `setExternalMemoryPressure` to acknowledge JS engine the size of Blob it holds.
## Changelog:
[GENERAL] [FIXED] - fix fetch memory leak
Pull Request resolved: https://github.com/facebook/react-native/pull/44336
Test Plan: `RepeatedlyFetch` inside `XHR` example
Reviewed By: javache
Differential Revision: D57145270
Pulled By: NickGerleman
fbshipit-source-id: afa53540e8563db4f9c6657f2dbbdff7bdfa66c0
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:
Pull Request resolved: https://github.com/facebook/react-native/pull/44500
tsia really, added tests for blur, brightness, and chained brightness + blur. I don't really think I need to add them all, as e2e tests can be flaky and I doubt someone changes specific color matrix values ever.
Changelog: [Internal]
Reviewed By: yungsters
Differential Revision: D57127765
fbshipit-source-id: 7644c9493eee176e24922f7c06656360340e00d4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44415
# Changelog:
[Internal] -
RNTester Image example used hardcoded `https://www.facebook.com/favicon.ico`, which has an uncommon ICO format, for no good reason aside of just this image being served from `facebook.com`.
This diff:
* Replaces the ICO image with a PNG one (which is still served from `facebook.com`
* Factors out all the multiple hardcoded paths into constants, so that it's easier to make such changes in the future
* Changes another image to something that is a bit better on the eyes when severely downscaled
Reviewed By: christophpurrer
Differential Revision: D56978929
fbshipit-source-id: c627d1671c8cb66e9a78f4382faa56e539b2f7b3
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44414
# Changelog:
[Internal] -
I noticed that "Image/Fade Duration" test in RNTester is practically useless, as at the moment one scrolls to the test, the fading is most probably had already ended.
This adds a "button" to refresh the image and be able to see the fading in again and again, if desired.
Reviewed By: christophpurrer
Differential Revision: D56978930
fbshipit-source-id: 02873b45600ad319b0b1077467f599dc1a54bee3
Summary:
This enables to code-gen base C++ types for custom exported JS types from a RN TM spec - which have been previously excluded from code-gen as these aren't used in any function.
The only work around so far was to ‘register’ a random function using the custom type which should be used for RCTDeviceEventEmitter events
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D56685903
fbshipit-source-id: add9ca40018b91c9fca98609ba3d1f85d3affec1
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44140
Why?
Previously we didn't support using percentages like:
```
style={{
width=100,
height=100,
borderRadius='100%',
}}
```
These percentages refer to the corresponding dimension of the border box.
What?
Change the unit type for `BorderRadii` values to `ValueUnit`. This type allows us to have an object containing a `float`, and a `UnitType` properties. With this we conditionally calculate the corresponding point (dp) value for a given percentage (considering size). Ex:
```
result = {raw_percentage_value} / 100 * (max(height, width))
```
We know the maximum border radius for our current implementation is half the dp of the shorter side of our view, hence why we consider half our maximum view side as equivalent to 100%.
Note: We still don't support vertical/horizontal border radii
## Changelog:
[iOS][Added] - Added support for using percentages when defining border radius related properties.
Reviewed By: NickGerleman
Differential Revision: D56198302
fbshipit-source-id: 6cd510b1c7164dcb82ca5ad8a9861c5ce5c8b15b
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:
Web props work (somewhere around D41230978 and D39268920) made it so that numeric font weights can be set instead of just strings. This is implemented by converting number to string before passing to native component within the `Text` component.
We have crash with:
```
2024-04-19 09:38:21.360 16963 17190 E ViewManager: Error while updating prop fontWeight
2024-04-19 09:38:21.360 16963 17190 E ViewManager: java.lang.IllegalArgumentException: method com.facebook.react.views.text.ReactBaseTextShadowNode.setFontWeight argument 1 has type java.lang.String, got java.lang.Double
2024-04-19 09:38:21.360 16963 17190 E ViewManager: at java.lang.reflect.Method.invoke(Native Method)
```
`TextStyleProps` can also be passed to `TextInput`, which passes to underlying native component, without going through this logic. And the types for Native props directly derive from JS props, so type system does not catch passing incorrect number type to underlying native component.
This does a quick and dirty replication of the exact logic in `Text.js` to `TextInput.js`. I'd love to potentially fix this up for Fabric in a different way when we rethink CSS parsing.
Changelog:
[General][Fixed] - Handle `fontWeight` normalization for TextInput component
Reviewed By: arushikesarwani94
Differential Revision: D56539571
fbshipit-source-id: 8975886c117d814a624f817bffe408841bb03b88
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44109
(Following up from suggestion of prior diff)
For consistency with `OnSelectionChange` callback, rename `onPopupDismiss` to `onDismiss`.
Changelog:
[Android][Internal] - rename function
Reviewed By: RSNara
Differential Revision: D56168456
fbshipit-source-id: c4a32637951200736202f43294973d783ecf5ace
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44103
Changes here fixes events in PopupMenuAndroid not being triggered correctly.
Issuses were:
1) naming mismatch
2) wrong parameters were set for the Event Map
3) missing code in .cpp
Applied fixes:
1) consistent event naming
2) fixed key used for event mapping
3) re-ran codegen to update .cpp files
## Changelog:
[Android] [internal] - Fix issue with PopupMenuAndroid event callback not working
Steps took to run codegen for this diff: https://www.internalfb.com/intern/phabricator/paste/markdown/P1214671854/
This diff is patching issues from D55531870
Reviewed By: RSNara
Differential Revision: D56164235
fbshipit-source-id: 4cf66ad3cfd753c146c5e219f27910834731e183
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44039
Changelog: [Internal]
Get label color from theme to fix dark mode.
Reviewed By: NickGerleman
Differential Revision: D56011777
fbshipit-source-id: 3ef14d6437c51118f0c0db3950b24f7e71d33fb3
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43068
This diff adds `react-native-test-library` package.
It contains native module and native component example, and targets both the new and the old architecture. It has structure similar to many OSS React Native libraries, and is supposed to be used to test the integration with third-party libraries.
It is integrated with RNTester as the **OSS Library Example** screen.
{F1457510909}
**Change Background** tests native commands.
**Set Opacity** tests native props.
**Get Random Number** tests native module.
Changelog: [Internal]
Reviewed By: RSNara
Differential Revision: D50793835
fbshipit-source-id: ff6daefab10e6e9f13049e3013f8f63cfa8a929e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43848
Changelog: [internal]
This makes it easier to see the behavior of the new Event Timing API in RN.
Reviewed By: sammy-SC
Differential Revision: D55646393
fbshipit-source-id: 441fed789a980211783f04095303a139e7b08483
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43706
Changelog: [internal]
Just a small improvement of the UI for the Performance API examples in RNTester.
Reviewed By: christophpurrer
Differential Revision: D55489933
fbshipit-source-id: a1fe4f4962227941827f02cf18a0d4685e18f006
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43704
Changelog: [internal]
Adding examples of the rest of APIs in `Performance`/`PerformanceObserver` starting with marks and measures.
Reviewed By: rshest
Differential Revision: D55477746
fbshipit-source-id: 965796b6a97dc527192093e3c93af837a4d5b714
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43599
iOS E2E tests non-deterministic rendering happens around examples with a border set to `StyleSheet.hairlineWidth`. That value has special subpixel math, that doesn't seem to render consistently on iOS (this is its own bug).
To unblock adding some new E2E iOS TextInput tests, this removes usage of `hairlineWidth` in styles, and more generally, tries to unify TextInput styles in the examples.
This will break a whole bunch of RNTester Jest E2E baselines on different apps, which I will update from land-time runs or after continuous builds are available for different endpoints.
Changelog: [Internal]
Reviewed By: fkgozali
Differential Revision: D55213090
fbshipit-source-id: 6d81b9355adc538a3ade6f50ef93c3ca08782ae7
Robert Pasiński
Jorge Cabiedes Acosta
alicata
Biki-das
Christoph Purrer
Rubén Norte
Nick Gerleman
Kudo Chien
Gijs Weterings
Nick Gerleman
Fabrizio Cucci
Nishan
Ruslan Shestopalyuk
huzhanbo.luc
Pieter Vanderwerff
Joe Vilches
Jakub Piasecki
Sam Zhou
Alan Lee
Alex Taylor (alta)
zhongwuzw
Dmitry Rykun