Offset RefreshControl in React Native

Question

Edit: There seems to be a bug in React Native. I have created a bug on GitHub. For everyone coming for a solution: There seems to be none at the moment.

https://github.com/facebook/react-native/issues/23988

––––

I'm using a translucent header, which is why I gave the ScrollView a paddingTop to offset the content. When I pull down to refresh, the spinner is still at the top.

I have tried to use contentInset={{ top: 80 }} to offset everything, but there is an issue on iOS where it sometimes is not picked up correctly and set to 0.

Are there any other ways to get the RefreshControl to start lower?

This is my component:

  <Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
      { useNativeDriver: true },
    )}
    contentInset={{ top: headerHeight() + 10 }}
  >

Answer 1

Did you set padding for the style or for the contentContainerStyle?

Can you provide some code snippet what properties does your ScrollView have and by what is wrapped?

Answer 2

I resolved like this.

contentInset={{ top: headerHeight }}
contentOffset={{y: -headerHeight}}

I use these props to FlatList.