Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51403
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74891875
fbshipit-source-id: 981e85b5da84950c9e66e8d6b6496019e536711d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51399
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: rubennorte
Differential Revision: D74888097
fbshipit-source-id: a22ca4b791153ff0c2f4ab34ff8e3ce5e9280e0d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51311
changelog: [internal]
add a test case for view culling to cover a crash observed in production.
Reviewed By: lenaic, rubennorte
Differential Revision: D74720814
fbshipit-source-id: ed1246ccbaa0d0ab51a6073f20642c1c78872f30
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51211
Changelog: [internal]
This modifies the setup for Fantom so:
1. We don't inject "InitializeCore" by default.
2. We define a default environment setup module for Fantom with good defaults (LogBox, etc. disabled).
We also migrate all existing tests to use the new module.
The goal of this is to prevent LogBox from being used in tests so we can properly fix error propagation in the work loop (so they're not intercepted by it).
Reviewed By: rshest
Differential Revision: D69003812
fbshipit-source-id: 00353b5055e3700943a08ea67f698d49e068555b
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51000
changelog: [internal]
# Why so many tests?
Differentiator has two modes: regular and reparenting. The reparenting one is almost a completely separate Differentiator, effectively doubling the complexity. It handles quite a few different special cases and is not covered by any reasonable tests, so here I am adding the tests to make sure every branch of the reparenting Differentiator is traversed.
Reviewed By: lenaic
Differential Revision: D73845746
fbshipit-source-id: 27a9fd72a5f8111b84e231cf8f495e278037a323
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50938
Changelog: [internal]
No more `maybeNode`s. Using ref objects makes the tests cleaner and the JSX easier to read than injecting lambdas.
This speaks for itself:
* 617 lines added
* 1393 lines removed
{F1977434870}
Reviewed By: lenaic
Differential Revision: D73659018
fbshipit-source-id: d1c23e6457bb1d351ce02b9f6fa8778b06ee0e55
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50894
changelog: [internal]
adding more tests to cover all branches of `calculateShadowViewMutationsFlattener`.
calculateShadowViewMutationsFlattener is over 400 lines of code and covers quite a few edge cases. I plan to cover every branch with a test to make it easier to refactor Differentiator in the future.
Reviewed By: rubennorte
Differential Revision: D73543444
fbshipit-source-id: b0b22aba4b9cc4718edd2a6c4535993be437ed9f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50886
changelog: [internal]
Group tests related to reparenting in "describe" block. Differentiator is two algorithms hidden behind a single interface: regular and reparenting. The tests are structured this way as well where regular tests focus on common scenarios and reparenting section focuses on reparenting and special cases around that. The reparenting implementation is considerably more complex as it handles edge cases that don't happen often.
Reviewed By: mdvacca
Differential Revision: D73541053
fbshipit-source-id: c3905a0f0117cb1aa6c468e24e6bb982de48545d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50885
changelog: [internal]
a special case inside of Differentiator handling parent-child switching from unflattened-flattened to flattened-unflattened. If a child has view that is culled, this needs to be handled.
This diff also simplifies the implementation inside of calculateShadowViewMutationsFlattener by passing only one cullingContext.
Reviewed By: mdvacca
Differential Revision: D73523523
fbshipit-source-id: d6f314da6b9ff40bcf3362243b03de1b39e7aabb
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50852
changelog: [internal]
Adding a test to verify view culling in scenario where a subtree is revealed and part of it is culled.
Reviewed By: lenaic
Differential Revision: D73454202
fbshipit-source-id: 6c4fb2ec4757b9ed1460bec8d3f02a661470266f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50260
Changelog: [internal]
Created new directory `react-native/src/private/__tests__/utilities` and moved `ensureInstance` and `isUnreachable` to it.
Reviewed By: yungsters
Differential Revision: D71826787
fbshipit-source-id: 50a50a54ab928c9060282a9f2256ad97dd856ba4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50035
changelog: [internal]
to make it easier to write JSDocs, let's export functions directly from index.js instead of using proxy object.
Reviewed By: rubennorte
Differential Revision: D71200977
fbshipit-source-id: 0b53c0d3f73577c19253537b9e884459a4920643
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50011
changelog: [internal]
Majority of time, you want to simply scroll. This diff introduces a convenience method Fantom.scrollTo.
Previously, you would have to write:
```
Fantom.runOnUIThread(() => {
Fantom.enqueueScrollEvent(element, {
x: 0,
y: 60,
});
});
Fantom.runWorkLoop();
```
Now, you can just do:
```
Fantom.scrollTo(element, {
x: 0,
y: 60,
});
```
Reviewed By: rubennorte
Differential Revision: D71113680
fbshipit-source-id: aed49a2f12be8ab30be549235cc7a2b3e35faadb
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50009
changelog: [internal]
rename method `scrollTo` to `enqueueOnScrollEvent` to make it obvious that event is only enqueued and not executed.
Reviewed By: rubennorte
Differential Revision: D71027761
fbshipit-source-id: 8a22babc2f5e86196c0b0af75ab65d539048dc72
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49992
changelog: [internal]
View culling does not play along with view flattening/unflattening. This diff adds a test case for it + fix. Previously, view culling would crash.
There are still untested branches of view flattening/unflattening where I am trying to come up with test cases.
Reviewed By: rubennorte
Differential Revision: D71047032
fbshipit-source-id: 9f52473743755e49e4bfda0783803cb79591ca27
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49912
Changelog: [internal]
This migrates all Fantom tests to use package-relative imports from `react-native` instead of relative paths.
Note that a lot of the current deep imports (e.g.: `import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'`) will not be necessary when we release those APIs as public.
Reviewed By: sammy-SC
Differential Revision: D70779722
fbshipit-source-id: f0d28e00ca9881dc2a3cd151b75327b26711277e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49860
changelog: [internal]
now that Fantom supports tests with <Modal />, add a test to cover scenario where <ScrollView /> is inside of <Modal />.
Reviewed By: rubennorte, rshest
Differential Revision: D70696834
fbshipit-source-id: 5f51917ac5c6a2cf451906e302ee2b62c15449ea
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49690
Changelog: [internal]
We're shipping this soon and most tests already using DOM APIs to make assertions, so it's easier if we just "ship" in tests.
Reviewed By: javache, sammy-SC
Differential Revision: D69307129
fbshipit-source-id: 75d0be013703cff7bc2bad5cd16c26bc6471e547
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49535
changelog: [internal]
Add a unit test to cover scenario where ScrollView's parent has a transform
Reviewed By: NickGerleman
Differential Revision: D69860855
fbshipit-source-id: 1b64665c5b15ad2e5e068d4c6d56f9694ac7cf03
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49304
changelog: [internal]
View culling must take transform into account when calculating whether a frame is visible or not. This diff adds that.
Reviewed By: NickGerleman
Differential Revision: D69394909
fbshipit-source-id: 4c588a64f2c8e2d35fb7d606d26adc09d3502780
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49198
changelog: [internal]
The work done on the main thread should scale with what is on the screen. React Native shouldn’t block the main thread for off screen elements that do not affect what is shown to the end user. When React schedules a commit, only views needed to achieve a screen full of content should be materialised and added to the host platform’s view hierarchy.
With Fabric View Culling, views that do not contribute pixels to the screen will not materialize and updates to them will be skipped. React Native will focus system resources on what is visible to the end user.
Fabric View Culling maximises benefits from view recycling. Each UI element such as text, image, or video is recycled individually. As soon as an item goes off screen, it can be reused anywhere in the UI and pieced together with other items to create new UI elements. Such recycling reduces the need of having multiple view types and improves memory usage and scroll performance.
In the example bellow, view B will not be mounted because the user can't see it.
{F1974949953}
The difference in number of allocated views:
Please note, the screenshots below are from Xcode View Hierarchy debugger. To show how many views are allocated in memory, I disabled [removeClippedSubviews](https://reactnative.dev/docs/scrollview#removeclippedsubviews) flag globally.
|Before|After:
| {F1974949979}| {F1974949981}
# Disclaimer, this is not a complete implementation
This implementation is not complete and it is missing to handle edge cases.
Things that are missing:
- Transform style is not taken into account.
- removeClippedSubviews is not respected. Fabric View Culling happens unconditionally for every scroll view.
- Fabric View Culling does not respect when ScrollView has overflow set to visible.
- Fabric View Culling is only performant enough on iOS.
- [enableSynchronousStateUpdates](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js#L248) must be enabled for Fabric View Culling to work correctly.
Reviewed By: javache
Differential Revision: D63458372
fbshipit-source-id: c93ec434081f2be8a446212e2c0681f8ae4e90f9
Tim Yung
Samuel Susla
Rubén Norte