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
Summary: I noticed sometimes the swipeable row prioritizes the list view's vertical scroll too much, or returns to closed position if swiped a little distance but at high velocity. These new thresholds help both cases.
Reviewed By: hedgerwang
Differential Revision: D3441994
fbshipit-source-id: 84a9fdf63a33b3047a9a0205e87d8c489e9a6631
Summary: Slower bounce during mount and right swipe, so it feels less jarring to users.
Reviewed By: hedgerwang
Differential Revision: D3420169
fbshipit-source-id: d5da87c4a64eecf478edd626c96f5541ab94b56e
Summary: So users can know how to use
Reviewed By: hedgerwang
Differential Revision: D3399028
fbshipit-source-id: 5ce97c5464f1975145aba1bcf4b79550394859ae
Summary: Allow some right swipe so users know swiping is a possibility, with some bounceback.
Reviewed By: fkgozali
Differential Revision: D3388836
fbshipit-source-id: 596a6be3c641ff0ee6ac32d7c0d798478edef72b
Summary:
Makes compute call async from willReceiveProps and fixes crashes with proper bounds in render
function instead. This means that fast prop updates won't force rapid and synchronous row increments during
initial render.
Check `rowData` and `rowKey` explicitly so clients don't have to worry about preserving === rowData containers
around Relay data to prevent re-renders.
Also moves layout jump warning behind DEBUG since it's not a common issue any more.
Reviewed By: devknoll
Differential Revision: D3357710
fbshipit-source-id: ee2e5be04261d5722abd07a063b345960b0c5cbe
Summary: - Removed some styling from `SwipeableRow` that wasn't doing much and made slide out view full height
Reviewed By: fkgozali
Differential Revision: D3322849
fbshipit-source-id: 811eee9032c142c61d303ae7e966d8ef7903adaf
Summary:
Before:
- Android had the slideout row flash upon render due to it being rendered first
- iOS had the left side of each row load first, then rerender to show entire row when `scrollViewWidth` is available
Reason:
- Android was loading the slideout view first without an opacity check
- iOS was loading the swipeable view with width 0 first then stretching to `scrollViewWidth` when it was available via `onLayout`
Fix:
Render swipeable view with `flex: 1` then render slideout view
Reviewed By: fkgozali
Differential Revision: D3321466
fbshipit-source-id: 92a3b5e22034e06d05986ddb8c348796bafbbf34
Summary:
- Replace some fixes that were accidentally lost in local rebase that prevent jumpiness when incremental is disabled.
- Require each row to have a key specified by the caller to prevent jumping because of accidental duplicates or unneeded/problematic row re-rendering because of legit re-ordering.
Reviewed By: steveluscher
Differential Revision: D3322006
fbshipit-source-id: 0019aab07cb1fe2b148a14b5818de53aa373eb50
Summary:
Incremental rendering is a tradeoff between throughput and responsiveness because it yields. When we have plenty of
buffer (say 50% of the target), we render incrementally to keep the app responsive. If we are dangerously low on buffer
(say below 25%) we always disable incremental to try to catch up as fast as possible. In between, we only disable
incremental while actively scrolling since it's unlikely the user will try to press a button while scrolling.
This also optimizes some things then incremental is switching back and forth.
I played around with making the render window itself adaptive, but it seems pretty futile to predict - once the user
decides to scroll quickly in some direction, it's pretty much too late and increasing the render window size won't help
because we're already limited by the render throughput at that point.
Reviewed By: ericvicenti
Differential Revision: D3250916
fbshipit-source-id: 930d418522a3bf3e20083e60f6eb6f891497a2b8
Summary: Default image icon size for Quick Actions could cause slideout view to bleed over the slideable view. All styling has been removed and must now be passed in, thus allowing every caller to control size for best fit.
Reviewed By: furdei
Differential Revision: D3315696
fbshipit-source-id: 8f8b3d2cf7a005d42a18d434d9e0080c64597be0
Summary:
- Removed unnecessary rerending of `SwipeableListView` by properly managing `SwipeableListViewDataSource`
- Simplified `SwipeableRow` logic and improved swiping performance
- Added bounce effect
- Locked `ListView` from being scrollable when `SwipeableRow` is being swiped; behaviour mirrors that of Android on iOS and significantly improves framerates
Reviewed By: fkgozali
Differential Revision: D3307599
fbshipit-source-id: 168b6b72ef1f9e47d0145cf9e1baecbab3564b84
Summary: Center align text on Android
Reviewed By: fkgozali
Differential Revision: D3295222
fbshipit-source-id: c707d1102c8aa86aa04dc9b34a4746b1ff1543bc
Summary:
- Implemented a quick actions template to allow children buttons to be rendered in the slideout of `SwipeableListView`
- Implemented `QuickActionsButton` to allow buttons to be used in the slideout view
Reviewed By: fkgozali
Differential Revision: D3271946
fbshipit-source-id: b7c7412f44be64dea7084ca36c4b0f4f3842b008
Summary:
- Updated SwipeableListView to be much more performant by checking `rowHasChanged` more vigorously
- New `SwipeableListViewDataSource` used to mask implementation details from caller
Reviewed By: fkgozali
Differential Revision: D3272172
fbshipit-source-id: 02f66ed7fce7d587118ad7d82b20f8e78db44b7b
Summary:
Reduce re-renders by only looking at `props.data` that we're actually going to render and tracking if `this._rowFrames`
is dirty.
Differential Revision: D3195163
fb-gh-sync-id: 1e17ab410a312a37d4a93b84ea51ca32c3ede839
fbshipit-source-id: 1e17ab410a312a37d4a93b84ea51ca32c3ede839
Summary:First I searched for special cases that destructor PropTypes:
```
(?s)React\s*=\s*require\('react\-native'\).*(Children|PropTypes)[^\{\}]*\}\s*=\s*React;
```
I split them up manually.
Then I replaced the React = require('react-native') + destructuring pattern...
```
(?s)(const|var)\s+React\s*=\s*require\('react\-native'\)(.*[^\{\}]*\}\s*=\s*)React;
```
...with...
```
$1 React = require('react');
$1 ReactNative = require('react-native')$2ReactNative;
```
I used lint to figure out if I left some unnecessary imports.
Finally I grepped for just
```
React\s*=\s*require\('react\-native'\)
```
to catch any remaining patterns.
Also, `} = React.NativeModules` -> `} = ReactNative.NativeModules`.
Reviewed By: spicyj
Differential Revision: D3158991
fb-gh-sync-id: f97e8e921e193d6ea1a49d8d1bf3f09be7bed5c3
fbshipit-source-id: f97e8e921e193d6ea1a49d8d1bf3f09be7bed5c3
Summary:`WindowedListView` is designed for memory efficient scrolling of
huge/infinite lists of variable height rows. It works by measuring row heights
with `onLayout` and caching the results, then unmounting rows that scroll
offscreen, replacing them with an equivalent offset in the spacer view. Care is
taken to render a constant number of rows, and to only render one new row per
tick to improve framerate and app responsiveness. WLV is also compatible with
<Incremental> used within the rows themselves.
`WindowedListView` is not a drop-in replacement for `ListView` - it doesn't
support many of the features of `ListView`, such as section headers, only
accepts a simple array of data instead of a datasource, and doesn't support
horizontal scrolling. This may change in the future.
This is still experimental - we haven't deployed this for any production apps
yet.
Differential Revision: D2791402
fb-gh-sync-id: 5f104e0903f6ba586d2d651bdf82863a231279d8
fbshipit-source-id: 5f104e0903f6ba586d2d651bdf82863a231279d8
Summary:Everything wrapped in `<Incremental>` is rendered sequentially via `InteractionManager`.
The `onDone` callback is called when all descendent incremental components have
finished rendering, used by `<IncrementalPresenter>` to make the story visible all at once
instead of the parts popping in randomly.
This includes an example that demonstrates streaming rendering and the use of
`<IncrementalPresenter>`. Pressing down pauses rendering and you can see the
`TouchableOpacity` animation runs smoothly. Video:
https://youtu.be/4UNf4-8orQ4
Ideally this will be baked into React Core at some point, but according to jordwalke that's
going to require a major refactoring and take a long time, so going with this for now.
Reviewed By: ericvicenti
Differential Revision: D2506522
fb-gh-sync-id: 5969bf248de10d38b0ac22f34d7d49bf1b3ac4b6
shipit-source-id: 5969bf248de10d38b0ac22f34d7d49bf1b3ac4b6
Spencer Ahrens
Angela Hess
Sachin Rekhi
Hedger Wang
Chirag
Jonathan Koo
Leon
Travis Stanley
Fada Chen
leeight
Konstantin Raev
Jan Kassens
Tim Yung
Chace Liang
Fred Liu
Gabe Levi
Kaitlyn Lee
Adam Comella
Jeff Morrison
David Aurelio
Ben Alpert
Mengjue Wang
Steven Scaffidi
Ian Childs
陈三
Gerald Monaco
Geoff Lawson
James
Basil Hosmer
glevi@fb.com
Sebastian Markbage
Steven Luscher