RefreshControl broken on iOS on react-native 0.24.0-rc3

[ghuh]

It looks like the refresh control was broken by this commit 88ebdb2.

When the refresh control gets activated (i.e. pull down and release) it causes the following error:

[ylquankai]

I have the same problem.

[ide]

cc @janicduplessis do you have time to look into this? I can cherry-pick the patch into the next RC (0.24.0-rc5).

[janicduplessis]

Seems similar to #6489. Not sure why the ref becomes null, do you do anything special in the onRefresh callback? If you can get a gist or a RNPlay example that reproduces the bug it would help understanding what is happening here.

@ide What's the window before releasing 0.24? I could just add a null check for now.

[ide]

@janicduplessis I'm planning for either this Friday or next Monday.

[janicduplessis]

Lets add a null check which will probably end up being the right solution but I'd still like to understand why the ref is null.

[ide]

The ref is set to null in two scenarios: on each render pass because the ref callback function changes during each render since we create a new arrow function each time, and when the NativeRefreshControl is unmounted.

I don't think _onRefresh is getting called in the middle of a render pass -- I don't think much non-React code is allowed to run in that window of time. So my guess is that some code within NativeRefreshControl is invoking _onRefresh even after NativeRefreshControl is unmounted.

The null check would fix this bug but I think the best fix -- assuming my guess is right -- is for NativeRefreshControl not to call onRefresh when it's unmounted.

[janicduplessis]

Is is possible that the ref gets set to null because the RefreshControl gets unmounted during the call to the onRefresh prop via setState?

_onRefresh() {
    this.props.onRefresh && this.props.onRefresh(); // <-- this calls into user code that could unmount the refresh control.
    this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
  },

[ghuh]

That's probably correct. In my onRefresh function, I change state such that the RefreshControl is no longer rendered.

[janicduplessis]

Double checked the native implementation on iOS and it only calls _onRefresh when the RefreshControl detects a pull down gesture, which probably can't happen if the component is unmounted (unless there's a crazy race condition). Unmounting the RefreshControl during the onRefresh callback is probably what causes this, so adding the null check seems like the right solution.

[janicduplessis]

Ok, I reproduced the bug, I can confirm that the issue is caused by unmounting the refresh control during the onRefresh callback.

[ide]

Nice find!

[ide]

Fixed in #6931