Buggy RefreshControl

[ashwinbaweja]

According to the docs for RefreshControl:

Note: refreshing is a controlled prop, this is why it needs to be set to true in the onRefresh function otherwise the refresh indicator will stop immediatly.

Within my onRefresh function, I'm using setState to set an isRefreshing flag to true. However, according to the React docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

As a result, when the following code is run in RefreshControl.js,

_onRefresh() {
    this.props.onRefresh && this.props.onRefresh();

    if (this._nativeRef) {
      this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
    }
  }

this.props.refreshing is still false (since the state hasn't been updated and thus RefreshControl hasn't been re-rendered), causing the refresh indicator to stop immediately.

When I comment out the setNativeProps function call, my refresh indicator works as expected.

Am I missing something/doing something incorrectly here?

• version 0.26.0-rc
• occurs on iOS (both simulator and phone), haven't tested on Android

[damusnet]

@facebook-github-bot stack-overlow

[janicduplessis]

I already saw this happen at some point but I couldn't reproduce it consistently. Assuming that set state will be sync is definetly a bad idea, I'll try to figure out a better way to do this.

[ide]

I think we want this code to work even if this.props were immutable. So instead of calling setNativeProps in _onRefresh, we should probably either let render() take care of setting the prop (why isn't this the case already?) or call setNativeProps in componentWillUpdate.

[janicduplessis]

The goal of this code is to keep the native refresh control in sync with the JS props. If the user doesn't call setState({refreshing: true}) in the onRefresh callback the state will get out of sync with the native refresh control.

Maybe a better way to do this is call setNativeProps({refreshing: false}) before calling the onRefresh callback but I'm not 100% sure it will work. Another way is to use setImmediate to call the setNativeProps at the end of the js frame.