Summary:
In the current implementation of the `VirtualizedList` the `onViewableItemsChanged` callback wouldn't trigger if the underlying list data changes. (see example snack https://snack.expo.io/Hk5703eBb)
I added a method in the `ViewabilityHelper` to invalidate the cached viewableIndices, which gets triggered when the list-data changes.
Closes https://github.com/facebook/react-native/pull/14922
Differential Revision: D5864537
Pulled By: sahrens
fbshipit-source-id: 37f617763596244208548817d5b138dadc12c75d
Summary: Allows handling the case of wanting to scroll beyond the measured window.
Reviewed By: TheSavior
Differential Revision: D5915331
fbshipit-source-id: 329927632f4d04f213567ce4bbe547b04b8ea86d
Summary:
Previously, the example MyListItem never referenced the selected prop, leaving ambiguity about the intention of the demo.
By adding a concrete implementation with coloring based on the selected prop, we can see that this is a demo of a multi-select list for batch actions instead of, say, a click-to-navigate nested list.
Here is a working Snack demo for future reference:
https://snack.expo.io/BkRMRTGB-
References #14872
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/14957
Differential Revision: D5892186
Pulled By: sahrens
fbshipit-source-id: c7b46b5f6eae8f36bd4bda7cbbd354cc22108b42
Summary:
Fixing https://github.com/facebook/react-native/issues/13578
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
(Write your motivation here.)
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15419
Reviewed By: sahrens
Differential Revision: D5795844
Pulled By: tomasreimers
fbshipit-source-id: 4cdf97a2f5e83e38f4e12af771b512e7dddd212a
Summary:
Hi guys,
A small typo found in the doc :)
Closes https://github.com/facebook/react-native/pull/15888
Differential Revision: D5809251
Pulled By: TheSavior
fbshipit-source-id: 7a2ca8f2cbca81aa2059ee619a8c6087256e39a6
Summary: FlatList only supports one viewability configuration and callback. This change extends FlatList and VirtualizedList to support multiple viewability configurations and corresponding callbacks.
Reviewed By: sahrens
Differential Revision: D5720860
fbshipit-source-id: 9d24946362fa9001d44d4980c85f7d2627e45a33
Summary:
I just worked with a fellow dev who was switching to flatlist and ended up pretty surprised at the performance drop. The measurement had an exponential bridge saturation, causing flatlist to lose to a scrollview!
We knew something was up, but a little note in the docs would have helped.
Closes https://github.com/facebook/react-native/pull/15400
Differential Revision: D5579483
Pulled By: sahrens
fbshipit-source-id: 2cc2488b6332db4f4d644c67f180088d3a5874a8
Summary:
What existing problem does the pull request solve?
My motivation was to improve the documentation for ListView and ListViewDataSource because I always have trouble remembering how they work and the documentation was lacking an example for `cloneWithRowsAndSections`
My PR does the following:
* add a note about how headers and footers are rendered on a horizontal ListView
* fix a typo in an example
* clarify that the sectionIdentities should match the keys or array indexes of the data source
* add an example of cloneWithRowsAndSections
* add notes on the return values of `getRowCount` and `getRowAndSectionCount`
n/a; documentation only
Closes https://github.com/facebook/react-native/pull/13811
Differential Revision: D5473192
Pulled By: hramos
fbshipit-source-id: f31fc6edfdeb8dff75d39bbcceda06fd839df934
Summary:
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15089
Differential Revision: D5448987
Pulled By: shergin
fbshipit-source-id: eb240517dc94475744f1bda2652f8aff994c0bcd
Summary:
ListView does specify this: https://facebook.github.io/react-native/docs/listview.html#props
The link in ListView is generated by the documentation generator, but because the format of FlatList's props is different, it fails to catch it. Consider finding a way to specify this explicitly to the documentation generator (although this would be a bigger change).
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/14891
Differential Revision: D5386036
Pulled By: sahrens
fbshipit-source-id: 0b8a685411507cc4d0b781fd39b792d59614ce52
Summary:
Added language to explain that you still need to add keys for each section even if you use a keyExtractor method.
No code changed; just clarified documentation.
Closes https://github.com/facebook/react-native/pull/15007
Differential Revision: D5425897
Pulled By: hramos
fbshipit-source-id: db44064a28a673feeda5a6765ea45217d3ae51e2
Summary:
The invariant condition doesn't allow scrolling to the last index
Here is a simple reproduction of the problem: https://snack.expo.io/BJ59gzWrZ
Surely, if the last item is rendered, we should be able to scroll to it without an invariant failing?
Tested locally that this change fixes the issue.
Closes https://github.com/facebook/react-native/pull/14934
Differential Revision: D5414535
Pulled By: shergin
fbshipit-source-id: 38dac4c0e2ae5e1e199a67ca0e98e8f7325e77f4
Summary:
This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style.
Fixes#14620
Refs #14712
Closes https://github.com/facebook/react-native/pull/14729
Differential Revision: D5321810
Pulled By: hramos
fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585
Summary:
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/14764
Differential Revision: D5375730
Pulled By: javache
fbshipit-source-id: 776db77c4dc681edef5832552b220197225e9d3f
Summary:
Could have sworn we put this in a while ago...
Closes https://github.com/facebook/react-native/pull/14870
Differential Revision: D5376747
Pulled By: sahrens
fbshipit-source-id: d2bf3efea205defa48d6cd7f853739f17eb39ece
Summary:
(prior to the scroll metrics being set up, or prior to the view being scrolled to the right location).
I'm using a StackNavigator to push a FlatList secondary screen, and it was causing extraneous rendering (item X ->item 0 -> item X)
I've logged inside the render functions of my `renderItem` function, and verified that it no longer attempts to render item 0 anymore. And I've verified from the `VirtualizedList.state` no longer renders a `{first: 0, last: 0}`, but persistently stays at `{first: X, last: X}` from start until things stabilize.
Closes https://github.com/facebook/react-native/pull/14562
Reviewed By: bvaughn
Differential Revision: D5283771
Pulled By: sahrens
fbshipit-source-id: 0f70ac0b89922449bd20bfa69edbc8939eafdf1f
Summary:
Returning an object that doesn't have all the required properties from `getItemLayout` doesn't cause a flow error (maybe because we are using `createAnimatedComponent`) and caused ALL items to be rendered which caused perf issues that were hard to debug (typo lenght -> length -_-). This adds a simple warning in DEV mode using checkPropTypes.
**Test plan**
Tested in RNTester by passing a bad `getItemLayout` function.
Closes https://github.com/facebook/react-native/pull/14111
Differential Revision: D5283942
Pulled By: sahrens
fbshipit-source-id: 8909532dfddd8628b7fb3380c198f0dfa88f240a
Summary:
Curently FlatList does not implement setting native props directly like the old ListView did. This pr introduce the `setNativeProps` function which delegates to MetroListView or VirtualizedList. Thos don't have `setNativeProps` handling either, so, I delegated further to the respective ListView and Scroll components, which do have handling for it, thus, allowing to set the native props through FlatList.
Create a project with a FlatList and change a native property using `setNativeProps`:
```javascript
componentDidMount() {
setInterval(() => {
this.list.setNativeProps({ style: {backgroundColor:"white"} })
}, 1000)
}
render() {
return (
<View style={styles.container}>
<FlatList ref={component => this.list = component}
style={{backgroundColor:"black"}}
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>} />
</View>
)
}
```
Fixes#13501
Closes https://github.com/facebook/react-native/pull/13529
Differential Revision: D5283593
Pulled By: sahrens
fbshipit-source-id: 8f96f88e286042d82452fef924689b5a8a783987
Summary:
When rendering a large list without a getItemLayout (ie SectionList, where it's hard to compute), it freaks out and attempt to render them all, starving the rendering/layout engine from computing the size (and more accurately figurnge out how few it actually should render.)
Before this change, with <FlatList maxToRenderPerBatch={5} data={objectOfLengthN} />, I essentially saw it doing:
```
{first: 0, last: 0}
{first: 0, last: 5}
{first: 0, last: 10}
....
{first: 0, last: N}
```
(no more hiPri renders since all elements have been rendered)
(actually renders and lays out all N objects, and computes their sizes)
(realizes that it doesn't need to show all N for my current screen size and row size)
```{first: 0, last: 55}```
After this change, that whole first part where it keeps incrementing `last` to try to "keep up with the scrolling" disappears.
Closes https://github.com/facebook/react-native/pull/14563
Differential Revision: D5278796
Pulled By: sahrens
fbshipit-source-id: 5db117b40909ec4bc92fba9b5556c6a2add046ac
Summary:
This uses `context` to render inner lists of the same orientation to a plain `View` without
virtualization instead of rendering nested `ScrollView`s trying to scroll in the same direction,
which can cause problems.
Reviewed By: bvaughn
Differential Revision: D5174942
fbshipit-source-id: 989150294098de837b0ffb401c7f5679a3928a03
Summary:
This is necessary to fix an extraneous warning when a VirtualizedList is constructed on the first frame.
On the first frame, the dt is huge (ie, time since epoch).
On the second frame (which may legitimately be slow as a result of a lot to render), it will then assume there were two consecutive slow frames, and print a warning:
"VirtualizedList: You have a large list that is slow to update..."
Closes https://github.com/facebook/react-native/pull/14393
Differential Revision: D5210467
Pulled By: sahrens
fbshipit-source-id: 2e79218c3d66a4a9df4884f328a125047ef264ed
Martin Rädlinger
Paito Anderson
Peter Ruibal
Naman Goel
Sam Goldman
Matt Bruce
Tomas Reimers
Spencer Ahrens
Christopher Chedeau
Taylor Kline
Tomas Reimers
Alexandre Moureaux
m30do
Marshall Roch
Vince Oppedisano
Caleb Meredith
Eli White
Oleg Lokhvitsky
Gant Laborde
glevi@fb.com
Luy Tran
Tim Wang
Garrett McCullough
JSON Deppen
Dean G
Maarten Schumacher
Seth Fitzsimmons
superyarik
Spencer Ahrens
Mike Lambert
Jan Söndermann
zongwan
Janic Duplessis
Rene Weber
James Burnett
Kexi Long
