React-native: Can't wrap RefreshControl in a custom component on Android?

[jamesisaac]

Description

If I want common swipe-to-refresh functionality to be re-used across several screens in my app (across both ListViews and ScrollViews), surely the cleanest solution to this would be to have a custom MyRefreshControl, which encapsulates its own state / syncing logic / styling, that can be composed in with a single line - refreshControl={<MyRefreshControl />}. But from what I can tell this doesn't seem to work.

Reproduction

https://rnplay.org/apps/41CAVQ

Example above works on iOS, but not Android. Uncommenting line 27 and commenting 28 (i.e. removing the custom component wrapper) fixes it for Android.

Additional Information

• React Native version: 0.37.0 (Exponent latest)
• Platform: Android
• Operating System: Windows

[jamesisaac]

Never mind - turns out the issue was that I wasn't passing {...this.props} down from my component to the original RefreshControl.

From the way it's called, it's not really clear that there are other props being implicitly passed on to the RefreshControl. Might be useful if that was mentioned in the docs, or there was an error if those props aren't being provided.

[aroth]

This caught me too. Thanks for following up with a resolution, @jamesisaac.

[BradRyan]

YES! Thank you @jamesisaac. Just saved me a ton of time.

[toytonic]

Hi @jamesisaac, is your example still available somewhere? I am trying to wrap the native refresh control within a custom component without success. When I put a container view around it, I get the following error:

Exception thrown while executing UI block: RCTScrollView may only contain a single subview

I basically want to add something similar as progressViewOffset for android. I already tried a lot but without success. Any help appreciated...

[jamesisaac]

Hi @toytonic . I wasn't putting a view around it, just wrapping it in another React component so that I could pass in some props by default. By wrapping it in a view you're affecting the view hierarchy, which would have unknown consequences... not really related to this issue.