Summary:
VirtualizedList sets high priority rendering when scrolled to the top of a list even if the bottom of the rendered list is still far away and there's nothing further to render above. This causes severe non-responsiveness while dozens of items are waiting to be rendered and user inputs can't get through.
The fix is simply to not consider it high priority to render more items when we reach the top and the first item has already been rendered, or when we reach the bottom and the last item has been rendered.
The code change just splits the two cases (hitting the top and bottom) instead of combining them into one.
I wrote a small application that switches between two FlatLists.
Demo of the original VirtualizedList
<img src="https://user-images.githubusercontent.com/3090032/39456709-2c87069e-4d1b-11e8-8535-5bda6d59400c.gif" width="270" height="480">
I'm clicking pretty often on the button, but you can see that it only switches lists a split second after the rendering is all done because the javascript thread was being blocked.
Demo of the fixed VirtualizedList
<img src="https://user-images.githubusercontent.com/3090032/39456844-00312448-4d1c-11e8-805f-cbe17aa3f95e.gif" width="270" height="480">
You can see this one is significantly more responsive than the previous one.
The source code for the demo application is available [here](https://gist.github.com/jabbawookiees/ba93a4e7b4f9b8f3acbc157e4fd04877)
[ GENERAL ] [ ENHANCEMENT ] [ Libraries/Lists/VirtualizedList.js ] - Prevent high priority rendering at the top or bottom of a list.
Closes https://github.com/facebook/react-native/pull/19081
Differential Revision: D7933994
Pulled By: sahrens
fbshipit-source-id: 13c9f73baeb3487620b720854a753287ac0aa1fa
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.
It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)
* Checked the Flow configuration by running flow on the project root (no errors):
```
yarn flow
```
* Checked the Jest configuration by running the tests with a clean cache:
```
yarn jest --clearCache && yarn test
```
* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:
```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```
[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995
Reviewed By: mjesun
Differential Revision: D7729509
Pulled By: rubennorte
fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
Summary:
invertStickyHeaders was being set to "this.props.inverted" -- it should just inherit from the props of VirtualizedList instead, per discussion in https://github.com/facebook/react-native/issues/18471Fixes#18471
Pass "invertStickyHeaders: false" to a SectionList (or FlatList), and expect that your sticky headers stick to the bottom of the ScrollView, instead of the top.
none
[ANDROID] [BUGFIX] [SectionList] - invertStickyHeaders can now be set from SectionList or FlatList.
Closes https://github.com/facebook/react-native/pull/18524
Differential Revision: D7386163
Pulled By: hramos
fbshipit-source-id: 3b66dfca280e657303f69f98c5a8bc0df033f9f7
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:
Migrating everything to import from StyleSheet instead of StyleSheetTypes.
Search and replaced
```
import type {StyleObj} from 'StyleSheetTypes';
```
to
```
import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
```
and then replacing `StyleObj` with `DangerouslyImpreciseStyleProp` and fixing up the remaining flow errors by hand.
Reviewed By: yungsters
Differential Revision: D7184077
fbshipit-source-id: b8dabb9d48038b5a997ab715687300bad57aa9d4
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
Summary:
Right now when an interaction is recorded on a parent VirtualizedList, the interaction isn't passed on to its children. That means that if `waitForInteraction` is set to true for a child list's viewability helper, it will never trigger a VPV.
This change adds forwarding of these events inside `onBeginScrollDrag`. It also forwards the interaction state of the parent list at register time, in case a child list is rendered mid-scroll.
Reviewed By: sahrens
Differential Revision: D6822091
fbshipit-source-id: dfe300e42722d4285f65787ab2c1368f050c5577
Summary:
Sticky headers for inverted lists should still stick at the top of the list instead of the bottom.
Tested by adding the inverted prop to the SectionList example in RNTester.
It does add a prop to ScrollView but it's very specific to the inverted list implementation, not sure if it should be documented.
[GENERAL][ENHANCEMENT][LISTS] - Support sticky headers for inverted Lists
Closes https://github.com/facebook/react-native/pull/17762
Differential Revision: D6830784
Pulled By: sahrens
fbshipit-source-id: 6841fdd46e04b30547659d85ff54c3a21c61a8a2
Summary:
Setting `windowSize = 0` doesn't make sense. Let's make sure we catch this problem in the constructor so that it doesn't cause inexplicable list behavior.
Also fixed an invariant in `VirtualizeUtils` that is meant to prohibit non-monotonically-increasing offset arrays. As written, the invariant condition can never actually be violated.
Reviewed By: sahrens
Differential Revision: D6625302
fbshipit-source-id: b2a983cbe7bb5fbe0aed7c5d59e69a8a00672993
Summary:
The change enabling virtualization in nested lists contained a hidden assumption that nested lists would only appear within the *cells* of a parent list.
If a list header or footer component contains a `VirtualizedList`, that child list won't be wrapped in a `CellRenderer` component and therefore won't have access to `virtualizedCellRenderer` through its context. This causes an error when the child list tries to access the `cellKey` property on an undefined object.
This change wraps the header/footer views in a `VirtualizedCellWrapper` component which supplies that context properly.
Reviewed By: sahrens
Differential Revision: D6603342
fbshipit-source-id: 4d2d82f04947048a16ec9968121d8ecc8c95655a
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:
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: 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:
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:
(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
Payton Yao
Rubén Norte
Alex McKelvey
Peter van der Zee
Avik Chaudhuri
Peter Argany
Danny Cochran
Sam Goldman
Janic Duplessis
Eli White
Sophie Alpert
Caleb Meredith
Brian Vaughn
Oleg Lokhvitsky
Logan Daniels
glevi@fb.com
Martin Rädlinger
Tomas Reimers
Spencer Ahrens
Christopher Chedeau
Tomas Reimers
m30do
Marshall Roch
Vince Oppedisano
Maarten Schumacher
Mike Lambert
zongwan
Rene Weber
