8

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?

enter image description here

This is my component:

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

3 Answers 3

2

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?

1
  • I have added the code for my ScrollView above. If I set contentContainerStyle with padding, there's space I don't want between my child components and the refresh control. As mentioned, contentInset works soooometimes. But sometimes not. It's really weird
    – mxmtsk
    Mar 1, 2019 at 7:54
1

I resolved like this.

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

I use these props to FlatList.

1
1
<RefreshControl
  progressViewOffset={40}
  refreshing={loading}
  onRefresh={onRefresh}
/>

progressViewOffset is how you do it, that would offset the loader 40 pixels lower.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.