CODEWITHSUNDEEP
javascriptreact-nativescrollview
mxmtsk
mxmtsk

Reputation: 4685

Offset RefreshControl in React Native

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 }}
  >

Upvotes: 8

Views: 5818

Answers (3)

xRoGeSx
xRoGeSx

Reputation: 31

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

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

Upvotes: 3

Wayne Kim
Wayne Kim

Reputation: 31

I resolved like this.

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

I use these props to FlatList.

Upvotes: 3

kodeusz
kodeusz

Reputation: 188

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?

Upvotes: 2

Related Questions