Commit Graph

64 Commits

Author SHA1 Message Date
Sophie Alpert 19b9851999 Update VirtualizedList to not throw with double constructor
Summary: constructor shouldn't have side effects.

Reviewed By: sahrens

Differential Revision: D7146018

fbshipit-source-id: 0ca311e48d6bad81988ed48605c8134068c482da
2018-03-05 14:17:07 -08:00
Caleb Meredith da3424c929 @allow-large-files Upgrade xplat/js to Flow v0.66
Reviewed By: gabelevi

Differential Revision: D7016717

fbshipit-source-id: 2bd2fd67074ba5d405ecd63a1aeb37354f8634c9
2018-02-16 20:24:57 -08:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
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
2018-02-16 18:31:53 -08:00
Brian Vaughn 6f007e8957 Ran rename-unsafe-lifecycles codemod on xplat/js
Reviewed By: trueadm

Differential Revision: D6889214

fbshipit-source-id: e815cda4b09f3650ae3b0b9a44ae6f5fcb48fe25
2018-02-08 10:58:31 -08:00
Oleg Lokhvitsky ef596dec49 Fix initialScrollIndex for Android
Reviewed By: sahrens

Differential Revision: D6885608

fbshipit-source-id: c153fcb5c2552982481d8af8b9755ae035e9b293
2018-02-02 16:02:12 -08:00
Logan Daniels ae2d5b1e68 Nested virtualized lists should receive recordInteration events
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
2018-01-29 12:13:58 -08:00
Janic Duplessis ecaca80d42 Support sticky headers for inverted Lists
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
2018-01-29 11:46:26 -08:00
glevi@fb.com 6b95c4fb14 @allow-large-files [Flow] Upgrade xplat/js to flow v0.63
Reviewed By: samwgoldman

Differential Revision: D6675320

fbshipit-source-id: 85575a6f30a50a3c40c6b46ba36f8cd33c091b1d
2018-01-08 12:49:53 -08:00
Logan Daniels 3559e42c55 Make sure VirtualizedList's windowSize is greater than 0
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
2017-12-21 18:43:50 -08:00
Logan Daniels a010a0cebd Fix virtualized cell keys for list headers and footers
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
2017-12-19 13:46:49 -08:00
Logan Daniels 2668dc8e1b Support virtualization and onViewableItemsChanged for nested, same-orientation VirtualizedLists
Reviewed By: sahrens

Differential Revision: D6330846

fbshipit-source-id: c555f4d449b75753befbd376dbf4e6fb4812fa75
2017-12-18 13:32:35 -08:00
Avik Chaudhuri a48da14800 @allow-large-files Flow 0.58 upgrade for xplat/js
Reviewed By: yungsters

Differential Revision: D6219339

fbshipit-source-id: f003111500ef5971b9a95f26d43cee6644c16abe
2017-11-02 10:51:14 -07:00
Martin Rädlinger 6747a36f5d VirtualizedList: fix bug where onViewableItemsChanged wouldn't trigger
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
2017-10-16 04:35:05 -07:00
Sam Goldman a16ef18a80 Upgrade Flow to v0.56.0
Reviewed By: calebmer

Differential Revision: D5958715

fbshipit-source-id: 7feda03a9540e69bf8d9b4eb89720248ff43294f
2017-10-02 21:11:05 -07:00
Tomas Reimers d8cc6e3c2b Add SwipeableFlatList
Reviewed By: sahrens

Differential Revision: D5912488

fbshipit-source-id: 3d2872a7712c00badcbd8341a7d058df14a9091a
2017-09-28 22:16:08 -07:00
Spencer Ahrens e16b514c5f Add onScrollToIndexFailed support
Summary: Allows handling the case of wanting to scroll beyond the measured window.

Reviewed By: TheSavior

Differential Revision: D5915331

fbshipit-source-id: 329927632f4d04f213567ce4bbe547b04b8ea86d
2017-09-27 18:31:15 -07:00
Christopher Chedeau 70c6700be8 Codemod to 1.7.0
Differential Revision: D5763302

fbshipit-source-id: a91ca1786c7ac8eb9aa3dd43555a7a223dc6f9cf
2017-09-26 23:45:48 -07:00
Tomas Reimers ae1a4f08f6 Allow data lists to include 0 or '' (falsey items)
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
2017-09-13 17:33:03 -07:00
m30do ae60ae4074 fix ItemSeparatorComponent position in horizontal and inverted mode
Summary:
<!--
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!

-->

There's a positioning bug in `VirtualizedList` when `ItemSeparatorComponent` is defined for a list in horizontal or inverted mode. And also we face this bug in `FlatList`, because it is using `VirtualizedList` to render lists.
This commit will fix the [#15777](https://github.com/facebook/react-native/issues/15777).

Before fix:
```
<FlatList
  ...
  horizontal={true}
  inverted={true}
  ...
/>
```

![image](https://user-images.githubusercontent.com/15084663/30205251-95f14c70-949d-11e7-85e9-7a3304a52818.png)

```
<FlatList
  ...
  horizontal={true}
  inverted={false}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205411-f01d27b4-949d-11e7-991e-00aeae0c01e0.png)

I ran this code with all possible values of `horizontal` and `inverted` props in `FlatList` and `VirtualizedList` and the results of each run was as below:
After fix bug:

```
<FlatList
  ...
  horizontal={true}
  inverted={false}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205498-323bcf60-949e-11e7-8ba0-465614ea5cf2.png)

```
<FlatList
  ...
  horizontal={true}
  inverted={true}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205543-5274f612-949e-11e7-9660-bbdf8194cd27.png)
Closes https://github.com/facebook/react-native/pull/15865

Differential Revision: D5797266

Pulled By: hramos

fbshipit-source-id: 7d44fa797dbd9e83eb2bdd7833e9dd9707d9d822
2017-09-08 15:06:50 -07:00
Marshall Roch 91b6b4efb9 @allow-large-files Flow v0.54.0
Reviewed By: leebyron

Differential Revision: D5773490

fbshipit-source-id: 2c54bb6326f23edbe9a969f3010f79da8189923e
2017-09-06 03:33:43 -07:00
Vince Oppedisano ad733ad430 Extend FlatList to support multiple viewability configs
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
2017-09-05 18:51:25 -07:00
Spencer Ahrens 57c7324ab7 Support sticky ListHeaderComponent
Summary: Fixed the little oversight.

Reviewed By: TheSavior

Differential Revision: D5743857

fbshipit-source-id: c61a6c29b5f547f3e5a2b7ff2d318f693cc9aed5
2017-09-01 12:01:35 -07:00
Caleb Meredith 63f990121a Fix React Native open source
Reviewed By: hramos, TheSavior

Differential Revision: D5728356

fbshipit-source-id: fb751d67c16ba9273de93d9b6d5acd65b1555dca
2017-08-29 15:01:05 -07:00
Eli White 2d0fe109d7 Fix Prettier
Reviewed By: hramos

Differential Revision: D5720486

fbshipit-source-id: 374c0c264a714276c39c357aa3fc0737a822a8db
2017-08-29 11:00:59 -07:00
Caleb Meredith 90eaeb019b Upgrade fbsource/xplat/js to Flow v0.53.0
Reviewed By: avikchaudhuri

Differential Revision:
D5648819
Ninja: T20988071

fbshipit-source-id: 66e5b6747c79ae66b6eb69d40ede5e982c26174f
2017-08-17 18:45:01 -07:00
Caleb Meredith 30d9c3d279 Add suppressions for Flow v0.53.0 before React changes
Reviewed By: avikchaudhuri

Differential Revision: D5648801

fbshipit-source-id: c4eb1bee198a177b69b6e9414111ce957b4d27ff
2017-08-17 05:18:33 -07:00
Oleg Lokhvitsky ad21ad2559 Fix stale separator props and expose CellRenderer refs
Reviewed By: sahrens

Differential Revision: D5554920

fbshipit-source-id: 4b6ebc88603afeb642b2860c6069f28cb415d8be
2017-08-08 17:01:39 -07:00
Maarten Schumacher cad2d9b072 Be able to scroll to last item in list
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
2017-07-13 00:03:51 -07:00
Christopher Chedeau c848c3820b Codemod prettier to 1.5.2
Differential Revision: D5339725

fbshipit-source-id: 631338436a7d69b0ab0721507bdab4ae4e207065
2017-06-28 12:50:30 -07:00
Mike Lambert 1ee602b655 Fix problems if _updateCellsToRender gets called too early
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
2017-06-22 18:48:19 -07:00
zongwan d217921b5e Update VirtualizedList.js, fix wrong position after scrollToEnd when props.refreshing === true
Summary:
Pull request again for clean branch

Thanks for submitting a PR! Please read these instructions carefully:

- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

What existing problem does the pull request solve?
Fix #14033
Fix wrong position after `scrollToEnd` when `props.refreshing === true`

**Before**

![before](https://cloud.githubusercontent.com/assets/1185694/26242273/657f0180-3cba-11e7-9360-49269fd1bb2f.gif)

**After**

![after](https://cloud.githubusercontent.com/assets/1185694/26242503/465a856c-3cbb-11e7-98fb-f3256fd45c15.gif)

Sign the [CLA][2], if you haven't already.

Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

Make sure all **tests pass** on both [Travis][3] and [Circle CI][4]. PRs that break tests are unlikely to be merged.

For more info, see the ["Pull Requests"][5] section of our "Contributing" guidelines.

[1]: https://medium.com/martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9
[2]: https://code.facebook.com/cla
[3]: https://travis-ci.org/facebook/react-native
[4]: http://circleci.com/gh/facebook/react-native
[5]: https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests
Closes https://github.com/facebook/react-native/pull/14089

Differential Revision: D5283973

Pulled By: sahrens

fbshipit-source-id: 9bef9a922c15aa5bed11a59acbd7b48a76946d29
2017-06-20 19:01:27 -07:00
Janic Duplessis a2b0ee0fc3 FlatList - Add dev validation of the object returned by getItemLayout
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.
![image](https://cloud.githubusercontent.com/assets/2677334/26329030/5b32ba90-3f13-11e7-9190-08f05a5c0682.png)
Closes https://github.com/facebook/react-native/pull/14111

Differential Revision: D5283942

Pulled By: sahrens

fbshipit-source-id: 8909532dfddd8628b7fb3380c198f0dfa88f240a
2017-06-20 10:45:32 -07:00
Rene Weber 75508c12ff Add setNativeProps
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
2017-06-20 09:34:55 -07:00
Mike Lambert ebcf5fd241 Fix initial-render triggering a render of all items.
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
2017-06-19 16:04:44 -07:00
Spencer Ahrens 1d30f833a6 Add inverted option
Reviewed By: bvaughn

Differential Revision: D5210277

fbshipit-source-id: 5a8b196b90a2ac6d20397113ef4bd76446ea9fa3
2017-06-12 22:45:49 -07:00
Spencer Ahrens 0a3e6e0e76 prettier
Reviewed By: fkgozali

Differential Revision: D5210279

fbshipit-source-id: 4b376a09b4bcfb42a2dc48b9903849d58929b7db
2017-06-12 22:45:49 -07:00
Spencer Ahrens 63f7efcd32 Add basic nested VirtualizedList support
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
2017-06-12 22:45:48 -07:00
Kexi Long a0a7d97c7b Exposed progressViewOffset to VirtualizedList and FlatList
Reviewed By: sahrens

Differential Revision: D5204107

fbshipit-source-id: df2928830f84ea012d532f24c776dee8d2b96989
2017-06-08 12:32:14 -07:00
Mike Lambert 5840a9051d Fix deltatime calculation.
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
2017-06-08 12:17:01 -07:00
Jean Regisser 5114b61b5e Add support for flashScrollIndicators on iOS
Summary:
Flashing scroll indicators is a standard behavior on iOS to show the user there's more content.

Launch RNTester on iOS, go to the ScrollView section, tap the "Flash scroll indicators" button.
You'll see this:

![Flash scroll indicators](https://cloud.githubusercontent.com/assets/57791/26250919/ebea607a-3cab-11e7-96c6-27579cc809ab.gif)

I've exposed the method `flashScrollIndicators` on all scrolling components that were already exposing a `scrollToXXX` method so it's usable from those components using a ref.

Let me know what you think.
Closes https://github.com/facebook/react-native/pull/14058

Differential Revision: D5103239

Pulled By: shergin

fbshipit-source-id: caad8474fbe475065418d771b17e4ea9766ffcdc
2017-06-06 13:06:48 -07:00
Jakob Kerkhove 7ee8dd788f Expand documentation scroll to offset
Summary:
I expanded the documentation of the scrollToOffset method a bit in FlatList

Thanks for submitting a PR! Please read these instructions carefully:

- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

The documentation of the scrollToOffset method in FlatList was a bit confusing. Also, there was no documentation for this method on VirtualizedList. I added the doc block there and linked to it from the FlatList doc block.

Please check if the link on the FlatList scrollToOffset method links to the scrollToOffset method of the VirtualizedList docs page.

Sign the [CLA][2], if you haven't already.

Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

Make sure all **tests pass** on both [Travis][3] and [Circle CI][4]. PRs that break tests are unlikely to be merged.

For more info, see the ["Pull Requests"][5] section of our "Contributing" guidelines.

[1]: https://medium.com/martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9
[2]: https://code.facebook.com/cla
[3]: https://travis-ci.org/facebook/react-native
[4]: http://circleci.com/gh/facebook/react-native
[5]: https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests
Closes https://github.com/facebook/react-native/pull/14317

Differential Revision: D5192378

Pulled By: hramos

fbshipit-source-id: 6131a8e5adb2a2f7cb84344541f4f8b999a232d2
2017-06-06 12:32:13 -07:00
ashoat 803a9168f2 Pass data prop instead of props to _updateViewableItems in _onScroll
Summary:
This is a simple bugfix. `_updateViewableItems` expects the `data` prop, as it calls `getItemCount` on it. Without this, `onViewableItemsChanged` updates twice for each scroll position, once from `_onScroll` with the incorrect results, and once from `_updateCellsToRender` with the correct results. This means the callback nigh-on unusable.

I simply logged the results of `onViewableItemsChanged` and made sure they were correct.
Closes https://github.com/facebook/react-native/pull/14162

Differential Revision: D5128363

Pulled By: sahrens

fbshipit-source-id: 3faef812068921a26ed871339da79870fd0d911c
2017-05-25 03:15:22 -07:00
Xinbo Wang eac399b696 Add flexWrap warning
Reviewed By: sahrens

Differential Revision: D5117970

fbshipit-source-id: 11b542bd6cd7b1ab22ba8f6822d471df94fa7da2
2017-05-25 00:00:38 -07:00
Louis Lagrange 264d67c424 Add ListEmptyComponent prop
Summary:
Hey there :)

Please let me know if the name `ListEmptyComponent` should be changed. I also thought about `ListNoItemsComponent`. Or maybe `ListPlaceholderComponent`?

- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

In a FlatList, I wanted to show some placeholder when my data is empty (while keeping eventual Header/Footer/RefreshControl).
A way around this issue would be to do something like adding a `ListHeaderComponent` that checks if the list is empty, like so:
```js
ListHeaderComponent={() => (!data.length ? <Text style={styles.noDataText}>No data found</Text> : null)}
```
But I felt it was not easily readable as soon as you have an actual header.

This PR adds a `ListEmptyComponent` that is rendered when the list is empty.

I added tests for VirtualizedList, FlatList and SectionList and ran `yarn test -- -u`. I then checked that the snapshots changed like I wanted.
I also tested this against one of my project, though I had to manually add my changes because the project is on RN 0.43.

Here are the docs screenshots:
- [VirtualizedList](https://cloud.githubusercontent.com/assets/82368/25566000/0ebf2b82-2dd2-11e7-8b80-d8c505f1f2d6.png)
- [FlatList](https://cloud.githubusercontent.com/assets/82368/25566005/2842ab42-2dd2-11e7-81b4-32c74c2b4fc3.png)
- [SectionList](https://cloud.githubusercontent.com/assets/82368/25566010/368aec1e-2dd2-11e7-9425-3bb5e5803513.png)

Thanks for your work!
Closes https://github.com/facebook/react-native/pull/13718

Differential Revision: D4993711

Pulled By: sahrens

fbshipit-source-id: 055b40f709067071e40308bdf5a37cedaa223dc5
2017-05-04 00:16:25 -07:00
Jeff Case beeffb89fe Made `getItem` and `getItemCount` required props (VirtualizedList)
Summary:
The main reason to use **VirtualizedList** is to set the `getItem` and `getItemCount` props, so having default values for these props makes things error prone.

* In **VirtualizedList**, changed the `getItem` and `getItemCount` props from optional to required, and removed default values.
* Ensured that implementing classes **FlatList** and **SectionVirtualizedList** are always passing these props.
* Updated VirtualizedList-test.js accordingly.

Reviewed By: sahrens

Differential Revision: D4980236

fbshipit-source-id: ad1838931253bc61ff9068c40929f6e9c755b92c
2017-05-03 10:34:58 -07:00
Spencer Ahrens 52e50af56d Fix and optimize VirtualizedList update triggers
Summary:
- If the initial render doesn't extend past `onEndReachedThreshold` it is likely that onEndReached won't get called until scroll, which can be a bad experience if the `initialNumToRender` is very close to the viewport height. This happens because when `onContentSizeChange`, `onLayout` may not have fired yet so we don't know what the `visibleLength` is. Fix is to also call `maybeCallOnEndReached` in `_onLayout` as well.

- We have an optimization that does hi-pri render window updates when scrolling quickly and the content reaches the edge of the viewport, but there is also an important case where the user has scrolled to the end of the content and is waiting for a network response. Once the new data comes in, we want to render it ASAP because the user is waiting for it. To solve this we refactor our scheduling code into a shared function that always checks if it should be a hi-pri update instead of just in `_onScroll`.

Reviewed By: bvaughn

Differential Revision: D4975314

fbshipit-source-id: 8d64832ecbcbdbac430a08a4018d7a32b2216a85
2017-05-03 10:34:58 -07:00
Spencer Ahrens 5c7c65e964 fix bug: flipped leading/trailing separators.updateProps
Reviewed By: thechefchen

Differential Revision: D4964000

fbshipit-source-id: bd0562e30811d6206cd5441f6a9413c4b503bbfa
2017-04-27 15:50:15 -07:00
Spencer Ahrens 28aaa88808 Many improvements
Summary:
These got smashed together with some weird rebase snafu. They are pretty intertwined anyway so the value of
separate commits is minimal (e.g. separate commits would not revert cleanly anyway).

== [lists] better fill rate logging (previously D4907958)

After looking through some production data, I think this will address all the issues we're seeing. Now:

- Header/Footer getting no longer counted as blank.
- Avoid floating point for Scuba.
- Compare actual time of blankness, not just samples.
- Include both "any" vs. "mostly" blank (similar to 1 and 4 frame drops).
- Include events where there is no blankness so we have a baseline.
- Remove events with too few samples

**Test Plan: **

A bunch of scrolling in FlatListExample

T17384966

== [Lists] Update SectionSeparatorItem docs (previously D4909526)

Forgot to update the language here when we modified the behavior with the introduction of separator
highlighting support.

** Test Plan: **
nope.

== [Lists] Add renderSectionFooter prop to SectionList (previously D4923353)

Handy for things like "see more" links and such.

The logic here is to render the footer last, *after* the bottom section separator. This is to preserve
the highlighting behavior of the section separator by keeping it adjacent to the items.

**Test Plan: **
Added to snapshot test and example:

{F66635525}

{F66635526}

== [SectionList] Add a bunch more info for rendering items and separators (previously D4923663)

This extra info can be helpful for rending more complex patterns.

**Test Plan: **
Made snapshot test more comprehensive and inspected the output.

== [Lists] reduce render churn (previously D4924639)

I don't think the velocity based leadFactor is helping and might actually be hurting because
it causes a lot of churn in the items we render.

Instead, this diff introduces fillPreference which biases the window expansion in the direction of scroll,
but doesn't actually affect the final bounds of the window at all, so items that are already rendered are
more likely to stay rendered.

**Test Plan: **

Played around in debug mode and watched the overlay - seems better. Also tests all pass.

T16621861

== [Lists] Add initialScrollIndex prop

Makes it easy to load a VirtualizedList at a location in the middle of the content without
wasting time rendering initial rows that aren't relevant, for example when opening an infinite calendar
view to "today".

**Test Plan: **
With debug overlay, set `initialScrollIndex={52}` prop in `FlatListExample` and
and see it immediately render a full screen of items with item 52 aligned at the top of the screen. Note
no initial items are mounted per debug overlay. Scroll around a bunch and everything else seems to work
as normal.

No SectionList impl since `getItemLayout` isn't easy to use there.

T17091314

Reviewed By: bvaughn

Differential Revision: D4907958

fbshipit-source-id: 8b9f1f542f9b240f1e317f3fd7e31c9376e8670e
2017-04-25 14:50:14 -07:00
Tony Tan 3e7aa5f14e Fix bug - FlatList component did not render more items when content was filtered
Summary:
**Bug Description**

The FlatList component receives content items via the data prop, and renders an initial number of items on the app's view. When a user scrolls to the end of the list, the component will append and render more available items at the end of the list. There was a bug where when the content was filtered, there were more available items but the component did not append/render them. This is due to the current appending/rendering logic in VirtualizedList, which does not account for data changes as a condition for updating/rendering. VirtualizedList is a dependency of FlatList, so this issue affects FlatList as well.

**Approach to Fixing Bug**

(i) Reproduce bug on iOS view of FlatList.
(ii) For VirtualizedList component:
  # Isolate onEndReached function that appends more data to component UI.
  # Isolate _onContentSizeChange function that is called when list content changes.
  # Write snapshot tests using jest, based off existing test for FlatList.
  # Refactor logic to append more data to list into _maybeCallOnEndReached function.
  # Call _maybeCallOnEndReached in both _onContentSizeChange and _onScroll.
(iii) Run snapshot tests and observe jest output.
(iv) Bring up iOS view of FlatList and check that component now renders more items when content is filtered.

Many thanks to sahrens for guidance in developing this code!

Reviewed By: sahrens

Differential Revision: D4877388

fbshipit-source-id: c10c9eef1912f491450a62b81a9bc41f7f784203
2017-04-17 18:15:37 -07:00
Gabe Levi 92f900c79d Upgrade to v0.44.0
Reviewed By: zertosh

Differential Revision: D4893660

fbshipit-source-id: ed85f5d4c585164d464a7e009888a28e5af339cd
2017-04-17 09:33:20 -07:00