Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47340
This diff cleans up some problematic `React.ElementRef<T>` when T is generic type.
Changelog: [Internal]
Reviewed By: alexmckenley
Differential Revision: D65280467
fbshipit-source-id: 71172b16320a10cbc7a8b46dae5d3dd0eb00ba0c
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47109
Fixes the `lint/sort-imports` errors that are now surfaced after fixing the lint configuration.
For a couple files, I added lint suppressions instead because the unsorted import ordering is important due to interleaved calls with side effects.
Changelog:
[Internal]
Reviewed By: GijsWeterings
Differential Revision: D64569485
fbshipit-source-id: 26415d792e2b9efe08c05d1436f723faae549882
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46898
Replaces *many* `Text` component usages with `RNTesterText`: a thin wrapper around `Text` that applies color based on the color scheme chosen by the user. It makes text legible for dark mode across 41 different example files. This changes intentionally do not touch a few larger component sites that expand beyond RNTester, like `Animated` and `NewAppScreen`
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D64053464
fbshipit-source-id: 9516fef2afe1b364eb38e85e3a2dbb5c434e44db
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41051
Strictifies flow to flow strict-local in files where doing that doesn't cause new flow errors.
Changelog: Internal
Reviewed By: yungsters
Differential Revision: D50369011
fbshipit-source-id: b4a5a26b839b7327a3178e6f5b35246dea365a38
Summary:
`maintainVisibleContentPosition` is broken when using virtualization and the new content pushes visible content outside its "window". This can be reproduced in the example from this diff. When using a large page size it will always push visible content outside of the list "window" which will cause currently visible views to be unmounted so the implementation of `maintainVisibleContentPosition` can't adjust the content inset since the visible views no longer exist.
The first illustration shows the working case, when the new content doesn't push visible content outside the window. The red box represents the window, all views outside the box are not mounted, which means the native implementation of `maintainVisibleContentPosition` has no way to know it exists. In that case the first visible view is https://github.com/facebook/react-native/issues/2, after new content is added https://github.com/facebook/react-native/issues/2 is still inside the window so there's not problem adjusting content offset to maintain position. As you can see Step 1 and 3 result in the same position for all initial views.
The second illustation shows the broken case, when new content is added and pushes the first visible view outside the window. As you can see in step 2 the view https://github.com/facebook/react-native/issues/2 is no longer rendered so there's no way to maintain its position.
#### Illustration 1
#### Illustration 2
To fix `maintainVisibleContentPosition` when using `VirtualizedList` we need to make sure the visible items stay rendered when new items are added at the start of the list.
In order to do that we need to do the following:
- Detect new items that will cause content to be adjusted
- Add cells to render mask so that previously visible cells stay rendered
- Ignore certain updates while scroll metrics are invalid
### Detect new items that will cause content to be adjusted
The goal here is to know that scroll position will be updated natively by the `maintainVisibleContentPosition` implementation. The problem is that the native code uses layout heuristics which are not easily available to JS to do so. In order to approximate the native heuristic we can assume that if new items are added at the start of the list, it will cause `maintainVisibleContentPosition` to be triggered. This simplifies JS logic a lot as we don't have to track visible items. In the worst case if for some reason our JS heuristic is wrong, it will cause extra cells to be rendered until the next scroll event, or content position will not be maintained (what happens all the time currently). I think this is a good compromise between complexity and accuracy.
We need to find how many items have been added before the first one. To do that we save the key of the first item in state `firstItemKey`. When data changes we can find the index of `firstItemKey` in the new data and that will be the amount we need to adjust the window state by.
Note that this means that keys need to be stable, and using index won't work.
### Add cells to render mask so that previously visible cells stay rendered
Once we have the adjusted number we can save this in a new state value `maintainVisibleContentPositionAdjustment` and add the adjusted cells to the render mask.
This state is then cleared when we receive updated scroll metrics, once the native implementation is done adding the new items and adjusting the content offset.
This value is also only set when `maintainVisibleContentPosition` is set so this makes sure this maintains the currently behavior when that prop is not set.
### Ignore certain updates while scroll metrics are invalid
While the `maintainVisibleContentPositionAdjustment` state is set we know that the current scroll metrics are invalid since they will be updated in the native `ScrollView` implementation. In that case we want to prevent certain code from running.
One example is `onStartReached` that will be called incorrectly while we are waiting for updated scroll metrics.
## Changelog
[General] [Fixed] - Fix VirtualizedList with maintainVisibleContentPosition
Pull Request resolved: https://github.com/facebook/react-native/pull/35993
Test Plan:
Added bidirectional paging to RN tester FlatList example. Note that for this to work RN tester need to be run using old architecture on iOS, to use new architecture it requires https://github.com/facebook/react-native/pull/35319
Using debug mode we can see that virtualization is still working properly, and content position is being maintained.
https://user-images.githubusercontent.com/2677334/163294404-e2eeae5b-e079-4dba-8664-ad280c171ae6.mov
Reviewed By: yungsters
Differential Revision: D45294060
Pulled By: NickGerleman
fbshipit-source-id: 8e5228318886aa75da6ae397f74d1801d40295e8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37083
`React.ElementConfig<a polymophic type>` will result in unpredictable behavior in Flow due to some types being unresolved. Since the type is already broken in most cases, I use $FlowFixMe as the type for those type arguments that are currently inferred as empty.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D44774275
fbshipit-source-id: bb950379102d41e729593af644d25670d9071ab4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36960
We're deprecating the unsafe `$Shape` and moving to the safe `Partial`: https://fb.workplace.com/groups/flowlang/posts/1251655088773485
I have previously codemodded all locations that do not cause errors. Now start on the remaining ones: codemod and suppress.
Changelog: [Internal]
Reviewed By: SamChou19815
Differential Revision: D45076273
fbshipit-source-id: 27ebf33370143e19751dbdcfcc1876cf3c586e14
Summary:
Right now RNTestePage either adds a large spacer to the end of content, unless `noSpacer` is added. But with `noSpacer`, scrolling content may not be reachable because we are putting padding on the wrong container.
This fixes that and removes a few cases where we had multi hundred px empty space in favor of uniformly taking up the parent, and a 10px padding. This also moves the constant margin at the top of RNTesterBlock to the container, so that in the E2E container we can save the 30px.
Changelog:
[Internal]
Reviewed By: javache
Differential Revision: D44197303
fbshipit-source-id: 8dc67f3588bc28316e2fee8d25a0bc59995f1728
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36345
`exactOptionalPropertyTypes` is a TypeScript 4.4+ option set by users which changes behavior of optional properties, to disable accepting explicit `undefined`.
This is not enabled when using `--strict`, and is stricter than Flow, leading to most of the typings having an `| undefined` unique to TypeScript (added with https://github.com/DefinitelyTyped/DefinitelyTyped/commit/694c663a9486dbe7794d5eb894a691ee9ded318a).
We have not always followed this (I have myself previously assumed the two are equivalent). We can enforce that the convention is followed with a plugin `eslint-plugin-redundant-undefined`. This forces us to declare that every optional property accepts an explicit undefined (which Flow would allow). Alternatively, if we do not want to support this, we can enable the existing dtslint rule `no-redundant-undefined`.
Changelog:
[General][Fixed] - Enforce compatibility with `exactOptionalPropertyTypes`
Reviewed By: lunaleaps
Differential Revision: D43700862
fbshipit-source-id: 996094762b28918177521a9471d868ba87f0f263
Summary:
Add explicit annotations to React hook callbacks as 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.
This diff adds `any` or `$FlowFixMe` in cases where more precise types could not be determined.
Details:
- Codemod script: `.facebook/flowd codemod annotate-react-hooks ../../xplat/js --default-any --write`
- Local Type Inference announcement: [post](https://fb.workplace.com/groups/flowlang/posts/788206301785035)
- Support group: [Flow Support](https://fb.workplace.com/groups/flow)
drop-conflicts
bypass-lint
Reviewed By: SamChou19815
Differential Revision: D41231214
fbshipit-source-id: d5f5ce8d61020baa1138292c9e9f1c69dffd324c
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: 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 predicatable.
Reviewed By: evanyeung
Differential Revision: D37353648
fbshipit-source-id: e5a0c685ced85a8ff353d578b373f836b376bb28
Summary:
Issue https://github.com/facebook/react-native/issues/30964 .When using a screen reader, flatlist does not announce entrance/ exit from the flat list.
## Changelog
[Android] [Changed] - Added support for accessibility role of "list" for flatlist and sectioned list
Pull Request resolved: https://github.com/facebook/react-native/pull/31630
Test Plan: I have added accessibility role prop in flatlist and sectioned list in rntester app, that will announce entrance/ exit from flatlist and sectioned list.
Reviewed By: kacieb
Differential Revision: D29599351
Pulled By: blavalla
fbshipit-source-id: e16ec69a694780d12f15f88a1e6bb5d7d77ac15f
Summary:
Changelog: [Internal] Fix things in RNTester
* Make SectionList-contentInset example iOS only and update styling
* Fix a typo in SectionList-onEndReached example
* Fix module example styling and pressed state styling for Android
Reviewed By: kacieb
Differential Revision: D29571327
fbshipit-source-id: 5cbb68781536e21ca73ca22b01343379306babd4
Summary: Changelog: [Internal] - Move SectionList examples together. An interim state for next diff to add a 3rd level of navigation so each example is rendered in separate surface.
Reviewed By: kacieb
Differential Revision: D29480143
fbshipit-source-id: f7f10920bd4ab938665f17f0a80debaff55b9788
Summary:
Changelog:
[Internal] - Rename some types and components in RNTester to support work for tertiary levels of navigation.
module = component | api
moduleExample = an example of a certain feature a module
Reviewed By: kacieb
Differential Revision: D29381875
fbshipit-source-id: c348bcbb73aaf95e85928bb14080a097e685cc78
Summary:
This pre-suppresses the 153 error diff ahead of its release, since it is large.
Changelog: [Internal]
Reviewed By: mroch
Differential Revision: D28754374
fbshipit-source-id: 1806f53bc7d804644d434583a2dcd6da63d00328
Summary:
Changelog:
[Internal] - RNTester FlatList and SectionList examples to add prop for scrolling to end of list.
Reviewed By: kacieb
Differential Revision: D27816830
fbshipit-source-id: 6b4bd4cb9a651f4a4e9045d600cc219a6ba2e39b
Summary:
# Changelog:
[General][Added] - Added more RNTester examples for FlatList as similar to SectionListExamples.
Reviewed By: kacieb
Differential Revision: D27104601
fbshipit-source-id: 0a2cb24382d42956bacf455fd0a699adb61c7c83
Summary:
Changelog:
[General][Changed] - Updated SectionList example in RNTester
Lists need an explicit height set, otherwise their intrinsic height is the height of the root view. This causes rendering issues as shown in the test plan.
Additionally, refactored to allow visibilityConfig to be passed as prop for future tests.
Reviewed By: kacieb
Differential Revision: D27098086
fbshipit-source-id: b19155de79d00dddc287a1e2f9cdb240f2f31e27
Summary:
# Changelog
[General][Added] - Expand example in RNTester for separators on VirtualizedSectionList to showcase updating props on separator ("has not been pressed" -> "has been pressed")
Reviewed By: nadiia, kacieb
Differential Revision: D26713429
fbshipit-source-id: 21034fab5a80d46c46462c41b0989cc9e4c45d03
Summary:
Changelog:
[General][Added] - Added an example showcasing how separator callbacks work in SectionList for RNTester
Reviewed By: nadiia
Differential Revision: D26575122
fbshipit-source-id: 46710e2647c84bdf083265ce04ba330bd70eb2a7
Summary:
This prop is iOS only.
Changelog:
[iOS][Added] Add an example showing the prop contentInset in SectionList
Reviewed By: lunaleaps
Differential Revision: D26491787
fbshipit-source-id: 31398388081a22ccd17cc256aa174ffe7764e7a9
Summary:
Changelog:
[General][Changed] Refactor how we create test cases for SectionList and update some styling
Reviewed By: kacieb
Differential Revision: D26326600
fbshipit-source-id: d6f62f60fec9a5890db9d00c264b62123d3c723e
Summary:
Changelog:
[General][Added] - Show a test title if set and standardize the output
Note this will break existing screenshot tests so will need to re-run these
Reviewed By: nadiia
Differential Revision: D26318844
fbshipit-source-id: cef48d72a524ccc6f32b9d930c68fe4171270365
Sam Zhou
Tim Yung
Peter Abbondanzo
Fabrizio Cucci
Shawn Dempsey
Oskar Kwaśniewski
Moti Zilberman
Gijs Weterings
Janic Duplessis
George Zahariev
Nick Gerleman
Mike Vitousek
Gabriel Donadel Dall'Agnol
Genki Kondo
fabriziobertoglio1987
Pieter Vanderwerff
Kacie Bawiec
Luna Wei
Moti Zilberman
Andres Suarez
Tim Yung
Evan Yeung
Anas Khurshid
Daniel Sainati
