Summary:
While developing my project with New Architecture enabled I've found out that properties `tintColor` and `progressViewOffset` of component `RefreshControl` don't apply on iOS. This happens due to the lack of handling of these properties in the `RCTPullToRefreshViewComponentView.mm` class.
The bug can be easily reproduced in RNTester app on RefreshControlExample.js screen, since it has property `tintColor="#ff0000"` (Red color), but RefreshControl renders with gray color:
<img width="300" alt="RefreshControlExample.js" src="https://github.com/user-attachments/assets/10931204-dbe8-4cbd-9adc-d0f38319febd">
<img width="300" alt="gray Refresh Control" src="https://github.com/user-attachments/assets/e5d088e8-b3f5-46b8-9284-9b452232ad10">
<br />
<br />
This PR is opened to fix that by applying `tintColor` and `progressViewOffset` props to `_refreshControl` in `RCTPullToRefreshViewComponentView.mm` class.
Fixes https://github.com/facebook/react-native/pull/46628
## Changelog:
[IOS][FIXED] - Fix applying of tintColor and progressViewOffset props for RefreshControl component with New Architecture enabled
Pull Request resolved: https://github.com/facebook/react-native/pull/46628
Test Plan:
1. Run rn-tester app with New Architecture enabled on iOS
2. Open screen of RefreshControl component:
<img width="300" alt="Снимок экрана 2024-09-24 в 19 48 49" src="https://github.com/user-attachments/assets/94a2d02d-f3e3-4e18-a345-87c22d4a2620">
3. Open `/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js` file and change properties `tintColor` and `progressViewOffset` of RefreshControl components on the line 85:
<img width="300" alt="Снимок экрана 2024-09-24 в 22 01 19" src="https://github.com/user-attachments/assets/425826a6-d34c-4316-8484-e65f125a8b28">
4. check that your changes applied:
<img width="300" alt="Снимок экрана 2024-09-24 в 19 54 46" src="https://github.com/user-attachments/assets/b97621f1-b553-48c9-bc81-e04a99a7e099">
Reviewed By: cortinico
Differential Revision: D63381050
Pulled By: cipolleschi
fbshipit-source-id: 4f3aed8bd7a1e42ce2a75aa19740fd8be1623c86
Summary:
This change fixes the workflow by using the right URL. I also added some logging for debugging.
## Changelog:
[Internal] - Fix Trigger E2E tests workflow
Pull Request resolved: https://github.com/facebook/react-native/pull/46653
Test Plan: Tested the script locally and verified that it triggers the workflow.
Reviewed By: cortinico
Differential Revision: D63452098
Pulled By: cipolleschi
fbshipit-source-id: f44956071edb68046ed1cb74e286e8edbe0eb23a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46620
The following error was thrown when the test `packages/metro/src/integration_tests/__tests__/server-test.js` was running on Metro:
{F1816961963}
It led me to investigate why don't we wait for Metro to be torn down.
Currently we close metro by closing the http server that it launches.
```
const httpServer = await Metro.runServer(/* ... */);
httpServer.close(callback);
```
While we can listen to the callback fired when the server is closed, it only covers one of the systems running internally in metro. The systems that are not covered are:
* File watchers
* File map workers
* Dependency graph
* Bundler
And many systems that were themselves listening to the above like "eslint file map" or the "dependency analysis".
**These systems are closed by us _after_ the server is closed.** This means that a listener to `server.on('close'` would only get the indication where these systems has started to close rather than actually got closed.
https://www.internalfb.com/code/fbsource/[17e03bc6bd86]/xplat/js/tools/metro/packages/metro/src/index.flow.js?lines=359-361
This diff introduces a way to wait for all of metro to be closed.
In this diff I use that new way of listening to Metro closure to get rid of the jest test warning mentioned above in `packages/metro/src/integration_tests/__tests__/server-test.js`:
```
let serverClosedPromise;
beforeEach(async () => {
config = await Metro.loadConfig({
config: require.resolve('../metro.config.js'),
});
let onCloseResolve;
serverClosedPromise = new Promise(resolve => (onCloseResolve = resolve));
httpServer = await Metro.runServer(config, {
reporter: {update() {}},
onClose: () => {
onCloseResolve();
},
});
});
afterEach(async () => {
httpServer.close();
await serverClosedPromise;
});
```
Changelog: [Feature] add `onClose` to `Metro.runServer` configuration allowing to wait for metro and all associated processes to be closed.
Reviewed By: huntie
Differential Revision: D61594124
fbshipit-source-id: e3c50ef986077503bce0caa42a9f9430efc65272
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46632
Changelog: [General][Added] Add Playground to RNTester for testing out features & submitting reproducers.
**Context**
- Adding the Playground from Catalyst to RNTester
- This should help folks test React Native features for a particular version
**Change**
- Add a new playground component to RNTester
- Add a new reducer action for opening an example from navbar press
- Fixed typing issues
- Add icon from this fb asset pack: https://www.internalfb.com/assets/set/facebook_icons/nucleus-beaker/variant_outline-size_24?q=beaker
- Matched background color using this imagemagick script
**dark**
```
convert input.png -fill 'rgb(178,180,186)' -colorize 100% output.png
```
**light**
```
convert input.png -fill 'rgb(81,82,84)' -colorize 100% output.png
```
Reviewed By: NickGerleman
Differential Revision: D61972594
fbshipit-source-id: 4a5523a84a6ef09d3266d5f56825907bd3fbe4b5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46638
This is annoying, but in the next diff that fixes a bug I need to test using the default warning filter instead of a mock (really, all this mocking is terrible, idk why I did it this way).
Unfortunately, in Jest you can't just reset mocks from `jest.mock`, `restoreMocks` only resets spies and not mocks (wild right).
So in this diff I converted all the `jest.mock` calls to `jest.spyOn`. I also corrected some of the mocks that require `monitorEvent: 'warning',` like the warning filter sets.
I also added a test that works without the fix.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D63349615
fbshipit-source-id: 4f2a5a8800c8fe1a10e3613d3c2d0ed02fca773e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46636
Adds more integration tests for LogBox (currently incorrect, but fixed in a later diff).
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D63349614
fbshipit-source-id: 8f5c6545b48a1ed18aea08d4ecbecd7a6b9fa05a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46639
These tests were skipped when we were switching to component stacks, which also hid a bug later in the stack. Re-enable them.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D63349616
fbshipit-source-id: ccde7d5bb3fcd9a27adf4af2068a160f02f7432a
Summary:
X-link: https://github.com/facebook/yoga/pull/1701
Pull Request resolved: https://github.com/facebook/react-native/pull/46630
I would like to write some tests for box sizing that will drive a lot of my development as I implement content box. To do that, I need this publicly exposed. Obviously not that ideal since this currently does not do anything. Maybe we can name the value in such a way that its clear it is in development?
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D63135970
fbshipit-source-id: 7520823bf925364eae45341531e012e80ec92284
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46629
If we clipped and had no border or corner radius we would end up hitting this path every time. We can optimize this a bit to avoid that.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D63299597
fbshipit-source-id: 90031f964b7669049a4a2efe00a553c888d28cd7
Summary:
This PR fixes the retrieval of react native package name to retrieve it from package.json.
This fixes the annoying message in codegen that poped up when installing pods:
```
[Codegen] Found react-native-macos
[Codegen] CodegenConfig Deprecated Setup for react-native-macos.
The configuration file still contains the codegen in the libraries array.
If possible, replace it with a single object.
BEFORE:
{
// ...
"codegenConfig": {
"libraries": [
{
"name": "libName1",
"type": "all|components|modules",
"jsSrcsRoot": "libName1/js"
},
{
"name": "libName2",
"type": "all|components|modules",
"jsSrcsRoot": "libName2/src"
}
]
}
}
AFTER:
{
"codegenConfig": {
"name": "libraries",
"type": "all",
"jsSrcsRoot": "."
}
}
```
## Changelog:
[GENERAL] [CHANGED] - get react-native package name from package.json in codegen script
Pull Request resolved: https://github.com/facebook/react-native/pull/46604
Test Plan: Install pods
Reviewed By: cortinico
Differential Revision: D63335543
Pulled By: arushikesarwani94
fbshipit-source-id: 0470e54f0fc7aa962918c889855c52648d11e32d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46634
The PointerEventPointerOverOut.js test case is broken due to a changed assumption about the name of the native tag property (`_nativeTag` vs. `__nativeTag`). This fixes the broken assumption.
## Changelog
[General][Fixed] Fixed issue with W3C PointerEvents tests
Reviewed By: NickGerleman
Differential Revision: D63336621
fbshipit-source-id: b54270f1c1232de6845ef73cac52f06b9a85539c
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46617
This changes fixes the Increment/Decrement accessibility actions on iOS with the New Architecture.
## Changelog
[iOS][Fixed] - Make sure that the Increment and Decrement accessibility actions works on iOS
Reviewed By: javache
Differential Revision: D63263830
fbshipit-source-id: 99dca14a002e098db2d3b0e268af32cdab6ce786
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46603
Was debugging this test for the mounting instruction changes, and found some opportunities to clean this up.
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D63258342
fbshipit-source-id: f7e6be58474f112993232ce5859ccb160f050ae8
Summary:
A typo means TextLayoutManager will incorrectly measure text as if `LineBreaker.HYPHENATION_FREQUENCY_NORMAL` is set, instead of the correct default of `LineBreaker.HYPHENATION_FREQUENCY_NONE` which we use to display the `TextView`. This causes truncation if hyphenation would have caused text to be shorter than if not hyphenated. Fix the typo.
Changelog: [Android][Fixed] - Fix measuring text with incorrect hyphenationFrequency
Reviewed By: mellyeliu
Differential Revision: D63293027
fbshipit-source-id: baaf2ae2676548cf0815ae96e324af273be6f99e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46586
When Paint.strokeWidth is set to 0 its not actually 0 but "hairline mode" so the fix is just to make outline not draw at all when outlineWidth = 0 {F1879399325}
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D63136220
fbshipit-source-id: 81ef7ce0b72158c6b7c332191d332008c5a919b4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46598
Changelog: [General][Changed] - Bring back shouldSkipStateUpdatesForLoopingAnimations feature flag
Facebook
Also bring back `skip_state_updates_for_looping_animations` MC. This will allow the experiment to participate in a holdout properly.
Reviewed By: GijsWeterings
Differential Revision: D63252185
fbshipit-source-id: 89bc9321b12f07bd9b3b52c4fc1021d34594ebc0
Summary:
On iPadOS, users can change the kind of keyboard displayed onscreen, going from normal keyboard, to split keyboard (one half on the left of the screen, one half on the right), or a floating keyboard that you can move around the screen.
When a non-normal kind of keyboard is used, `<KeyboardAvoidingView>` calculations are all wrong and, depending on the `behavior` prop, can make your screen completely hidden.
This PR attempts to detect that the keyboard is not the "normal displayed-at-bottom-of-screen" keyboard, and forces `enable={false}` if this happens.
The approach of comparing the keyboard width with the window width comes from this comment: https://github.com/facebook/react-native/issues/29473#issuecomment-696658937
A better fix might be to detect the kind of keyboard used, but this involves native code changes and I do not know iOS enough to do that. In addition, I have not found an easy way to do it using iOS APIs after a quick search.
I also chose to cache the window width as a class attribute. Maybe this is not needed as `Dimensions.get('window').width` is very fast and can be called on every keyboard event?
This fixes https://github.com/facebook/react-native/issues/44068 and https://github.com/facebook/react-native/issues/29473
## Changelog:
[IOS] [FIXED] - Fix `<KeyboardAvoidingView>` with floating keyboard on iPadOS
Pull Request resolved: https://github.com/facebook/react-native/pull/44859
Test Plan:
Tested using RNTester and the "Keyboard Avoiding View with different behaviors" example.
Before:
https://github.com/facebook/react-native/assets/42070/111598a3-286c-464d-8db8-73afb35cd7f9
After:
https://github.com/facebook/react-native/assets/42070/0b3bc94f-8b67-4f42-8a83-e11555080268
Reviewed By: cortinico
Differential Revision: D62844854
Pulled By: cipolleschi
fbshipit-source-id: 577444be50019572955a013969d78178914b5b8d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46590
This API should not be part of the ShadowView header, since the class is only used by Differentiator. The ShadowView header should contain public API's that the mounting layer can consume.
Changelog: [Internal]
Reviewed By: sammy-SC
Differential Revision: D63148522
fbshipit-source-id: 0545777fd311424ccd2d66de8b47b5591e8175f7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46589
This is a useful too for debugging ShadowTree mutations, but was broken due to some recent build changes.
Changelog: [Internal]
Reviewed By: sammy-SC
Differential Revision: D63099720
fbshipit-source-id: 9ae5ee062ef9a6a99b2517e4eedd286cd6259fbe
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46597
Changelog: [internal]
Adding explicit metadata to feature flags so they're easier to manage:
* Purpose: to indicate why the feature flags are added.
* Release: gating features we don't want to expose in certain environments yet (e.g.: Fabric).
* Experimentation: changes that we want to test before enabling them broadly. Should generally be short lived.
* Operational: flags that enable certain behaviors in certain environments (e.g.: debugging logs).
* Date added: only for experimental flags, so we know how long we've been waiting to fully roll out the change (without having to go through the repository history, which could've been changed due to refactors).
Reviewed By: javache
Differential Revision: D62972237
fbshipit-source-id: ab51e989a2cddb8dc52197238b638609d30002f0
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46567
Switch to a simpler data structure which avoids locking and doesn't require copies when iterating. This is more consistent with other listener arrays in React Native.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D62872893
fbshipit-source-id: b0ce6a904d25057f0217f7de7ec2928c8b2d1f34
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46542
If `bufferedRuntimeExecutor_` is referenced beyond the lifetime of the ReactInstance, it may point to invalid memory. RuntimeScheduler already holds weak references to the actual runtime, so it's safe to retain that instead.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D62748768
fbshipit-source-id: 1cd8fcb050dd561e7d54a11d91c89eda3a5ddaaa
Summary:
This PR is a quality-of-life improvement, adds colors to codegen output:
Makes it a lot easier to grasp what's going on in the actions taken by codegen.
## Changelog:
[GENERAL] [ADDED] - Add color formatting to codegen output
Pull Request resolved: https://github.com/facebook/react-native/pull/46557
Test Plan:
1. Run codegen
2. Expect colored output
Reviewed By: christophpurrer
Differential Revision: D63031248
Pulled By: cipolleschi
fbshipit-source-id: e86bc72f16582562dc9f1e3b55dc69af4c7838f5
Summary:
Add tests to simplify running Maestro e2e tests locally.
Thanks to these scripts, users can just, from the root folder:
```sh
yarn install
cd packages/rn-tester
# build android for testing
yarn e2e-build- android
# run tests on android
yarn e2e-test-android
# build iOS for testing
yarn e2e-build-ios
# run tests on iOS
yarn e2e-test-ios
```
This is a preliminary step for a future umbrella issue. We can also use these command in CI to simplify the scripts.
## Changelog:
[Internal] - add script to simplify e2e testing
Pull Request resolved: https://github.com/facebook/react-native/pull/46545
Test Plan: Tested the command locally
Reviewed By: cortinico
Differential Revision: D62879105
Pulled By: cipolleschi
fbshipit-source-id: 6f68aebb3f8112302a458ca9e118180d3dbaf180
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46576
We automatically add this handler in `addAnimatedEventToView` but we do not remove it in `removeAnimatedEventFromView`, which causes us to leak it. This is especially bad as we attach and detach the event handler multiple times while rendering.
Changelog: [Internal]
Reviewed By: tdn120
Differential Revision: D63029768
fbshipit-source-id: 9ef2bc6887fecb7ab448af4dee94463f8be27768
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46544
Experiments with `completeReactInstanceCreationOnBgThreadOnAndroid` have shown a native crash in this code path, but it also existed previously.
I believe this is due to the ordering of ReactInstance teardown: we first destroy the ReactInstance, and only then destroy the reference to it in mCreateReactInstanceTaskRef. When using the immediate executor and completeReactInstanceCreationOnBgThreadOnAndroid, we read the react instance from the task, which may no longer be valid at this point. Resetting the task at the earliest point should mitigate the issue.
Changelog: [Internal]
Reviewed By: markv
Differential Revision: D62872625
fbshipit-source-id: 5aaccd53433ca806d2b93f7e3dd2bcf9bf8c09a8
Summary:
This change setups homebrew on Ubuntu. Due to https://github.com/actions/runner-images/issues/6283, brew is not in the PATH anymore.
## Changelog:
[Internal] - Setup homebrew in ubuntu machine
Pull Request resolved: https://github.com/facebook/react-native/pull/46575
Test Plan: Can't test before it lands. :(
Reviewed By: cortinico
Differential Revision: D63027253
Pulled By: cipolleschi
fbshipit-source-id: e0b3a3c1a2a7b0659f0c1f57c45d8d42a74734a1
Summary:
This change configure the Test All job to enable the E2E tests with an input parameter.
Then it adds another workflow that is triggered on PRs when someone posts the "/test-e2e" comment.
## Changelog:
[Internal] - Let users run E2E tests on a specific PR comment
Pull Request resolved: https://github.com/facebook/react-native/pull/46572
Test Plan: This kind of things can only be tested once the PR lands, as workflows that are triggered by comments runs only from the main branch.
Reviewed By: cortinico
Differential Revision: D63021786
Pulled By: cipolleschi
fbshipit-source-id: 95b271f6de658ca208c773429fedef2a36417752
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46559
There is an edge case when we navigate away from a screen that contains a scroll view where one of the UISCrollViewDelegates does not implement the scrollViewDidEndDecelerating method.
This happens because the Macro used assumes that the event that we are forwarding is the actual method from where the macro is called. Which is not true when it comes to `didMoveToWindow`.
This change fixes that by explicitly expanding the macro in this scenario and passing the right selector.
## Changelog:
[iOS][Fixed] - Fixed a crash when navigating away from a screen that contains a scrollView
## Facebook
This should fix T201780472
Reviewed By: philIip
Differential Revision: D62935876
fbshipit-source-id: e29aadf201c8066b5d3b7b0ada21fa8d763e9af0
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46560
The `init` command should still keep on working till 2024-12-31
This handles this scenario as currently `npx react-native@next init` is broken.
Changelog:
[Internal] [Changed] - Clarify init behavior for 0.76
Reviewed By: huntie, cipolleschi
Differential Revision: D62958747
fbshipit-source-id: ce3d974df55162720d59a7ece7fcb816e257185d
Riccardo Cipolleschi
tutejsy
Oskar Kwaśniewski
David Vacca
Vitali Zaidman
Michael Troger
Shawn Dempsey
Rick Hanlon
Joe Vilches
Blake Friedman
Hailey
Eric Rozell
Pieter De Baets
Nicola Corti
Nick Gerleman
Jorge Cabiedes Acosta
Dmitry Rykun
Renaud Chaput
Rubén Norte
Jakub Piasecki
Thomas Nardone
zhongwuzw
Alex Hunt