Commit Graph

21 Commits

Author SHA1 Message Date
sunnylqm f39ef36190 Update FlatList doc
Summary:
1. Mention scrollToIndex support.
2. Fix a format error.
3. Use relative links like 59257d6976/Libraries/Components/Navigation/NavigatorIOS.ios.js (L136) for links in "next version" to work properly.

~~4. BREAKING: `columnWrapperStyle` should be `rowWrapperStyle`?~~
Closes https://github.com/facebook/react-native/pull/12714

Differential Revision: D4730476

Pulled By: sahrens

fbshipit-source-id: 643aab659064e6f5275ec89fd7f967dd9de866c4
2017-03-22 00:00:56 -07:00
Spencer Ahrens 46d6766a53 useful error when switching numColumns on the fly
Reviewed By: blairvanderhoof, bvaughn

Differential Revision: D4742842

fbshipit-source-id: a11a088194ead02cc11eb6ccd9ce6d6f75ead3a3
2017-03-21 22:30:30 -07:00
Spencer Ahrens 1531f5f284 change section-specific SeparatorComponent -> ItemSeparatorComponent for consistency
Summary: Not sure how I missed this in 3ce31c24da

Reviewed By: yungsters

Differential Revision: D4731083

fbshipit-source-id: 860ed9d2f99312cd02b84ba467ba66afc5cdd5c5
2017-03-21 22:30:30 -07:00
Spencer Ahrens 5c856150ff Kill shouldItemUpdate
Summary:
It was just adding unnecessary complexity. Users should just use standard React perf best practices, like `PureComponent` and `shouldComponentUpdate`.

This should be backwards compatible - existing `shouldItemUpdate` usage will just be ignored and should consider migrating to this pattern:

```
class MyItem extends React.PureComponent {
  _onPress = () => {
  	this.props.onPressItem(this.props.id);
  };
  render() {
    return (
      <SomeOtherWidget title={this.props.title} onPress={this._onPress} />
    )
  }
}
...
_renderItem = ({item}) => (
  <MyItem onPressItem={this._onPressItem} title={item.title} id={item.id} />
);
```

Which will automatically prevent re-renders unless the relavent data changes.

Reviewed By: yungsters

Differential Revision: D4730599

fbshipit-source-id: 0f61efe96eb4d95bb3b7c4ec889e3e0e34436e56
2017-03-21 22:30:30 -07:00
Spencer Ahrens 72670bf8d2 support sticky headers
Summary:
This adds support for both automagical sticky section headers in
`SectionList` as well as the more free-form `stickyHeaderIndices` on
`FlatList` or `VirtualizedList`.

The basic concept is to take the initial `stickySectionHeaders` and remap them
to the indices corresponding to the mounted subset in the render window. The
main trick here is that the currently stuck header might itself be outside of
the render window, so we need to search the gap to see if that's the case and
render it (with spacers above and below it instead of one big spacer).

In the `SectionList` we simply pre-compute the sticky headers at the same time
as when we scan the sections to determine the flattened length and pass those
to `VirtualizedList`.

This also requires some updates to `ScrollView` to work in the churny
environment of `VirtualizedList`. We propogate the keys on the children to the
animated wrappers so that as items are removed and the indices of the
remaining items change, react can keep proper track of them. We also fix the
scroll back case where new headers are rendered from the top down and aren't
updated with the `setNextLayoutY` callback because the `onLayout` call for the
next header happened before it was mounted. This is done by just tracking all
the layout values in a map and providing them to the sticky components at
render time. This might also improve perf a little by property configuring the
animations syncronously instead of waiting for the `onLayout` callback. We
also need to protect against stale onLayout callbacks and other fun stuff.

== Test Plan ==

https://www.facebook.com/groups/react.native.community/permalink/940332509435661/

Scroll a lot with and without debug mode on. Make sure spinner
still spins and there are no crashes (lots of crashes during development due
to the animated configuration being non-monotonic if anything stale values get
through). Also made sure that tapping a row to change it's height would
properly update the animation configurations so the collision point would
still be correct.

Reviewed By: yungsters

Differential Revision: D4695065

fbshipit-source-id: 855c4e31c8f8b450d32150dbdb2e07f1a9f9f98e
2017-03-21 22:30:30 -07:00
Spencer Ahrens edd5624fde invariants around scrollToIndex without getItemLayout
Summary: People might be tempted to try and scrollTo an index that hasn't been rendered yet, which is broken, so instead of jank let's throw.

Reviewed By: yungsters

Differential Revision: D4727402

fbshipit-source-id: b6f9fd5b70b6f076c30141d00b2b9e2a51b14e87
2017-03-21 22:30:30 -07:00
Spencer Ahrens 462352e609 add jest snapshot tests
Reviewed By: yungsters

Differential Revision: D4726519

fbshipit-source-id: 1ae98743cdb89acb2708d84073527015dbeee906
2017-03-21 22:30:30 -07:00
Arman Dezfuli-Arjomandi 22da6f2f3f Fix typo in FlatList docs
Summary:
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.

There was a typo in the FlatList docs for numColumns affecting the formatting of its description.

N/A

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
Closes https://github.com/facebook/react-native/pull/13002

Differential Revision: D4735343

fbshipit-source-id: f781c50c892d64e69f61aec980614e948a48f48b
2017-03-18 13:02:29 -07:00
Spencer Ahrens b1a63f0088 Fix minimumViewTime
Reviewed By: blairvanderhoof

Differential Revision: D4723575

fbshipit-source-id: a120eef4079a808bd3dead08df93989e1db3d96a
2017-03-16 16:45:54 -07:00
Spencer Ahrens 7e4c93d65a Fix doubled ItemSeparators
Summary: Forgot to update these after rename...

Reviewed By: yungsters

Differential Revision: D4723788

fbshipit-source-id: 8cf7e8de57a23d9ee0a424aa9c0d62ab1cfbbb12
2017-03-16 16:02:36 -07:00
Mike Adams 7f4054df76 Update FlatList.js
Summary:
Only a small amendment, but took me a little bit to figure out why this wasn't working.
Closes https://github.com/facebook/react-native/pull/12706

Differential Revision: D4656700

fbshipit-source-id: d6038581aa70e96a2be775a7a9786e8c7e64f762
2017-03-15 17:00:46 -07:00
Spencer Ahrens 3ce31c24da Rename *Component props to match SectionList
Reviewed By: yungsters

Differential Revision: D4697335

fbshipit-source-id: 742b7a1729ba7a08fe3d9707bcf6c51026779739
2017-03-13 09:45:45 -07:00
Spencer Ahrens 5177a55314 native animated scroll event support
Reviewed By: yungsters

Differential Revision: D4648383

fbshipit-source-id: fdb8e2deaa06b2d2f9002cee2c0b827dbd7a5570
2017-03-09 22:15:53 -08:00
Spencer Ahrens 9325496d46 Simplify scroll interaction stuff
Reviewed By: angelahess

Differential Revision: D4662787

fbshipit-source-id: 6e28f8cacd08601254e70f30ab98ee27bd08cc5a
2017-03-06 21:51:40 -08:00
Spencer Ahrens 7005f54ab5 Fix unmount crash when using sticky headers
Reviewed By: bvaughn

Differential Revision: D4659436

fbshipit-source-id: c04394681a4f07599f16bae195313e6617419404
2017-03-06 21:16:00 -08:00
Spencer Ahrens 293bb36c0e warn about PureComponent in docs
Reviewed By: hramos

Differential Revision: D4663872

fbshipit-source-id: cb2bd2a2d588a9419da7517304d0612e259151e3
2017-03-06 19:31:08 -08:00
David Adams e3ef69548c VirtualizedList - trigger this.props.onContentSizeChange
Summary:
Have tested this and works fine
```
<SectionList
    onLayout={this.onLayout}
    ref={thisRef => this.listView = thisRef}
    ListFooterComponent={this.renderFooter}
    renderItem={this._renderRow}
    onScroll={this._onScroll}
    onContentSizeChange={this.contentSizeChanged}
    renderSectionHeader={this._renderSectionHeader}
    sections={this.props.data}
/>
Closes https://github.com/facebook/react-native/pull/12708

Differential Revision: D4656338

Pulled By: sahrens

fbshipit-source-id: a2b585aa80247ff0dc2261b740003a6e77cb7a97
2017-03-04 19:15:19 -08:00
Spencer Ahrens 2022b1eee6 Improve docs
Reviewed By: hramos

Differential Revision: D4649351

fbshipit-source-id: 06cbd735bdb51b6d9d4997a348cbc191193485aa
2017-03-03 13:15:28 -08:00
Spencer Ahrens d2ed064519 Add to docs
Reviewed By: hramos

Differential Revision: D4638645

fbshipit-source-id: 6a37a5fd4e0d8c7769f6c241142b949dba665c34
2017-03-01 21:15:03 -08:00
Spencer Ahrens e70cdf0cc1 add to RN OSS package.
Summary: Also fix some bugs with fbjs requires.

Reviewed By: mkonicek

Differential Revision: D4635805

fbshipit-source-id: b0663b727632fe5784f1caa1ff20b160a82a3931
2017-03-01 17:55:30 -08:00
Spencer Ahrens 7b35eb3fdb Move new components out of `Experimental` directory
Summary: I think these are sufficiently baked. Also beef up comments.

Reviewed By: yungsters

Differential Revision: D4632604

fbshipit-source-id: 64ae6b240a05d62e418099f7403e1781f9b4717c
2017-03-01 09:16:05 -08:00