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:
… in VirtualizedList - fixes#16612
Issue is detailed in #16612
<!--
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!
-->
I need `onViewableItemsChanged` to account for the length of any ListHeaderComponents
I couldn't find any tests that currently cover the use-case of a VirtualizedList + ListComponent + scroll with onViewableItemsChanged, so I have not added any tests - all previous tests pass however.
<!--
Help reviewers and the release process by writing your own release notes
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [-{Component}-]
[ INTERNAL ] [ ENHANCEMENT ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[CATEGORY] [TYPE] [LOCATION] - MESSAGE
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
[GENERAL][BUGFIX][VirtualizedList] - account for `ListHeaderComponent` length
Closes https://github.com/facebook/react-native/pull/17415
Differential Revision: D8683555
Pulled By: hramos
fbshipit-source-id: 05df7b79c16e3c07c12468e782f3c4b0bdce7403
Summary:
Bump Prettier to use version 1.13.4
All code changes are caused by running Prettier and should only affect files that have an `format` header.
All other changes caused by yarn.
Reviewed By: ryanmce
Differential Revision: D8251255
fbshipit-source-id: 0b4445c35f1269d72730f2000002a27c1bc35914
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
Rasmus K. Brosbøl
Michael Ficaro
Konstantin Raev
Shane Osbourne
Peter van der Zee
Logan Daniels
Spencer Ahrens
Tim Yung
Eli White
Payton Yao
Rubén Norte
Alex McKelvey
Avik Chaudhuri
Peter Argany
Danny Cochran
Sam Goldman
Janic Duplessis
Sophie Alpert
Caleb Meredith
Brian Vaughn
Oleg Lokhvitsky
glevi@fb.com
Martin Rädlinger
Tomas Reimers
Christopher Chedeau
Tomas Reimers
m30do
Marshall Roch
Vince Oppedisano
