Commit Graph

13 Commits

Author SHA1 Message Date
Sophie Alpert 2e1707d0e6 Fix RCTRefreshControl jumping
Reviewed By: shergin

Differential Revision: D6470066

fbshipit-source-id: 44fb03c264d98af61dccfa0146690fd49ee9f2ab
2017-12-03 16:15:53 -08:00
Vojtech Novak 75d62bf0a8 fix #10747 (ScrollView rendered incorrectly with RefreshControl)
Summary:
set the y offset to 0, since 0 offset is where we want to be after we hide the refreshControl.

Tested in emulator with ios 8, 9, 10 and also with section headers.
Closes https://github.com/facebook/react-native/pull/15033

Differential Revision: D6265930

Pulled By: shergin

fbshipit-source-id: b249c4713de68fc6b3a32cee7f995dc352315970
2017-11-07 16:16:56 -08:00
Mehdi Mulani 93a263d874 Make RCTRefreshControl not dependent on order of setting properties
Summary: With the Cxx bridge, properties are not guaranteed to be set it any order (and furthermore, they should not be). RCTRefreshControl previously had its title set first, and would crash otherwise. This fixes that.

Reviewed By: mhorowitz

Differential Revision: D4580253

fbshipit-source-id: 39baecceb8b67c6a851c08ba9cabbf4dc99359cb
2017-02-17 15:16:01 -08:00
Aleksei Androsov 3eeaffce1a RefreshControl doesn't render when initial refreshing state is true
Summary:
Example (index.ios.js):

```
'use strict';

import React from 'react';
import {ListView, RefreshControl, Text, View} from 'react-native';

class BugExample extends React.Component {

    render() {
        return (
            <ListView
                style={{backgroundColor: 'red'}}
                contentContainerStyle={{backgroundColor: 'green'}}
                refreshControl={
                    <RefreshControl
                        refreshing={true}
                        onRefresh={() => {}}
                    />
                }
                dataSource={
                    new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(['a', 'b', 'c'])
                }
                renderRow={(item) => {
                    return (
                        <View>
                            <Text>{item}</Text>
                        </View>
                    );
                }}
            />
        );
    }
}
```

RN version: 0.34, 0.35-rc
iOS version (emulator): 9.
Closes https://github.com/facebook/react-native/pull/10321

Differential Revision: D4142774

Pulled By: mmmulani

fbshipit-source-id: 743b865a6e1c1fb09c7cfc48631ad383bd593f89
2016-11-07 15:58:43 -08:00
Gant dcdf16a0fb RefreshControl Position Bug
Summary:
Refresh bug #7976
This bug has persisted for 3 versions of React Native.   Currently everyone is having to do a silly fix, documented in the bug.   I spent an hour trying to find the source of the bug.   Failing to find the issue quickly, I've just decided to make this simple bugfix.

According to janicduplessis #7976 we will likely be re-writing this control in iOS 10.
Closes https://github.com/facebook/react-native/pull/9249

Differential Revision: D3817227

fbshipit-source-id: f98282aadeca3e85239836f589eda901d454f2ce
2016-09-04 01:43:38 -07:00
Arno Fortelny cac5ce3b93 RefreshControl on initial render will not beginRefresh when refreshing state is false
Summary:
There's an edge case in the `RefreshControl` which causes it to show as refreshing when the state is set to false. When the component is initialized with `refreshing` set to `true` on initial render but set to `false` before `layoutSubviews` is called, it will call `beginRefresh` and ignore its state. That's because `layoutSubviews` never checks if `_currentRefreshingState` is in fact still `true`, it merely assumes it is.

This is fixed by simply doing a check for `_currentRefreshingState` before entering `beginRefresh` from `layoutSubviews`.
Closes https://github.com/facebook/react-native/pull/7556

Differential Revision: D3300124

fbshipit-source-id: d1dce8612e2c03b1f14284d513803d00af4b5c8a
2016-05-13 14:43:26 -07:00
Li Jie 93b39b7326 Fix refreshing state
Summary:When RefreshControl.refreshing change twice within 250ms, it ignores the second changing.

**Test plan (required)**

```
refresh () {
  this.setState({
    refreshing: true
  })

  fetch('/api')
  .then(() => {
    this.setState({
      refreshing: false
    })
  })
  .catch((error) => {
    this.setState({
      refreshing: false
    })
  })
}

render() {
  return (
    <ScrollView
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={this.refresh.bind(this)}
        />
      }>
      <TouchableHighlight onPress={this.refresh.bind(this)}>
        <View>
          <Text>Touch Me!</Text>
        </View>
      </TouchableHighlight>
    </ScrollView>
  )
}
```

* Test Case 1: Touch "Touch Me!", if get response less than 250ms, the state is always refreshing.

* Test Case 2: Close network, Touch "Touch Me!", the state is always refreshing.
Closes https://github.com/facebook/react-native/pull/6737

Differential Revision: D3189627

fb-gh-sync-id: 81c1932408e1ab99732b8340a5e3bd557629a66b
fbshipit-source-id: 81c1932408e1ab99732b8340a5e3bd557629a66b
2016-04-17 00:33:25 -07:00
Sokovikov 849a0f31ac Allow to set refresh control title color
Summary:Closes #6812

![simulator screen shot 14 apr 2016 12 13 36](https://cloud.githubusercontent.com/assets/1488195/14521441/0abccf5c-0232-11e6-94dc-0ebdbfac4b3f.png)
Closes https://github.com/facebook/react-native/pull/6970

Differential Revision: D3189244

fb-gh-sync-id: 7625b6ab5859aaa20bc0cb379855c5daeb584abf
fbshipit-source-id: 7625b6ab5859aaa20bc0cb379855c5daeb584abf
2016-04-16 15:15:25 -07:00
skellyb c254d081fd endRefreshing animates scrollView to top inset instead of zero
Summary:To use a ScrollView and RefreshControl with a translucent navigation bar you have to set the top inset to the height of that bar, allowing the content to scroll underneath. After changes to RCTRefreshControl in  **v0.22**, `endRefreshing` always animates the offset to 0, hiding content behind the navigation bar. What you'd expect on iOS is for it to return to the bottom of the bar.

**Test plan**
To see this in action, refer to the UIExplorerApp. In RefreshControlExample.js if you set the ScrollView's `contentInset={{top: 100}}` you'll see the refresh control UI is where you'd expect, and after refresh the list returns to the correct position.
Closes https://github.com/facebook/react-native/pull/6848

Differential Revision: D3157934

Pulled By: mkonicek

fb-gh-sync-id: c2186a4541fb3988677f0851eb12c259cd003750
fbshipit-source-id: c2186a4541fb3988677f0851eb12c259cd003750
2016-04-13 08:15:24 -07:00
Janic Duplessis 102a31c13e Fix RefreshControl layout on screen rotation and consecutive pull to refresh not working properly
Summary:Fixes the RefreshControl layout after a screen rotation. See #6311 for a more detailed explanation. I fixed it by adjusting the frame of the RefreshControl in `layoutSubviews` of the parent ScrollView.

While working on fixing this I noticed that when doing a 'pull to refresh' and then not scrolling and wait for it to end the next one will not behave like the first one (it will require pulling further down for the spinner to start spinning). I fixed that too by scrolling the scrollview back to 0 manually before calling `UIRefreshControl.endRefreshing`.

**Test plan (required)**
Tested using the UIExplorer RefreshControl example.

When doing a pull to refresh and then rotating the screen the RefreshControl must stay positioned properly.
Doing multiple consecutive pull to refresh without scrolling after should all behave the same.

Fixes #6311
Closes https://github.com/facebook/react-native/pull/6359

Differential Revision: D3023727

fb-gh-sync-id: f50ae52ea769c2b3e5025c362544a8809a71aa00
shipit-source-id: f50ae52ea769c2b3e5025c362544a8809a71aa00
2016-03-08 04:00:34 -08:00
Janic Duplessis 671b975d92 Fix a bug with ListView with sticky headers + RefreshControl
Summary:The bug is caused by a weird race condition. What happens is that when calling `UIRefreshControl#endRefreshing` the `UIScrollView` delegate `scrollViewDidScroll` function is called synchronously and then `dockClosestSectionHeader` crashes because the sticky header indexes are updated but not the contentView children.

I fixed it by adding an updating property on `RCTRefreshControl` and setting it before calling `endRefreshing` so we can know not to call `dockClosestSectionHeader` at that moment.

Tested with both `RefreshControl` and `onRefreshStart` prop.

I reproduced the bug by replacing ListViewExample.js in UIExplorer with https://gist.github.com/janicduplessis/05fc58e852f3e80e51b9

Fixes #5440

cc nicklockwood
Closes https://github.com/facebook/react-native/pull/5445

Differential Revision: D2953984

Pulled By: nicklockwood

fb-gh-sync-id: c17a6a75ab31ef54d478706ed17a8115a11d734e
shipit-source-id: c17a6a75ab31ef54d478706ed17a8115a11d734e
2016-02-19 05:55:36 -08:00
Janic Duplessis 3e1f1ea7bb Allows RefreshControl to be mounted with refreshing = true
Summary:
RefreshControl did not start refreshing when refreshing was set to true initially. It also did not start refreshing on iOS when setting the prop from false to true without doing a pull to refresh gesture.

This was a pain in the ass to make work on iOS because UIRefreshControl seems super sensitive to when beginRefreshing can be called, for the initial render I need to call it in layoutSubviews. I also have to manually adjust the scrollview content offset when calling beginRefreshing. The code is a bit hacky but it was the only solution I found that was actually working.

Fixes #5716
Closes https://github.com/facebook/react-native/pull/5745

Reviewed By: svcscm

Differential Revision: D2910716

Pulled By: nicklockwood

fb-gh-sync-id: d60e73bcfe8d86bb01249ba5f17e6a23c5a5aff6
2016-02-07 13:40:29 -08:00
Janic Duplessis 44f7a00e95 Cross platform PullToRefreshView component
Summary:
Both iOS and Android currently support some sort of native pull to refresh control but the API was very different. I tried implementing a component based on PullToRefreshViewAndroid but that works on both platforms.

I liked the idea of wrapping the ListView or ScrollView with the PullToRefreshView component and allow styling the refresh view with platform specific props if needed. I also like the fact that 'refreshing' is a controlled prop so there is no need to keep a ref to the component or to the stopRefreshing function.

It is a pretty rough start so I'm looking for feedback and ideas to improve on the API before cleaning up everything.

On iOS we could probably deprecate the onRefreshStart property of the ScrollView and implement the native stuff in a PullToRefreshViewManager. We could then add props to customize the look of the UIRefreshControl (tintColor). We could also deprecate the Android only component and remove it later.
Closes https://github.com/facebook/react-native/pull/4915

Reviewed By: svcscm

Differential Revision: D2799246

Pulled By: nicklockwood

fb-gh-sync-id: 75872c12143ddbc05cc91900ab4612e477ca5765
2016-01-04 08:00:29 -08:00