Summary:
occured -> occurred
## 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
-->
[Internal] [Fixed] - Fixed typo in VirtualizedList-test.js
Pull Request resolved: https://github.com/facebook/react-native/pull/31756
Test Plan: NONE
Reviewed By: lunaleaps
Differential Revision: D29975153
Pulled By: charlesbdudley
fbshipit-source-id: 966d90df0bf015b4a6a2e3b1bf88c66b61161a7a
Summary:
This change adds a series of snapshot tests to validate the render output of VirtualizedList in mixed scenarios. Jest timer mocks are used to measure rendering at different ticks. These test cases mostly center around realization logic, to help prevent regressions when chaning internal state representation.
## 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
-->
[Internal] [Added] - Add unit tests for VirtualizedList render quirks
Pull Request resolved: https://github.com/facebook/react-native/pull/31401
Test Plan: Ran the added UTs locally.
Reviewed By: lunaleaps
Differential Revision: D28017750
Pulled By: rozele
fbshipit-source-id: df9684c4ac80a8732f3e88e7496815127213832e
Summary:
A CellRenderMask helps track regions of cells/spacers to render. It's API allows adding ranges of cells, where its otput be an ordered list of contiguous spacer/non-spacer ranges.
The implementation keeps this region list internally, splitting or merging regions when cells are added. This output will be used by the render function of a refactored VirtualizedList.
## 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
-->
[Internal] [Added] - Add "CellRenderMask" Region Tracking Structure
Pull Request resolved: https://github.com/facebook/react-native/pull/31420
Test Plan: Validated via UTs.
Reviewed By: lunaleaps
Differential Revision: D28293161
Pulled By: rozele
fbshipit-source-id: a5e4e2144a90387aabe0974650429018440abf67
Summary:
Changelog:
[Internal][Changed] - Remove keyExtractor from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
[General][Changed] - Remove data as a prop for VirtualizedSectionList. In the reactnative.dev docs it mentions that sections is the equivalent for *SectionList: https://reactnative.dev/docs/sectionlist#sections
[General][Changed] - Change export type of VirtualizedSectionList and wrap component updates in act in test.
[Internal] - Remove FlowFixMe from VirtualizedSectionList
Reviewed By: kacieb
Differential Revision: D27271493
fbshipit-source-id: f83bdcce9c71c140c8a8fb6f0ecd9bb520fcb85b
Summary:
Changelog:
[Internal][Changed] -Remove keyExtractor from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969588
fbshipit-source-id: b00922a339cbe471fcbf560ab4abdd9e48eda1fc
Summary:
Changelog:
[Internal][Changed] -Remove updateCellsBatchingPeriod from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969581
fbshipit-source-id: b1d1d18d575d9a6af2e68fe564d221849094f26b
Summary:
Changelog:
[Internal][Changed] -Remove windowSize from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969589
fbshipit-source-id: da6215ee3876c8f186d59f91ef6fd94396366119
Summary:
Changelog:
[Internal][Changed] -Remove onEndReachedThreshold from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969584
fbshipit-source-id: 03968c5831587f9ed60dc52c55c55c0980f20cbd
Summary:
Changelog:
[Internal][Changed] -Remove maxToRenderPerBatch from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969582
fbshipit-source-id: 64a07aae11f0403b01c01896b4f83565da6ecf43
Summary:
Changelog:
[General][Changed] - Change VirtualizeUtils to use ESM and change function signature on `computeWindowedRenderLimits` as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969586
fbshipit-source-id: cd1961a2088d37543dbc9bca8c4a062cdb426a35
Summary:
Changelog:
[Internal][Changed] - Remove initialNumToRender from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969585
fbshipit-source-id: 8674544c06b7b99eee693cc7508c9e4199232e98
Summary:
Changelog:
[Internal][Changed] - Remove horizontal from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969583
fbshipit-source-id: c21ac15a220a68a58e32b78dcc37c053756b72cf
Summary:
Changelog:
[Internal][Changed] - Remove disableVirtualization from defaultProps as part of larger effort to remove defaultProps from VirtualizedList
Reviewed By: nadiia
Differential Revision: D26969587
fbshipit-source-id: 662fa620bc5b6b9a64c1906f62dae1f4b373a23b
Summary:
See https://github.com/react-native-community/discussions-and-proposals/pull/335 for extra context.
A VirtualizedList may have sticky headers, forwarded on to ScrollView. These sticky headers are exempt from virtualization once realized for the first time. This change documents the behavior of keeping sticky header cells realized after scrolling away.
This scenario performs the same behavior as creating an internal "realization window" for sticky headers with a single cell window size. Generalizing the concept of realization windows should be shaped to support the existing sticky header scenario.
## 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
-->
[Internal] [Added] - Add tests describing current sticky header realization behavior
Pull Request resolved: https://github.com/facebook/react-native/pull/31075
Reviewed By: lunaleaps
Differential Revision: D26767582
Pulled By: appden
fbshipit-source-id: 0d151bd6046fcb5384c646205aafa1ca7edf6c77
Summary:
With nested FlatLists, three methods aren't firing: `onMomentumScrollBegin`, `onMomentumScrollEnd`, and `onScrollDragEnd`. This is because the nested child lists' methods are not being called.
This copies the solution for this from `onScrollBeginDrag` to the other three methods.
Changelog: [Fixed] Fix nested FlatList not firing onScrollDragEnd and onMomentum methods
Reviewed By: nadiia
Differential Revision: D24803418
fbshipit-source-id: 8685b1ab9f1bd5f67a88d93ac5de628d4bd69024
Summary:
I refined the error message of scrollToIndex.
When I used scrollToIndex with `index:0` and data that length is 0, I met the odd error message `Invariant Violation scrollToIndex out of range: requested index 0 but maximum is -1`.
Next, I thought that scrollToIndex with `index:-1` meant scrollToTop without checking data length. I met `Invariant Violation: scrollToIndex out of range: requested index -1 but maximum is -1`
Finally, I wondered what will happen to use scrollToIndex with `index:-1` and data that length is `5`. The result is `Invariant Violation: scrollToIndex out of range: requested index -1 but maximum is 5`
The above error messages will confuse us. I clarified the boudaries and separated the error messages
## Changelog
[General] [Fixed] - Clarified the boundaries in error message of scrollToIndex
Pull Request resolved: https://github.com/facebook/react-native/pull/28464
Test Plan:
I added 3 test cases to cover the new error messages for VirtualizedList.
Run `yarn test` and confirm it passes.
Reviewed By: cpojer
Differential Revision: D21140133
Pulled By: TheSavior
fbshipit-source-id: 9a7a704f7ec599d833d2ed3ca2be059d950539b5
Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.
Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />
const innerViewRef = myRef.current.getNativeScrollRef();
innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />
// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();
// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```
Changes:
* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).
Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests
Changelog:
[General] [Changed] - Make ScrollView use forwardRef
Reviewed By: TheSavior
Differential Revision: D19304480
fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
Summary:
This gets us on the latest Prettier 2.x:
https://prettier.io/blog/2020/03/21/2.0.0.html
Notably, this adds support for TypeScript 3.8,
which introduces new syntax, such as `import type`.
Reviewed By: zertosh
Differential Revision: D20636268
fbshipit-source-id: fca5833d003804333a05ba16325bbbe0e06d6c8a
Summary:
This diff regenerates all Jest inline snapshots (`expect().toMatchInlineSnapshot()`) now that we use Jest 24.9.0 which fixes a longstanding [formatting instability bug](https://github.com/facebook/jest/issues/8424).
This is strictly a formatting change.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D19684238
fbshipit-source-id: 77c1e5fe9d2dfef85dffdcc00056fb439d7d7f84
Summary:
## Context
When a `VirtualizedList` contains a cell which itself contains more than one `VirtualizedList` of the same orientation as the parent list, we log an error if sibling lists in a cell don't have unique `listKey`s (e.g. when the `listKey` prop isn't explicitly set). In release builds, this error does not have a component stack - nor a useful call stack - so it can be hard to track down the true source of the error in complex applications.
## This diff
Here, in addition to the generic error message, we also print the `listKey`, `cellKey` and orientation of each `VirtualizedList` in the hierarchy, from the child list upwards. This is done without significant overhead, by reusing the already-in-place context that `VirtualizedList`s use to manage nesting.
The assumption is that common strategies for deriving `listKey`s and `cellKey`s will make it possible to identify at least some lists in the hierarchy in common cases, and therefore help narrow down the search space even when component stacks are not available.
## Example
(See code in unit test)
```
A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.
VirtualizedList trace:
Child (horizontal):
listKey: level2
cellKey: cell0
Parent (horizontal):
listKey: level1
cellKey: cell0
Parent (vertical):
listKey: level0
cellKey: rootList
```
Changelog: [Internal]
Reviewed By: TheSavior
Differential Revision: D19600366
fbshipit-source-id: 73f29507ec58a6a3f9b3f6b174a32b21dcd237a1
Summary:
Fixes https://github.com/facebook/react-native/issues/16067
The issue is due to a race between `onLayout` and `onContentSizeChange`, which in general should be fine because there is no expectation of ordering between the two, and only causes issues with certain configurations.
The bug can be triggered if `initialNumToRender` is smaller than needed to fill past the `onEndReachedThreshold` (say the default, 10, is only 580px tall, but it takes 15 to reach the threshold). This will cause an incrementally render of more items to try and fill the viewport. The problem is that if the `onLayout` comes back before the first `onContentSizeChange`, it will first do the state increment to render 20 items and then the stale `onContentSizeChange` callback from 10 items will fire and we'll think that the content size for 20 items is 580px when in fact it's 1160px (which is past the threshold). If those 20 items are also all of our available data, then we'll call `onEndReached` because we think we've rendered everything and are still within the `onEndReachedThreshold`.
The fundamental problem here is the system getting confused when a stale async `onContentSizeChange` comes in after increasing `state.last`. I wish there was a concrete timeframe, but Fabric will give us more flexibility to do things synchronously so hopefully we can avoid class of issues once that roles out.
The fix here simply adds a check to make sure `contentLength` has been set before adjusting the render window so it's not possible to increase the window size before the initial `onContentSizeChange` callback fires.
For completeness, there are a few user-code workarounds to avoid this issue entirely:
1) Provide the `getItemLayout` prop so the list doesn't have to rely on async layout data (you should do this whenever possible anyway for better perf). e.g. for the original snack example, you can just add `getItemLayout={(d, index) => ({length: 58, offset: 58 * index, index})}` since all the rows are height 58 and the issue will no longer repro. Note this is fragile and must be kept in sync with UI changes, a11y font scaling, etc - a more robust approach could be to render a single representative row offscreen and measure it with `onLayout` then use that value.
2) If `getItemLayout` is not feasible to compute for your UI, increase `initialNumToRender` to cover the `onEndReachedThreshold`.
3) And/or add your own logic to protect against extra calls to `onEndReached` as others have suggested.
Changelog:
[General][Fixed] - Fix sporadic issue with onEndReached called on load when not needed
# Test Plan
Adds a new jest test that fails without this fix and succeeds with it.
Reviewed By: TheSavior
Differential Revision: D18966721
fbshipit-source-id: de05d9f072e24a2faf351e7f5d60578a31def996
Summary:
Add a method to get the underlying host component of `FlatList`. Fix flow types in `FlatList` and `VirtualizedList`. Add test cases to test the behavior of the new function in all cases.
Changelog: [General] [Added] - Add getNativeScrollRef method to FlatList component
Reviewed By: TheSavior
Differential Revision: D18302202
fbshipit-source-id: 7005a2bc1dab207434be3f1f4d8fde0b11b3bb4d
Summary:
Cleans up all the Jest tests to minimize spurious console output.
Changelog:
[Internal]
Reviewed By: TheSavior
Differential Revision: D18289690
fbshipit-source-id: cdcecca879b3b85d3dccf9e0ab617ea7dc1e0777
Summary:
These props are unusupported by the component they were being passed to.
Changelog:
[Internal]
Reviewed By: zackargyle
Differential Revision: D17839765
fbshipit-source-id: 13c80a07da2026b61070ffc93f26194b979ee8fc
Summary:
`<VirtualizedList />` will throw an error if the `renderItem` Prop component uses hooks. Function components without hooks and class components work without issue.
Super contrived Example
```{js}
function FlatListItem({ item }) {
React.useEffect(() => console.log(item),[])
return (<Text>{item}</Text>);
}
<FlatList data={[1, 2, 3]} renderItem={FlatListItem} />
```
Example Error:
```
Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
This error is located at:
in CellRenderer (at VirtualizedList.js:688)
in RCTScrollContentView (at ScrollView.js:976)
in RCTScrollView (at ScrollView.js:1115)
in ScrollView (at VirtualizedList.js:1081)
in VirtualizedList (at FlatList.js:632)
in FlatList (at WithoutScrollbars.js:21)
...
```
## Changelog
[General] [Added] - VirtualizedList ListItemComponent. An alternative to renderItem that accepts function components with hooks.
[General][Added] - FlatList ListItemComponent. An alternative to renderItem that accepts function components with hooks.
[General][Added] - VirtualizedList and FlatList tests and updated RNTester example
Pull Request resolved: https://github.com/facebook/react-native/pull/24832
Reviewed By: sahrens
Differential Revision: D15334020
Pulled By: cpojer
fbshipit-source-id: 882db722fd6e22f07260b08091b3456d1c66c2c8
Summary:
This is the next step in moving RN towards standard path-based requires. All the requires in `Libraries` have been rewritten to use relative requires with a few exceptions, namely, `vendor` and `Renderer/oss` since those need to be changed upstream. This commit uses relative requires instead of `react-native/...` so that if Facebook were to stop syncing out certain folders and therefore remove code from the react-native package, internal code at Facebook would not need to change.
See the umbrella issue at https://github.com/facebook/react-native/issues/24316 for more detail.
[General] [Changed] - Migrate "Libraries" from Haste to standard path-based requires
Pull Request resolved: https://github.com/facebook/react-native/pull/24749
Differential Revision: D15258017
Pulled By: cpojer
fbshipit-source-id: a1f480ea36c05c659b6f37c8f02f6f9216d5a323
Summary: Android scrolling performance is very poor with this disabled. iOS has some KP with this enabled, so disable it for iOS.
Reviewed By: sahrens
Differential Revision: D13363494
fbshipit-source-id: efab77b5db9676dd0521ae4193465d45ac34dda3
Summary: This change drops the year from the copyright headers and the LICENSE file.
Reviewed By: yungsters
Differential Revision: D9727774
fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
Summary:
We ran into a problem trying to style the optional prop `ListHeaderComponent` in the `FlatList` library component. Essentially we wanted to make `ListHeaderComponent` a flex item that filled all of the empty space in the list if there was any. Unfortunately the `ListHeaderComponent` is later wrapped in a `View` that blocked our styling. The `View` component was necessary as it added styling to handle inverting the `FlatList`. Similarly `ListFooterComponent` was handled the same way.
We came up the simple solution of adding two new optional props, `ListHeaderComponentStyle` and `ListFooterComponentStyle`, that are of type `ViewStyleProp` that allow users to pass in styling for `ListHeaderComponent` and `ListFooterComponent`.
With this change we were able to do something like the following to get the header component to fill all empty space in the `FlatList`.
```
<FlatList
...
contentContainerStyle={{flexGrow: 1}}
ListHeaderComponent={<View style={{flex: 1}} />}
ListHeaderComponentStyle={{flexGrow: 1}}
...
/>
```
This solution will give users a lot more freedom when working with headers and footers.
Reviewed By: sahrens
Differential Revision: D8777038
fbshipit-source-id: f34116ce68548ea70223e639d0f84a099327f6b3
Summary:
Jest will now exclude undefined props from snapshots (https://github.com/facebook/jest/pull/6162). Updating the snapshots should fix the current `test_javascript` failures.
Circle CI
[INTERNAL][MINOR][Snapshots] - Update snapshots
Closes https://github.com/facebook/react-native/pull/19414
Differential Revision: D8125193
Pulled By: hramos
fbshipit-source-id: db8dcfcd8afbf9d6256f83c6e922680a7872d776
Summary:
StrictMode compliance is important for Async Rendering and other Future Tech(tm).
Also clean up some lint.
== Test Plan ==
* No more StrictMode warnings for `FlatList` (`VirtualizedList` is another story....).
* props warnings still show up when appropriate.
Reviewed By: sophiebits
Differential Revision: D8026333
fbshipit-source-id: e6fa2f02d546b883df6f3cff8776c26c6ef91bc9
Summary:
A common UI pattern for list empty states is some text/images centered inside the visible part of the list. This is pretty hard to do currently because we wrap ListEmptyComponent with an extra view with no way to style it so we cannot just use `flex: 1` to make it fill the available space.
- Added an example of ListEmptyComponent in the FlatList example in RNTester
Before (no way to make ListEmptyComponent fill the space):
<img width="377" alt="screen shot 2018-03-05 at 5 24 15 pm" src="https://user-images.githubusercontent.com/2677334/37003152-129db3ac-209a-11e8-9600-110f10d57144.png">
After:
<img width="377" alt="screen shot 2018-03-05 at 5 09 20 pm" src="https://user-images.githubusercontent.com/2677334/37002809-e6971178-2098-11e8-8cf7-74bfb2f6a992.png">
- Tested some edge cases like returning null from the ListEmptyComponent
- Tested in an app that uses FlatList + ListEmptyComponent
[GENERAL] [MINOR] [VirtualizedList] - Don't wrap ListEmptyComponent in an extra view
Closes https://github.com/facebook/react-native/pull/18206
Differential Revision: D7266274
Pulled By: sahrens
fbshipit-source-id: 4636d2418474a4c86ac63e5e18a9afc391a518c5
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.
find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.
Reviewed By: TheSavior, yungsters
Differential Revision: D7007050
fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
Ikko Ashimine
Nick Gerleman
Luna Wei
Jimmy Zhang
Kacie Bawiec
Daiki Ihara
George Zahariev
Michael Bolin
Moti Zilberman
Spencer Ahrens
Tim Yung
david
Andres Suarez
Eli White
Vojtech Novak
Min ho Kim
Alan Kenyon
James Ide
Jérémy M
AntoineDoubovetzky
michalchudziak
Ignacio Olaciregui
Fred Liu
Héctor Ramos
Michael Ficaro
Janic Duplessis
Sophie Alpert
