eclipsesource / eclipsesource/tabris-js

Improve pull-to-refresh UX when using ScrollView

Open
#1,827 1 comment 0 reactions 0 assignees View on GitHub
api ios
Dominant language
JavaScript
Stars
1.4k
Forks
171
PR merge metrics
No merged PRs in 30d

Description

### Problem description

Currently, the only possibility to use pull-to-refresh with `ScrollView` is wrapping it in a `RefreshComposite`. A`ScrollView` wrapped in a `RefreshComposite` behaves differently than a `CollectionView` regarding pull-to-refresh.

When the `ScrollView` hasn't yet been scrolled to top and pulling down beyond the minimal scroll offset, the `ScrollView` will overscroll instead of initiating the pull-to-refresh action.

When using a `CollectionView` in the same scenario, the pull-to-refresh action will be triggered instead of overscrolling, which is the more natural and expected UX.

|RefreshComposite > ScrollView | CollectionView|
|---|---|
|![scrollComposite](https://user-images.githubusercontent.com/2341769/54282802-06eeb500-459d-11e9-8de6-5ce72231c65a.gif)|![collectionView](https://user-images.githubusercontent.com/2341769/54282836-1a018500-459d-11e9-9381-5660cf545d5f.gif)|

### Expected behavior

Instead of overscrolling, `ScrollView` wrapped inside of a `RefreshComposite` with `refreshEnabled: true` should always trigger the pull-to-refresh action when pulling down beyond the minimal scroll offset. If this is technically not possible, would it be possible to introduce a more natural pull-to-refresh behavior, similarly to the one used with `CollectionView`, on `ScrollView` itself?

### Environment

- Tabris.js version: 3.0.0-beta2
- OS: 12.1

### Code snippet

```javascript
import {RefreshComposite, ScrollView, TextView, contentView} from 'tabris';

contentView.append(


{Array.from(new Array(20).keys()).map((i) => (

))}



)

function hideIndicatorAfterDelay({target}: {target: RefreshComposite}) {
setTimeout(() => {
target.refreshIndicator = false;
}, 2000);
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.