Commit Graph

137 Commits

Author SHA1 Message Date
Fred Liu 4868948175 NUX-y bounce
Summary: On mount, bounce the 1st row so users know it's swipeable.

Reviewed By: fkgozali

Differential Revision: D3395214

fbshipit-source-id: 6d391209014a6a7957a2160734d8ef6548b7693b
2016-06-07 09:13:21 -07:00
Fred Liu 26a92220c2 Allow some right swipe
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
2016-06-06 14:58:59 -07:00
Geoff Lawson 2fd537c55d Incorrect import reference of emptyFunction causes error when importi…
Summary:
Experimental component SwipeableListView fails to import due to incorrect import reference.  Followed example use of import of emptyFunction found in https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L31
Closes https://github.com/facebook/react-native/pull/7954

Differential Revision: D3394202

fbshipit-source-id: db8ddc9d9635878f0ce1fb969ef6c6e3c27d63f3
2016-06-06 13:58:24 -07:00
James 1facfb77da Fix for "Unable to resolve module nullthrows"
Summary:
Recreated due to mistake with https://github.com/facebook/react-native/pull/7594.
Closes https://github.com/facebook/react-native/pull/7934

Differential Revision: D3391010

fbshipit-source-id: 7aad253d29f2272cfdaace1c1bb4f54a63faa353
2016-06-05 03:13:25 -07:00
Fred Liu c1ab766096 Disable right-swipe from closed position
Summary: Disables right-swipe from closed position.

Reviewed By: fkgozali

Differential Revision: D3368525

fbshipit-source-id: b850458bd088dfda09bbbe4db71b33c3577a2167
2016-05-31 16:28:22 -07:00
Spencer Ahrens 44554262a4 Fix prop update perf issue with windowed list view
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
2016-05-27 18:43:24 -07:00
Basil Hosmer ac5636dd59 explicit type args in react-native-github
Reviewed By: vjeux

Differential Revision: D3342856

fbshipit-source-id: ba5a4d5529fc9d1d1efe98cc175d718c5f044a5b
2016-05-24 18:28:26 -07:00
Spencer Ahrens 0a027167de Fix WLV bug when data shrinks
Differential Revision: D3341453

fbshipit-source-id: 008cb65db6da74f2525ae8e667b702bc48f9f9ad
2016-05-24 13:28:20 -07:00
Fred Liu ca71143ff4 Faster animation
Summary: Reduce auto-swipe animation duration to 200 ms to increase swipe speed.

Reviewed By: zjj010104

Differential Revision: D3333942

fbshipit-source-id: a9e0b15926ef854adcd9e1d2c1e67fd080139d84
2016-05-23 10:28:34 -07:00
Fred Liu 3ccfb58701 Simplify SwipeableRow styling
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
2016-05-19 21:43:42 -07:00
Fred Liu 62e588bece Fix Android flash and iOS juttering
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
2016-05-19 21:43:42 -07:00
Spencer Ahrens 5e91a2a312 Fix 95% of WindowedListView jumpiness
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
2016-05-19 14:58:26 -07:00
Spencer Ahrens 838d8d4094 adaptive render window throughput
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
2016-05-18 17:13:23 -07:00
Fred Liu 514677525a Prevent `SwipeableRow` bleed
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
2016-05-18 16:43:20 -07:00
Fred Liu 7f1346bfdd Top align quick action buttons
Summary: Top align the button icons

Reviewed By: fkgozali

Differential Revision: D3317805

fbshipit-source-id: b385f9f4e41db1253bb4d523cb07093c63e39da0
2016-05-18 12:43:24 -07:00
Fred Liu 12fcacb58f Full width styling for quick actions
Summary: - Used absolute positioning to render full-width quick actions

Reviewed By: fkgozali

Differential Revision: D3302467

fbshipit-source-id: cdcac88b20eff7a71be1ab8bb39e6888216dad84
2016-05-17 01:43:27 -07:00
Fred Liu c779e233b6 Improve SwipeableListView performance
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
2016-05-16 20:28:27 -07:00
Fred Liu 3f1cd5aa4e Center align text on Android
Summary: Center align text on Android

Reviewed By: fkgozali

Differential Revision: D3295222

fbshipit-source-id: c707d1102c8aa86aa04dc9b34a4746b1ff1543bc
2016-05-12 16:09:30 -07:00
Fred Liu 853074d1ee Pass along scrollResponder()
Summary: Allows calls to `scrollResponder()` without crashing

Reviewed By: fkgozali

Differential Revision: D3293272

fbshipit-source-id: c46d99c0d7430a37fc364fa3aaf77dd192d7ab37
2016-05-12 11:49:24 -07:00
Fred Liu 763e9cce27 SwipeableListView quick actions
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
2016-05-11 18:02:20 -07:00
Fred Liu 052cd7eb8a SwipeableListView
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
2016-05-11 00:25:20 -07:00
Fred Liu 2132ad1441 Swipeable list view enhancements
Summary:
- Removes "flickering" on first load
- Takes in Map<rowID, slideoutView> to display customs slideout view in `SwipeableRowListView`

Reviewed By: furdei

Differential Revision: D3267262

fb-gh-sync-id: a89806138b9172b3c184cc117504e205632a36d0
fbshipit-source-id: a89806138b9172b3c184cc117504e205632a36d0
2016-05-05 20:45:24 -07:00
Fred Liu 2a7f6aeda7 Swipeable row container
Reviewed By: hedgerwang

Differential Revision: D3263983

fb-gh-sync-id: f77bb3dd7771c16e1f26398171b7784e3d89cb1d
fbshipit-source-id: f77bb3dd7771c16e1f26398171b7784e3d89cb1d
2016-05-05 11:49:29 -07:00
Fred Liu d037840158 SwipeableRow fix
Reviewed By: fkgozali

Differential Revision: D3261975

fb-gh-sync-id: f0c75aca1b16f810420a78271937777c5068c9d2
fbshipit-source-id: f0c75aca1b16f810420a78271937777c5068c9d2
2016-05-04 19:51:18 -07:00
Fred Liu 9b1a3c79e9 Swipeable row component
Reviewed By: furdei

Differential Revision: D3259527

fb-gh-sync-id: c2503476eb708add8753de8c00d0c3f5f3058474
fbshipit-source-id: c2503476eb708add8753de8c00d0c3f5f3058474
2016-05-04 15:49:20 -07:00
Spencer Ahrens 2c3576a50a Refactor connection/list stuff
Reviewed By: devknoll

Differential Revision: D3233991

fb-gh-sync-id: bd10dd2856da6b8fb3bac7a8ec3a7e34eeb58f80
fbshipit-source-id: bd10dd2856da6b8fb3bac7a8ec3a7e34eeb58f80
2016-04-30 10:28:55 -07:00
Spencer Ahrens 6cae8b7c02 Optimize WindowedListView
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
2016-04-29 10:15:29 -07:00
Spencer Ahrens 09a34f4d0f Integrate RelayConnection with RNFeed
Reviewed By: ericvicenti

Differential Revision: D2750242

fb-gh-sync-id: fa72d67f554823128bf62786b34e5b9592dc7c89
fbshipit-source-id: fa72d67f554823128bf62786b34e5b9592dc7c89
2016-04-22 22:48:18 -07:00
glevi@fb.com 91d4a093ea Fix or suppress errors in react-native
Reviewed By: jeffmo

Differential Revision: D3209973

fb-gh-sync-id: bdc9b4afc0b187b1b16fa6bfb1c34adb4089ab81
fbshipit-source-id: bdc9b4afc0b187b1b16fa6bfb1c34adb4089ab81
2016-04-21 19:47:24 -07:00
Spencer Ahrens ecae44aaae Fix potential "Should never unset includeInLayout" invariant
Reviewed By: devknoll

Differential Revision: D3194174

fb-gh-sync-id: 67d065ea90f8416a5fc7e3651c68350f895f9639
fbshipit-source-id: 67d065ea90f8416a5fc7e3651c68350f895f9639
2016-04-19 13:55:26 -07:00
Sebastian Markbage a80dd9a92a Fix up this pattern var React = require('react-native');
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
2016-04-08 20:37:22 -07:00
Steven Luscher 58db9f3996 Add key to footer wrapper in WindowedListView
Reviewed By: frantic

Differential Revision: D3155113

fb-gh-sync-id: 27d9f8b09e2d162c7537fefd02fc824a1c4709ae
fbshipit-source-id: 27d9f8b09e2d162c7537fefd02fc824a1c4709ae
2016-04-08 17:58:34 -07:00
Spencer Ahrens 06b2998de8 Rework scroll management
Reviewed By: devknoll

Differential Revision: D3138464

fb-gh-sync-id: fd1bb7f623c689836ae52ea8bf384d8efccddfea
fbshipit-source-id: fd1bb7f623c689836ae52ea8bf384d8efccddfea
2016-04-06 14:09:27 -07:00
Spencer Ahrens ab44d32ec5 Better Incremental/TaskQueue error reporting
Reviewed By: yungsters

Differential Revision: D3135010

fb-gh-sync-id: 2d6d8800c7f7557221bd57869b6a6fa30d65f122
fbshipit-source-id: 2d6d8800c7f7557221bd57869b6a6fa30d65f122
2016-04-05 02:35:22 -07:00
Spencer Ahrens cd79e269dc cleanup and open source WindowedListView
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
2016-04-01 13:54:29 -07:00
Spencer Ahrens ca353d0829 A little more debugging code for Incremental
Reviewed By: astreet

Differential Revision: D3091688

fb-gh-sync-id: 4f91d5126a16b56904fa4af7acdc32b9bb873c6d
shipit-source-id: 4f91d5126a16b56904fa4af7acdc32b9bb873c6d
2016-03-24 19:44:29 -07:00
Spencer Ahrens f21da3aa31 <Incremental> for incremental rendering
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
2016-03-10 08:14:23 -08:00