Commit Graph

23 Commits

Author SHA1 Message Date
Dean G cb9b266b8e Update sectionList keyExtractor docs
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
2017-07-14 13:23:21 -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
Jan Söndermann 4429a8dde6 Fix typo
Summary: Closes https://github.com/facebook/react-native/pull/14676

Differential Revision: D5301501

Pulled By: javache

fbshipit-source-id: e9527031a728f2ccc422ef5664b6b8d613c9583f
2017-06-22 11:16:17 -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
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
Cherag Verma 05e02b2dc5 Update SectionList.js
Summary:
minor spelling error fix

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

- [ Found this small spelling error while reading thought of reporting it  ] Explain the **motivation** for making this change.
- [ Test not required ] Provide a **test plan** demonstrating that the code is solid.
- [ ] Match the **code formatting** of the rest of the codebase.
- [ ] Target the `master` branch, NOT a "stable" branch.

What existing problem does the pull request solve?

A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more.

If you have added code that should be tested, add tests.

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/14273

Differential Revision: D5160964

Pulled By: hramos

fbshipit-source-id: 3142cc511476e8b494576b8e31faf43eb97b40c5
2017-05-31 23:49:35 -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
Spencer Ahrens 5084e1ba0f use $ReadOnlyArray for section stuff
Reviewed By: kassens

Differential Revision: D4983581

fbshipit-source-id: 7951b6d225aee62932ac12047afb89a34fc58722
2017-05-03 10:34:57 -07:00
Spencer Ahrens 8d373f3186 Make section key optional
Summary: People rarely re-order sections so this is an annoying requirement and we can just use the index by default.

Reviewed By: thechefchen

Differential Revision: D4972154

fbshipit-source-id: 256c445b36c9ba101277614d30a6dc1dbd477ee0
2017-05-01 21:31:46 -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
Van der Auwermeulen Grégoire 23e8fcc68c ListItem JSX tag is not closed when used in SectionList
Summary:
Thanks for submitting a PR! Please read these instructions carefully:

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

When copy pasting the SectionList, got an error with a non closing JSX tag
What existing problem does the pull request solve?
Closing the JSX tag in 2 files
no test required
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more.

If you have added code that should be tested, add tests.

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

Differential Revision: D4908495

Pulled By: javache

fbshipit-source-id: f2dc49c9238d1da8906f7daf144429a57ad725a3
2017-04-18 16:45:28 -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
Spencer Ahrens 3bf7856700 disable removeClippedSubviews by default
Summary:
It's just causing problems (e.g. when combined with transform animations like those used
in some navigators) and hopefully it's not necessary with JS-side windowing. If people need the
perf, they can turn it on themselves.

Should fix https://github.com/facebook/react-native/issues/13316 and related issues.

Reviewed By: achen1

Differential Revision: D4884147

fbshipit-source-id: 95c82448581076c0d0b2c80b1cd80cc294898174
2017-04-13 16:05:52 -07:00
Spencer Ahrens 76307f47b9 add separator highlighting/updating support to `SectionList`
Reviewed By: thechefchen

Differential Revision: D4833604

fbshipit-source-id: cc1f85d8048221d9d26d728994b61237be625e4f
2017-04-12 17:01:03 -07:00
Spencer Ahrens 1b52c2a7ab Support elements for header/footer
Summary: It can be much more convenient instead of binding and setting `extraData` or what-not.

Reviewed By: blairvanderhoof

Differential Revision: D4829165

fbshipit-source-id: bb781fedc831059e7b5065ea4357955aed79beda
2017-04-07 01:00:39 -07:00
Eric Vicenti 9c5cc145e6 Fixwebsite
Summary:
This fixes the website build because docgen was unable to parse this `*`
Closes https://github.com/facebook/react-native/pull/13300

Differential Revision: D4828837

Pulled By: ericvicenti

fbshipit-source-id: 7ebc04241742f7bb5a871e7e438fb23af90a70bd
2017-04-04 13:52:31 -07:00
Spencer Ahrens ecf4c48966 Add `scrollToLocation` for `SectionList`
Summary:
Basic functionality that takes `itemIndex` and `sectionIndex`

**TestPlan**

Added this to onChangeText:

	this._listRef.getNode().scrollToLocation({itemIndex: 6, sectionIndex: 3, viewOffset: 25});

and saw it scroll to the correct position right under the sticky header.

Reviewed By: bvaughn

Differential Revision: D4821714

fbshipit-source-id: 261e373f9c4af384db5a363df5b0fd9274b1bdfe
2017-04-03 18:48:48 -07:00
Spencer Ahrens 87bdcbde6a propagate getScrollResponder, getScrollableNode
Summary:
so users can call `setNativeProps` and do more compositing.

**Test Plan:**

Added this to `onPress` of `SectionListExample` and `FlatListExample`:

    this._listRef.getNode().getScrollResponder().setNativeProps({scrollEnabled: false});

and saw scroll get disabled. Note the call to `getNode` because we are using the `Animated.createComponent` wrapper.

Reviewed By: achen1, bvaughn

Differential Revision: D4821711

fbshipit-source-id: 8d1f3dd7ccc646524f154721c5c7036620d57132
2017-04-03 18:48:48 -07:00
Spencer Ahrens 128596b311 Fixup comments to indicate sticky headers are now supported
Reviewed By: achen1

Differential Revision: D4822080

fbshipit-source-id: a0f09eedca40ccc72581b7f6e55a09d9e8f3f61f
2017-04-03 18:48:47 -07:00
Spencer Ahrens 22a4205bdd onEndReached should clear when data changes
Summary: it's possible to update data and not have the content length change, which could prevent onEndReached from ever firing again, so fix that.

Reviewed By: bvaughn, yungsters

Differential Revision: D4783818

fbshipit-source-id: ec4640f4b8cf820165b045eaafee6fb41c0b0499
2017-03-28 20:07:09 -07:00
Spencer Ahrens acc1edd188 expand example with `PureComponent` usage, explicit `extraData` prop, `initialNumToRender`
Summary: Should help with some common pitfalls, e.g. https://github.com/facebook/react-native/issues/12512#issuecomment-289521758.

Reviewed By: yungsters

Differential Revision: D4781833

fbshipit-source-id: 3dec2f0c444645ad710e9ed81390636da4581f0f
2017-03-27 20:00:10 -07:00
Eric Vicenti ff4468ad1b Re-License Lists with standard React Native License
Reviewed By: sahrens

Differential Revision: D4771084

fbshipit-source-id: 9878a813b7dacb6ec1215fee469b946df0752de9
2017-03-24 14:31:19 -07:00