Summary:
After a fair bit of use, we have concluded that the `ItemComponent` mechanism is not worth the
hassle. Flow has trouble type checking it thoroughly, requiring an 'item' prop is annoying, and it
is very common to need to capture `this` anyway, e.g. for an `onPress` handler. A common pattern was
something like:
_renderItem = ({item}) => <MyItem foo={item.foo} onPress={() => this._onPress(item)} />};
...
ItemComponent={this._renderItem}
which wouldn't flow check the props and doesn't benefit from reusing components.
If we find some specific patterns that would benefit from the `ItemComponent` pattern, we can create
a new component that provides that API and wraps `FlatList` under the hood.
I'm going to do `SectionList` in a stacked diff.
Reviewed By: bvaughn
Differential Revision: D4625338
fbshipit-source-id: a4901f1c9d77e0115b0b8032b8c210f624e97ea3
Summary: `Viewable` is a weird name - I think `ViewToken` is more clear? Also easier to grep for.
Reviewed By: yungsters, bvaughn
Differential Revision: D4600762
fbshipit-source-id: dbfa5eec1b91166c4889dcb6b87d7832090be9e9
Summary:
It's pretty common to want to wait until the user scrolls a view to consider any items
viewable, so `waitForScroll` enables that behavior.
It's also pretty common to want to ignore items that are quickly scrolled out of view, so we add
`minViewTime` to handle that case.
Reviewed By: bvaughn
Differential Revision: D4595659
fbshipit-source-id: 07bc8e89db63cb68d75bdd9bedde3183c38a3034
Summary:
The new `ViewabilityConfig` API has a typo:
`itemVisiblePercentThreashold` should be `itemVisiblePercentThreshold`.
Thought it would be good to fix this before people start depending on a property containing a typo :-)
Updated tests to match.
Closes https://github.com/facebook/react-native/pull/12593
Differential Revision: D4619798
Pulled By: ericvicenti
fbshipit-source-id: 0aa8b6cf9ae7e5638607195759e4bd51140667fe
Summary: Update the props to allow not passing in an onScroll callback
Reviewed By: zjj010104
Differential Revision: D4604474
fbshipit-source-id: 9371776d1451f7bd0247fbafaf4bf7198291d1b1
Summary:
- Properly inherit flow types from base components, including `defaultProps`
- template-ify the `Item` type as it flows from the `data` prop into `ItemComponent`
Note that for `SectionList` is is harder to do the `Item` typing because each section in the
`sections` array can have a different `Item` type, plus all the optional overrides...not sure how to
tackle that.
Reviewed By: yungsters
Differential Revision: D4557523
fbshipit-source-id: a0c5279fcdaabe6aab5fe11743a99c3715a44032
Summary: Makes it easy to render separators between sections, as opposed to between items.
Reviewed By: yungsters
Differential Revision: D4555707
fbshipit-source-id: 34572ab4b2c5b47db640543149fe2551c34ccf7b
Summary:
The index is used to make sure the layout corresponds to the correct index, which can get
out of sync if cell layout is cached and then cells are re-ordered.
Reviewed By: bvaughn
Differential Revision: D4554721
fbshipit-source-id: 9acb37f390a6e40ad89f813b78f81b399ec11e9a
Summary:
Simple API takes structured `sections` prop instead of `data` array. `sections` is an array of
`Section` objects, each of which has a `key` and an `itemData` array which is analogous to a
`FlatList` `data` prop, plus optional props like `ItemComponent` that can be overridden on a
per-section level, allowing heterogeneous section item rendering via clean composition.
Flattens the sections data and renders with VirtualizedList under the hood. Doesn't support
sticky headers yet.
Reviewed By: yungsters
Differential Revision: D4519354
fbshipit-source-id: 58de959dadb6f55f681245ecd99a5dc356a48f36
Summary:
React Native 0.39 introduced a breaking change through a new C-based implementation of css-layout. Developers were encouraged to remove unnecessary flex: 1 styles where no longer required to address any resulting layout issues.
The SwipeableListView has not yet been updated to reflect this change. Specifically, SwipeableRow still sets flex: 1 even though it shouldn't.
This was resulting in a rendering issue for folks when they upgraded to React Native 0.39 and used SwipeableListView that caused significant initial flickering when rendering a SwipeableListView. The solution was simply to remove flex: 1 from the SwipeableRow implementation.
This small change removes flex: 1 to resolve this issue.
Suggested reviewer (initial SwipeableListView contributor): fred2028
See this issue for more details: https://github.com/facebook/react-native/issues/11441
Closes https://github.com/facebook/react-native/pull/11521
Differential Revision: D4532562
Pulled By: lacker
fbshipit-source-id: 5c2907186d00481a731bd81794947a019465a031
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
Summary:
The back view in <SwipeableRow /> should not be rendered unless the front view has been
rendered and its layout has been measured.
Reviewed By: fred2028
Differential Revision: D4509584
fbshipit-source-id: 72ad0c8e7dec258ae3a1ba88c0adeb9ad0bfdf6d
Summary:
**motivation**
Right now `SwipeableQuickActions` only allows two actions. Let this limit be in the userland.
cc fred2028
Closes https://github.com/facebook/react-native/pull/8528
Differential Revision: D4211729
Pulled By: ericvicenti
fbshipit-source-id: 903592190b9855ffe9da44864cdc276bc1e18a7c
Summary:
If a SwipeableRow does not have background color defined, QuickAction is rendered below the row. In such case, you can leverage openRowID defined in dataSource. For instance, one can render quickAction only for the open row. The openRowID, however, does not clear when the row is closed. It only clears when the ListView is scrolled. This is s small PR to fix address it.
Closes https://github.com/facebook/react-native/pull/11380
Differential Revision: D4500952
Pulled By: mkonicek
fbshipit-source-id: a965dfb45b77cc1669de405b627d13e2cee59420
Summary:
Without allowing Native Responder on Android, ListView get's Deadlocked while trying to scroll. This happens as soon as a PanResponder fires.
This Commit prevents this Issue and the iOS Optimization for Locking / Unlocking Listview Scrolls does a good job on Android too. So there's no need to prevent the Native Responder.
**Test plan (required)**
Compile on Android in Production Mode and try to scroll before and after this change.
Closes https://github.com/facebook/react-native/pull/8556
Differential Revision: D4438057
Pulled By: hramos
fbshipit-source-id: 05f3b7e6b4e49f5c941c7e1ce72c8bf6d66a9a28
Summary:
Currently, swipeableList expects maxSwipeoutDistance to be a number. This breaks when you want each row to have a variable width slideoutView.
This PR add support for passing maxSwipeoutDistance as a number(as before) or a function which gets the current rowData for conditionally returning the distance based on the row data.
Closes https://github.com/facebook/react-native/pull/10189
Differential Revision: D4168561
Pulled By: hramos
fbshipit-source-id: b78564f83279cab3bf04297034ca78edfff74be7
Summary:
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
Explain the **motivation** for making this change. What existing problem does the pull request solve?
Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
**Test plan (required)**
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
**Code formatting**
Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
For more info, see
Closes https://github.com/facebook/react-native/pull/10413
Differential Revision: D4028108
fbshipit-source-id: 99a864dfda578d640f582b296583591415ba26cd
Summary: If a user scrolls the `SwipeableListView`, any open row(s) will close.
Reviewed By: furdei
Differential Revision: D3903787
fbshipit-source-id: efd9ae896ba50ad6e83e72d52bc1f5c0c35efd61
Summary: Cleans things up and also defers rendering rows if there is an interaction happening.
Reviewed By: achen1
Differential Revision: D3817231
fbshipit-source-id: fd08d0ca7cb6c203178f27bfc5a0f55469135c3a
Summary: Modified logic and constants to make the swipable row animations feel more natural and smooth.
Reviewed By: fred2028
Differential Revision: D3801391
fbshipit-source-id: d4301fe01a190803b5bc27373a9755086b6c431d
Summary:
Due to an earlier commit, we now have to use the full path for requiring `performanceNow`.
**Test plan (required)**
Verified that the IncrementalExample works when adding it to UIExplorer.
Closes https://github.com/facebook/react-native/pull/9595
Differential Revision: D3775101
Pulled By: javache
fbshipit-source-id: 6252ce8c872896f4cfdb9a31bdbc79d6aaf4684d
Summary: create new RCTI18nManager.js to warp-up native module I18nManager and fix current use of it.
Reviewed By: ericvicenti
Differential Revision: D3547427
fbshipit-source-id: 53a695c94ca6bba2f566d0725c553e58d60bf451
Summary:
**motivation**
Currently when using a non-touchable visible row for a SwipeableRow, the scroll on list view is blocked.
**Test Plan**
```
<SwipeableListView
dataSource={dataSource}
renderRow={() => <View style={styles.row}/>}
renderQuickActions={() => <View style={styles.hiddenrow}/>}
/>
```
* Tested that when using non-touchable for renderRow allows scrolling on list view.
* Tested that when using touchable for renderRow allows scrolling on list view.
cc fred2028
Closes https://github.com/facebook/react-native/pull/8537
Differential Revision: D3542407
Pulled By: fred2028
fbshipit-source-id: b7ad7ff7c7dd1b717544746a85bb265414aa18f4
Summary:
Flipped the gesture for SwipeableRow
Provide RTL support for SwipeableRow. When developer set RTL layout in their app, all the animation and gesture will change to RTL status.
Reviewed By: fkgozali
Differential Revision: D3532919
fbshipit-source-id: 76fc94cdaa8457350e9bbe3366aa714c9eb45245
Summary:
This is simple fix to SwipeableListView. According to SwipeableListViewDataSource, the only method available is cloneWithRowsAndSections. If you try to get the data from a SwipeableListView, without this fix it won't work. This change fixes the problem so that SwipeableListView can work correctly.
Closes https://github.com/facebook/react-native/pull/8493
Differential Revision: D3523384
fbshipit-source-id: 359ff274fabcab676ed6dee24f0652c4146cde69
Spencer Ahrens
Espen Hovlandsdal
Fred Liu
Angela Hess
Sachin Rekhi
Hedger Wang
Chirag
Jonathan Koo
Leon
Travis Stanley
Fada Chen
leeight
Konstantin Raev
Jan Kassens
Tim Yung
Chace Liang
Gabe Levi
Kaitlyn Lee
Adam Comella
Jeff Morrison
David Aurelio
Ben Alpert
Mengjue Wang
Steven Scaffidi
Ian Childs